프론트엔드
pnpm을 사용한 모노레포로 프론트엔드 생산성 늘리기
두줄요약
더스윙 프론트엔드팀이 20여 개 어드민을 pnpm 모노레포로 통합한 배경과 과정을 소개했습니다. 맥락 전환과 배포 복잡도를 줄이고 생산성과 코드 일관성을 높인 사례입니다.
문제 상황
- 20여 개의 백오피스 어드민이 분산되어 있어 레포 이동과 PR 확인이 잦은 맥락 전환 비용 발생
- 다른 패키지 변경사항 파악 어려움, DRY하지 못한 코드 증가, 일관성 없는 DX, 인프라 관리 포인트 증가
원인 분석
- 서비스와 어드민 수 증가로 컨텍스트가 과도하게 분산된 멀티레포 구조
- 공통 컴포넌트와 설정을 재사용하기 어려운 분리된 코드베이스
- 배포와 개발 환경이 앱마다 달라 운영 복잡도 누적
해결 방법
- 의미적으로 연결된 백오피스를 하나의 모노레포로 통합하고 공통 설정과 모듈을 shared로 분리
- pnpm workspace로 apps, shared 구조를 구성해 개발 환경과 설정을 통일
- GitHub Actions reusable workflow와 labeler로 변경 파일 감지, 패키지별 배포 자동화