리액트 초기 마운트 살펴보기
리액트는 Trigger, Render, Commit 이 3단계로 초기 마운트를 진행한다. 이 3단계를 자세하게 살펴보겠다. 이 FiberNode들이 트리와 같은 구조로 되어 있고, 리액트는 이런 트리 구조를 순회하면서 컴포넌트를 렌더링한다. 리액트 프로젝트를 하나 생성한 후, 크롬 개발자 도구에서 디버거 기능을 이용하여 분석했다.
목차 기능 구현
블로그에서 사용하는 목차 기능을 구현했다. 포스트 에디터를 위해 TipTap이라는 라이브러리를 사용했다. 이 에디터를 사용하면 다음과 같은 JSON이 생성된다. 이 JSON을 Postgres(Serverless Postgres platform인 Neon)에 저장하고, /post 페이지에서 이 JSON을 Viewer로 파싱하는 식으로 사용하고 있다.
데스크톱, 모바일 호환되는 이미지 캐로셀 구현
데스크톱과 모바일을 구분하는 이유 터치 이벤트는 일반적으로 터치 스크린을 가진 디바이스에서 이용가능하다. 하지만, 터치 스크린을 갖는 디바이스를 포함한 모든 데스크탑 디바이스에서 터치 이벤트 API를 사용할 수 없다. 따라서 모바일 환경과 데스크탑 환경을 구분해야 한다.
Next.js + Vercel TTFB 문제
로컬 환경에서는 애플리케이션의 TTFB(Time To First Byte)가 70~150ms정도 걸리는데, 배포 환경에서는 TTFB가 느리면 1500ms, 빠르면 400ms정도가 걸렸다. 그래서 최적화를 위해 여러가지를 시도해보았다. 자바스크립트 번들링 크기가 커서 문제가 발생하는가 싶어서 번들링의 크기를 최소화했다.
DOM 크기가 큰 요소 렌더링 최적화
문제 : 초기 마운트 시 현재 사이트에 등록된 건축가는 326명이다. 더 나은 사용자 경험(검색)을 위해 모든 건축가들을 DOM에 추가했기 때문에, DOM의 크기가 매우 컸다. 과도한 DOM 크기 때문에 스타일 계산 시간이 오래 걸리고 레이아웃 비용이 비쌌기 때문에 초기 마운트가 오래 걸리는 문제가 발생했다.
로컬스토리지를 이용한 다크모드 구현
Next.js 13에서 웹 스토리지를 이용하여 다크모드를 구현했다. 웹 스토리지의 문제점 Next.js의 서버 컴포넌트에서는 브라우저 APIs를 이용할 수 없다. 즉, 웹 스토리지에 접근을 할 수 없기 때문에 서버 컴포넌트에서 로컬스토리지에 접근하면 아래와 같은 에러가 발생한다.