Turborepo, Next.js, TypeScript를 이용한 프론트엔드 모노레포 적용기 | 인프콘2023

모노레포는 앱과 여러 라이브러리를 한 저장소에서 독립 패키지로 관리해 버전 배포 없이 변경을 즉시 반영하고 중복 유틸·컴포넌트를 재사용하게 한다. 공통 ESLint 설정과 한 번의 통합 테스트로 컨벤션과 리팩터링 결과도 전체 패키지에서 확인할 수 있다. 반면 의존 연결이 쉬워 경계가 무너지거나 저장소가 무거워지고 코드 소유권이 흐려질 수 있으므로 패키지 간 방향과 책임을 먼저 합의해야 한다.

홉스는 자체 웹 앱뿐 아니라 고객 개발자가 쓸 UI, 공통 디자인 시스템, React 컴파일러와 로컬 개발 기능이 필요해 같은 코드를 여러 관점에서 사용한다. 계속 늘어나는 패키지를 함께 수정·검증해야 했으므로 모노레포가 제품 구조에 자연스러운 선택이었다. Yarn·Lerna·Nx·Turborepo를 비교한 뒤 가벼우면서 캐시와 빌드 최적화를 제공하고 기존 Next.js·TypeScript 스택과 맞는 Turborepo를 채택한다.

기본 스캐폴딩의 앱·문서·공통 ESLint·UI 패키지를 설명한 뒤 홉스의 Storybook, 컴파일러, 코어, 디자인 시스템, 도메인, 에디터와 UI 구조를 보여 준다. 새 패키지는 수동 생성이나 코드 생성기로 추가하고, 의존성 그래프로 빌드·린트 관계를 확인하며 Vercel의 루트와 빌드 명령을 제품 사정에 맞게 조정한다. 전체 작업 대신 filter 옵션으로 한 패키지만 개발·테스트하고 TypeScript 경로 별칭을 설정해 일상적인 개발 비용을 낮춘다.

공통 로직 재사용, 저장소 전체의 코드 탐색과 디버깅, Next.js·TypeScript와의 자연스러운 통합은 기대한 효과를 냈다. 그러나 Yarn 버전과 호이스팅에 따른 의존성 충돌, 패키지 간 금지된 방향을 컴파일러가 막지 못하는 문제, 모든 테스트를 돌리는 비용이 남았다. 팀은 의존성 방향을 문서와 코드 리뷰로 지키고 PR에서는 변경 영향을 받은 패키지만 테스트해, 여러 패키지를 함께 만드는 제품에 적합한 모노레포를 운영한다.