개발자는 코드를 찢어 개발자는 코드를 찢어

🔔 서론 인스타그램, 트위터, 페이스북 등의 sns를 이용하다 보면 스크롤을 내릴 때 일정 개수 이상의 피드를 보고나면 로딩중이라는 ui가 표시되면서 새로운 피드를 불러오는 경험을 겪어본 적이 있을 것이다. 수십 수백개의 데이터를 한번에 불러오면 사용자에게 큰 부담을 주기 때문에 소수의 데이터만 미리 불러두고 스크롤을 하면 추가로 데이터를 불러오는 방식으로 무한으로 스크롤을 할 수 있는 것이다. 오늘 알아볼 내용은 무한 스크롤을 구현하는 내용이다. 무한 스크롤이란, 컨텐츠를 페이징하는 기법 중 하나로 아래로 스크롤하다 컨텐츠의 마지막 요소를 볼 즈음 다음 컨텐츠가 있으면 데이터를 불러오는 방식으로 주로 sns에서 사용된다. 무한 스크롤 구현 방식은 크게 두 가지로 알아보자. window의 scroll 이..

🔔 서론 오늘 알아볼 키워드는 Optimistic Update 라는 개념이다. 데브코스에서 api와 통신하는 Todo App 실습을 진행하면서 알게 된 키워드인데, 데브코스를 진행하면서 모르고 있던 키워드들이 계속 있는 것을 보니 역시 공부해야할 개념이 아직도 너무 많다는 걱정 반, 그래도 데브코스덕에 하나 또 배워간다는 안도감 반 씩 들었다.😜 이번에는 가볍게 개념정리하는 포스팅이므로 편하게 보도록하자. 📌 낙관적 업데이트란? 사용자는 브라우저의 기능에 액션을 취했을 때, state의 값이 변하면 서버에게 알려야하고, 화면의 값 역시 바뀌어야한다. 이를 업데이트라고 표현하는데 이 업데이트는 낙관적 업데이트(Optimistic Update)와 비관적 업데이트(Pessimistic Update) 두 가지로..

🔔 서론 프로그래머스 데브코스 Javascript 심화과정을 수강하던 중 생소한 키워드를 알게 됐다. 그것은 Event Delegation 즉, 이벤트 위임 이라는 개념이었다. 강사님께서 예시 코드를 보여주시면서 이벤트 델리게이션의 개념을 알아두는 게 정말 중요하다고 스치듯 말씀하셨지만, 내 귀에는 엄청 강조하듯이 들린 것 같은 느낌이었고 마침 처음 듣는 개념이었기에 정리를 하고자 했다. Event Delegation에 대해 알기 위해서는 Event Flow, Event Capturing, Event Bubbling등 여러가지 개념을 또 알아야 했기에 이번 포스팅에서 모두 알아보도록 하자. 📌 Event Delegation이란? 이벤트 델리게이션은 Javascript의 대표적인 디자인 패턴 중 하나이다...

🔔 서론 어느덧 프로그래머스 데브코스 교육 4주차가 지나가고 있다. 생각했던것보다 깊은 내용과 어렵고 생소한 내용에 허덕이고 있지만, 잘 헤쳐나가는 것이 중요하다. 이번 포스팅은 데브코스의 내용중 history api의 사용 방법과 이를 활용해 프레임워크 없이 Vanilla Javascript로만 SPA(Single Page Application)를 만들어 보는 것에 대한 포스팅이다. 과거 어느 한 블로그의 글에서 "신입 개발자나 인턴에게 프레임워크 없이 Vanilla Js로만 SPA를 만들어 보라고 과제를 주면 어떻게 해야하는지 모르는 사람들이 간혹 있어 아쉬웠다" 라는 포스팅을 본 적이 있다. 그 글에는 왜 Vanilla Js로 SPA를 만들어 볼 줄 알아야 하는지에 대한 이유는 서술되어 있지 않았고..

이번 포스팅은 프로그래머스 데브코스 2주차 과제를 수행한 뒤 받았던 코드 리뷰에 대한 회고 포스팅이다. 과제 자체는 그리 어렵지 않은 과제였다. 어찌저찌 과제는 잘 수행했고 팀원들과 멘토님께 코드 리뷰를 받게 되었는데, 코드 리뷰중에서 멘토님께 유독 중복적으로 피드백을 받은 부분이 변수명을 짓는 방식에 대한 것이었다. 나는 평소에 변수명이나 함수명을 지을 때 이 변수나 함수가 어떤 동작으로 돌아가는지를 위주로 짓는 경향이 있었다. 예를 들어 위의 코드에서 wordFinished는 현재 노드가 완성된 단어인지 확인하기 위한 플래그의 역할을 하는 변수다. 급하게 과제를 수행하느라 대충 지은 감이 있는데, 아마 지금 다시 지으라고 해도 isWordFinished 정도로 지을 것 같다. 멘토님께서 처음 이 부분..

🔔 서론 프로그래머스 데브코스 Javascript 강의를 수강하면서 과제를 진행하던 중 나를 미치게 만드는 요소가 크게 두 가지 있었는데 첫 번째가 장시간 앉아서 강의를 듣다보니 생긴 허리통증 이었다면, 두 번째는 this 였다. 그런의미로 오늘은 this를 공부해보자. 🔔 this란? 먼저 mdn 공식문서에서 this를 뭐라고 설명하는지 알아보자 🤔 흠... 그렇구만.. 흐음.. 이라는 생각만 들게 만드는 문장들이다. this의 특징들을 살펴보면서 위의 문장을 제대로 이해해보도록 하자. 📌 this this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수다. this를 통해 자신이 속한 객체 혹은 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다. this는 일반적..

프로그래머스 데브코스 프론트엔드 과정을 이수하던 중 Event Loop의 동작 과정에 대해 접하게 되었다. 상당히 예전에 Javascript를 처음 공부하던 당시에 접했던 키워드라 기억이 가물가물해서 이번 기회에 다시 한번 정리해보기로 했다. Event Loop가 Javascript 엔진에 포함되어 있다고 착각하는 경우가 종종 있다고들 하는데, 사실은 그렇지가 않다. Event Loop는 Javascript 엔진에 포함되어 있지않고, 브라우저나 Node.js에서 자체적으로 관리하고 있다. WebAPI는 브라우저에서 제공하는 API이고, 클릭과 같은 DOM event, 네트워크 호출 혹은 Timer 등을 실행시킬 경우 브라우저에 위임되는데, 보통 이런 WebAPI들은 Callback 함수를 넘기기 마련이다..

얼마 전 면접을 본적이 있는데 js에서의 호이스팅에 대해 다른 면접자에게 질문을 하는 것을 보았다. 얼추 어떤 개념인지는 머릿속으로는 알고 있었지만 막상 나도 설명을 해보려고 생각해보니까 정확히 알고 있지 않은 것 같아 정리를 하게 되었다. Hoisting 이란? 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것 자바스크립트 함수는 실행되기 전에 함수 안에 필요한 변수값들을 모두 모아서 유효 범위의 최상단에 선언한다. 자바스크립트 Parser가 함수 실행 전 해당 함수를 한 번 훑는다. 함수 안에 존재하는 변수/함수선언에 대한 정보를 기억하고 있다가 실행시킨다. 유효 범위: 함수 블록 {} 안에서 유효 즉, 함수 내에서 아래쪽에 존재하는 내용 중 필요한 값들을 끌어올리..