개발과 기술에 대한 이야기를 공유합니다.
성능 최적화는 감이 아니라 측정에서 시작된다. DevTools와 Lighthouse를 활용해 병목을 분석하고, 이미지 최적화, 코드 분할, 렌더링 개선을 통해 실제 성능을 개선한 과정을 정리한다.
React의 reconciliation은 UI 트리를 비교해 변경된 부분만 효율적으로 업데이트하는 과정이다. 컴포넌트의 위치, 타입, key에 따라 state가 유지되거나 초기화되는 원리를 중심으로 정리한다.
모노레포 환경에서 pnpm workspaces를 적용했지만 구조의 한계를 느끼고, 빌드 시스템 도구를 재검토했다. 의존성 기반 태스크 실행, 캐싱, 병렬 처리를 통해 Turborepo와 Nx가 어떻게 생산성을 개선하는지 정리한다.
이 글에서는 패키지 매니저가 왜 필요한지부터 시작해 npm, Yarn, pnpm의 발전 과정과 차이를 정리한다. 또한 Workspaces와 의존성 관리 방식을 비교하면서, 모노레포 환경에서 어떤 선택이 왜 중요한지 살펴본다.
모노레포는 여러 패키지를 하나의 저장소에서 관계 중심으로 관리하는 방식이고, 폴리레포는 프로젝트별로 저장소를 나눠 관리하는 방식이다. 각각 장단점이 있지만, 여러 앱과 공통 모듈을 함께 발전시켜야 하는 구조에서는 모노레포가 더 유리할 수 있다. 이번 글에서는 두 방식의 차이와 함께, 디자인 시스템과 마이크로 프론트엔드 관점에서 모노레포를 살펴본다.
