Intro최근 서비스에 무한스크롤을 통해 리스트를 무한적으로 보여주는 기술을 많이 사용하게 되었습니다. 이렇듯 무한 스크롤로 목록을 계속 불러오다보면, 10,000개까지 데이터가 쌓이는 경우가 발생하게 됩니다. 실제로 리스트에 10,000개를 그대로 넣어봤더니 아래 영상처럼 2번 Fixed height 에서 1번 Naive 화면이동이 느려지고 상호작용할때는 전반적으로 끊김이 발생했습니다.10,000개를 모두 브라우저 DOM에 띄워두었기 때문입니다. 브라우저가 아이템을 모두 가지고 있어야하기 때문에 무거워집니다. 수치상으로도 확인해볼까요? 순수하게 DOM에 10,000개를 모두 렌더링 했을때와 가상 스크롤을 적용했을때를 비교해보았습니다.첫번째 화면(Naive rendering)은 영상에서 1번 Naive ..

IntrocreateBrowserRouter와 BrowserRouter의 차이를 파고들다가, 정작 막힌건 라우터가 아니라 더 근본적인 질문이었습니다. “JSX는 언제 실행되는것인지, 함수는 언제 실행되는 건지 React는 언제부터 일을 시작하는 것인지” 에 대해 물음을 답할 수 없어서 렌더링 전 후 차이가 있다고 이해했지만 정작 그 그리는 단계 자체가 머릿속에 그려지지 않았습니다. 화면이 어떻게 만들어지는지 그 원초적인 과정을 모르니 아무리 설명을 읽어도 겉돌기만 했습니다.JSX가 왜 등장했는지, 정확히 무엇인지 그 객체가 언제 실행되는지, 어느 시점에 화면이 그려지는지 탐구해보려한다.JSX란 무엇일까요?JSX는 무엇일까요? JavaScript 파일 안에서 HTML과 유사한 마크업을 작성할 수 있도록 해..

인트로자바스크립트를 공부하다 보면 클로저(Closure)라는 용어를 자주 접하게 됩니다.또한 자바스크립트의 중요한 특징 중 하나로 “함수는 자신의 환경을 기억한다”는 설명도 많이 등장합니다. 그렇다면 이 두 개념은 어떻게 연결되어 있을까요?이 글에서는 렉시컬 환경과 클로저의 관계를 중심으로, 클로저가 어떤 원리로 동작하는지 알아보고자 합니다.렉시컬 환경 (Lexical Env)코드가 작성된 위치 기준으로 만들어진 변수 저장 환경즉, 선언된 위치 기준으로 접근 가능한 모든 변수 공간을 렉시컬 환경이라고 말합니다.렉시컬 환경은 실행 컨텍스트를 구성하는 컴포넌트이며, 스코프와 식별자를 관리합니다. 실행 컨텍스트 내부 구조실행 컨텍스트 (Execution Context)├── LexicalEnvironment│..

인트로Vanilla JS로 VDOM을 직접 구현하면서, 이해되지 않는 에러를 반복해서 마주했습니다.ReferenceError: Cannot access 'x' before initializationReferenceError: vnode is not defined 우연치 않게 var을 선언하기 전에 console.log를 찍게 되는 일이 있었습니다.그런데, undefined만 뜨고 에러가 발생하지 않아서 "아 JS는 변수자체가 선언되기 전에 변수를 저장해두는건가"라고 생각했는데, const에서는 레퍼런스에러가 발생했습니다.왜 var은 되고 const는 안되지? 대체 JS에는 어떤 특징이 있어서 이런 일이 발생하는거지 하고 의문이 생겼습니다. 이 질문을 시작으로 따라가다보니 자연스럽게 실행 컨텍스트(Exec..