성능 최적화는 감이 아니라 측정에서 시작된다. DevTools와 Lighthouse를 활용해 병목을 분석하고, 이미지 최적화, 코드 분할, 렌더링 개선을 통해 실제 성능을 개선한 과정을 정리한다.
React의 reconciliation은 UI 트리를 비교해 변경된 부분만 효율적으로 업데이트하는 과정이다. 컴포넌트의 위치, 타입, key에 따라 state가 유지되거나 초기화되는 원리를 중심으로 정리한다.
모노레포 환경에서 pnpm workspaces를 적용했지만 구조의 한계를 느끼고, 빌드 시스템 도구를 재검토했다. 의존성 기반 태스크 실행, 캐싱, 병렬 처리를 통해 Turborepo와 Nx가 어떻게 생산성을 개선하는지 정리한다.
프론트엔드 성능 최적화는 단순히 빠르게 만드는 것이 아니라, 사용자 경험을 개선하기 위한 과정이다. 이 시리즈에서는 실제 서비스 사례를 기반으로 성능을 측정하고, 병목을 찾고, 개선하는 과정을 단계적으로 정리한다. 이미지 최적화, 코드 분할, 렌더링 최적화 등 실무에서 바로 적용할 수 있는 방법들을 다룬다.
익숙하게 써왔지만 정확히 설명하기는 어려웠던 React 개념들을 다시 공부하는 시리즈입니다. React 공식 문서와 예제를 바탕으로, 렌더링과 reconciliation, state, key, hooks 같은 주제를 더 깊이 있게 정리합니다.
대규모 서비스에서 커지는 프론트엔드 복잡도를 어떻게 분리하고 관리할지, 마이크로 프론트엔드 아키텍처의 개념과 실전 설계 관점에서 정리하는 시리즈입니다.
