개요Denamu 서비스를 개발하면서 포스트를 보여주는 기능을 만들어야 했다. 여러 페이지네이션 방식 중 무한 스크롤 방식이 있다는 것을 알게 되었고, 서비스와 결이 맞는 것 같아 구현해보기로 했다. 인터넷에서 찾아보니 Intersection Observer API와 React Query 조합이 많이 사용되는 것을 알게 되었고, 이 방식으로 무한 스크롤을 구현했다. 나중에 추가적으로 자료를 찾아보니 Intersection Observer API가 리플로우를 방지한다는 사실을 알게 되었고, 이게 왜 그런지 궁금증이 생겼다. 사실 최신 기술만 접하게 되다보면 이전 방식의 문제점과 기술이 어떻게 발전해왔는지 이해하기 어렵다. 그래서 무한 스크롤 구현 기술이 어떻게 발전해왔는지 살펴보고자 한다. 예전에 주로 사용..

JavaScript 엔진의 등장웹 브라우저 전쟁과 성능 경쟁2008년 이전의 JavaScript는 웹에서 단순한 스크립트 언어로 사용됐다. 브라우저들은 인터프리터로 JavaScript를 실행했고, 성능은 중요한 고려 사항이 아니었다. 하지만 웹 애플리케이션이 복잡해지면서 상황이 바뀌었다. Gmail과 Google Maps 같은 웹 애플리케이션이 등장하면서 JavaScript 성능이 브라우저의 경쟁력이 됐다. 구글은 기존 JavaScript 엔진의 한계를 확인했다. 파이어폭스의 SpiderMonkey와 인터넷 익스플로러의 Chakra로는 복잡한 JavaScript 애플리케이션을 처리하기 어려웠다. 브라우저 전쟁은 JavaScript 생태계를 변화시켰다. 브라우저 개발사들은 JavaScript 엔진 개선에 ..

브라우저에서 검색창에 키워드를 입력하면 어떤 일이 일어날까? 검색 결과를 가져오기 위해 서버에 요청을 보내고, 응답을 받아 화면에 표시하는 동안에도 우리는 다른 탭을 열거나 스크롤을 내릴 수 있다. 하지만 자바스크립트는 싱글 스레드 언어다. 그렇다면 한 번에 하나의 작업만 처리할 수 있지 않을까? 이런 동작이 어떻게 가능한 걸까? 동기$_{synchronous}$ 처리는 은행 창구에서 한 명의 고객이 업무를 마쳐야 다음 고객의 업무를 처리하는 것처럼 한 작업이 끝나야만 다음 작업을 시작하는 방식이다. 반면 비동기$_{asynchronous}$ 처리는 카페에서 주문을 받은 후 에스프레소 샷이 내려오는 동안 다음 손님의 주문을 받을 수 있는 것처럼 이전 작업이 끝나기를 기다리지 않고 다음 작업을 실행할 수 ..

자바스크립트의 스코프는 변수의 유효한 범위를 의미한다. var로 선언한 변수는 오직 함수의 중괄호 내부만을 유효 범위로 인정하는데, 이를 함수 레벨 스코프$_{function \space level \space scope}$라 한다. 반면 C나 자바 등 대부분의 프로그래밍 언어는 모든 중괄호(함수, if문, for문, while문 등) 내부를 유효 범위로 인정한다. 이러한 특성을 블록 레벨 스코프$_{block \space level \space scope}$라 한다. var x = 1;if (true) { var x = 10; console.log("if문 안쪽:", x);}console.log("if문 바깥쪽:", x);위 예제를 보면 if문 내부와 외부에서 선언된 x가 같은 변수를 가리킨다. v..

React로 개발을 하다 보면 이벤트 핸들링은 피할 수 없다. 버튼 클릭, 폼 입력, 마우스 호버 등 사용자와의 상호작용을 처리하기 위해서는 이벤트를 다뤄야 한다. 하지만 브라우저마다 이벤트 처리 방식이 조금씩 다르다. React는 이런 브라우저 간의 차이를 어떻게 해결했을까?  합성 이벤트React는 브라우저 간 차이를 해결하기 위해 합성 이벤트$_{synthetic \space event}$ 개념을 도입했다. 브라우저의 네이티브 이벤트를 한 번 감싸서 모든 브라우저에서 동일하게 동작하도록 만든 것이다. 브라우저마다 이벤트를 처리하는 방식이 다르다는 점은 웹 개발에서 오랫동안 골칫거리였다. 예를 들어 Internet Explorer에서는 이벤트 객체를 전역 window 객체를 통해 접근해야 하고, 다른..

React로 개발을 하다 보면 사용자의 입력을 받아야 하는 상황이 자주 생긴다. 이메일 입력, 게시글 작성, 설문 응답처럼 폼을 사용하는 기능을 구현할 때가 많다. React는 선언적인 특성을 가지고 있어서 기존 HTML 폼을 다루는 방식과는 다른 접근이 필요하다. 폼을 다루는 방식은 크게 Uncontrolled Components와 Controlled Components로 나눌 수 있다.  Uncontrolled componentUncontrolled Components는 React가 직접 상태를 제어하지 않는 폼 요소를 의미한다. 일반적인 HTML 폼처럼 DOM이 직접 폼 데이터를 관리하며, React는 필요할 때만 ref를 통해 값을 읽어오는 방식이다. 기본적인 Uncontrolled Compone..

들어가며자바스크립트에서 스코프 체인은 변수와 함수의 유효 범위를 결정한다. 이 글에서는 스코프 체인이 무엇이고 어떻게 동작하는지를 이해해보려 한다. 스코프 체인에서 변수를 찾는 과정은 단방향으로 이루어진다. 자바스크립트 엔진은 현재 스코프에서 시작해 상위로 올라가면서 변수를 찾아간다. 결과적으로 스코프가 변수와 함수의 접근성을 단순하고 일관된 규칙으로 관리하는 것을 이해할 수 있을 것이다.  스코프 체인함수는 전역이나 다른 함수 내부에서 정의할 수 있다. 함수 내부에 다른 함수를 정의하는 것을 함수의 중첩이라 하며, 이때 내부에 정의된 함수를 중첩 함수$_{nested \space function}$, 이를 감싸는 함수를 외부 함수$_{outer \space function}$라 한다. 함수가 중첩되면 ..