자바스크립트 퀴즈를 통해 이벤트 루프(Event Loop), Microtask Queue, Macrotask Queue의 동작 과정을 이미지와 함께 소개합니다.
현재 리액트는 16버전에 도입된 Fiber 아키텍처를 기반으로 가상돔을 실제 DOM과 동기화하는 재조정(Reconciliation)과정을 진행합니다. 이번 포스팅에서는 Fiber란 무엇인지, 어떻게 재조정 과정을 진행하는 것인지 살펴보겠습니다.
API 요청을 할 때 가장 많이 사용하는 Axios와 Fetch API, 어떤 것을 선택해야 할까요? 어떻게 등장하고 구현되어 있는지, 그리고 각각의 차이점에 대해 소개합니다.
개발자도구의 네트워크 탭을 보다보면 disk cache와 memory cache에서 가져오는 데이터가 꽤 많은 것을 볼 수 있습니다. 브라우저는 어떤 기준으로, 어떻게 이 데이터들을 저장하고 가져오고 있는 걸까요?
리액트 19에서의 변경사항을 간단히 요약하자면, 서버 컴포넌트를 위한 변경사항과 편의성을 위한 hook이 추가되었습니다.
효율성 풀이를 위한 이진탐색과 함께, 이진탐색과 같은 큰 값을 다룰 때 발생할 수 있는 스프레드 연산자의 RangeError: Maximum call stack size exceeded 를 다뤘습니다.
자바스크립트의 최신 문법은 어떻게, 어떤 기준으로 추가되는 것일까요? 1995년에 작성된 코드를 어떻게 지금까지 읽을 수 있는지, 어떻게 IoT 전구와 아이폰이 같은 자바스크립트를 쓸 수 있는지 소개해 드립니다.
클로저에 대한 설명을 일급객체와 렉시컬 스코프와 함께 정리하였으며, 사용 목적을 사례를 들어 자바스크립트에서의 클로저를 정리하였습니다.
React의 공식문서에 기반하여 리액트의 Virtual DOM 의 작동 방식과 유의사항을 정리하였습니다.
ES Module은 어떻게 등장하게 되었는지, 왜 옛 코드에는 아직도 require가 남아있고, 왜 아직도 ES Module이 아닌 CommonJS를 쓰려 하는지에 대해 포스팅하였습니다.
Unique Value를 파악하기 위해 Object 대신 Map을 선택하여 풀이한 프로그래머스 롤케이크 자르기
NextJS에서는 클라이언트 컴포넌트와 서버 컴포넌트의 경계를 나누어 각각 다른 렌더링 과정을 거친다. 이번 포스팅에서는 서버 컴포넌트와 클라이언트 컴포넌트의 렌더링 과정에 대해 공식문서를 바탕으로 정리하였다.
Virtual DOM의 비교(diffing) 알고리즘 state나 props가 갱신되어 render()가 실행되면서 리액트가 렌더링되면, 리액트는 실제 DOM 구조를 가벼운 자바스크립트 객체로 표현한 가상 DOM(리액트 엘리먼트 트리)을 생성합니다. 그리고 diffing 알고리즘을 통해 변경사항을 O(n)의 복잡도로 파악할 수 있습니다. 알고리즘의 동작원...
"리액트는 Virtual DOM을 사용하기 때문에 빠르다" 라는 말은 맞기도 하지만 틀리기도 합니다. 리액트는 왜 Virtual DOM을 사용하고, 스벨트나 SolidJS는 왜 Virtual DOM을 사용하지 않는가에 대해 작성하였습니다.
근속 2년 차 회고를 작성하던 중에 구조조정 통보를 받아 어떻게 회고를 완성해야 하나 고민했지만, 퇴사 과정에서 느낀 많은 것들을 기억하기 위해 해고 회고를 별도로 작성했다. 조금은 아이러니한 상황이지만 나름의 해프닝으로 재밌게 받아들이려 한다.
CRA → Vite Migration 빌드시간과 함께 Vite보다 CRA가 더 빠를 수 있는 상황에 대해 공유합니다.