Turborepo를 활용한 모노레포 개발 가이드
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
DevOps
대상자
- 모노레포 구조를 도입하고자 하는 소프트웨어 엔지니어
- CI/CD 프로세스 최적화를 목표로 하는 DevOps 팀
- 복잡한 프로젝트 구조를 관리하는 기술 리더
- 난이도: 중급~고급 (Turborepo 설정 및 캐싱 기술 요구)
핵심 요약
- Turborepo는 모노레포의 빌드 시간을 극복하기 위한 고성능 빌드 시스템으로, Remote Cache를 통해 중복 작업 방지
- 모노레포 구조:
apps/(프론트엔드, 백엔드),packages/(공유 컴포넌트, 타입 정의)로 구성 - 핵심 기술:
turbo.json설정,tsconfig.base.json공유, Next.js 15.3.4 및 Express 4.18.2 사용
섹션별 세부 요약
1. 모노레포의 문제점
- 팀 규모가 커질수록 빌드 시간이 급격히 증가 (React 애플리케이션에서 1시간 이상 소요)
- 반복적인 테스트, 린팅, 빌드 프로세스로 인한 자원 낭비
- 해결책: Turborepo의 스마트 캐싱 및 태스크 오케스트레이션
2. Turborepo 설치 및 초기 설정
- 필수 조건: Unix-like 시스템 (Windows 11 사용자는 WSL 2.0 권장)
- 프로젝트 구조:
```bash
my-monorepo/
├── apps/ (web, api)
├── packages/ (ui, types, docs)
├── turbo.json
├── tsconfig.base.json
└── package.json
```
- package.json 설정:
```json
"scripts": {
"dev": "turbo run dev",
"build": "turbo run build"
},
"workspaces": ["apps/", "packages/"],
"devDependencies": {"turbo": "2.5.4"}
```
3. Next.js 및 Express 앱 구성
- Next.js 15.3.4 설치 및
tsconfig.base.json공유 - Express 4.18.2 백엔드:
src/index.ts에서/users엔드포인트 정의 - 공유 패키지:
packages/types(타입 정의),@repo/ui(React 컴포넌트)
4. 빌드 및 캐싱 테스트
- 초기 빌드:
```bash
npm run build
# 출력: Tasks: 4 successful, 4 total | Time: 15.2s
```
- 캐싱 적용 후 재빌드:
```bash
npm run build
# 출력: Tasks: 4 successful, 4 total | Time: 185ms
```
결론
- Turborepo의 Remote Cache를 활용해 빌드 시간을 15초 → 185ms로 극단적으로 단축
- Windows 사용자: WSL 2.0으로 Unix 기반 환경 구축 권장
- 실무 팁:
turbo.json에서 태스크 의존성 명시,tsconfig.base.json으로 타입 공유,@repo/ui패키지로 UI 재사용성 극대화