![\"모노레포](\"/assets/etc.png\" "\\"모노레포")
모노레포(Monorepo)는 여러 프로젝트를 하나의 저장소에서 관리하는 방식이다. 코드 공유, 일관성 유지, 대규모 프로젝트 관리에 효과적이다. 이 글은 모노레포의 개념부터 Turborepo, Nx 등 주요 도구를 활용한 실전 구축까지 완벽하게 정리한다.
\n모노레포(Monorepo)는 “Monolithic Repository”의 줄임말로, 여러 프로젝트나 패키지를 하나의 Git 저장소에서 관리하는 방식이다.
\n전통적인 멀티레포 (Multi-repo):
\ncompany/\n├── frontend/ (별도 저장소)\n├── backend/ (별도 저장소)\n├── shared-library/ (별도 저장소)\n└── mobile/ (별도 저장소)모노레포 (Monorepo):
\ncompany/\n├── apps/\n│ ├── frontend/\n│ ├── backend/\n│ └── mobile/\n├── packages/\n│ ├── shared-ui/\n│ ├── shared-utils/\n│ └── shared-types/\n└── package.json장점:
\n단점:
\n적합한 경우:
\n부적합한 경우:
\n| 도구 | \n특징 | \n장점 | \n단점 | \n
|---|---|---|---|
| Turborepo | \nVercel 개발, 빌드 시스템 | \n빠른 빌드, 캐싱 우수 | \n상대적으로 새로움 | \n
| Nx | \nNrwl 개발, 엔터프라이즈급 | \n강력한 기능, 플러그인 | \n학습 곡선 높음 | \n
| Lerna | \n전통적인 도구 | \n간단함, 널리 사용 | \n성능 제한적 | \n
| pnpm workspaces | \n패키지 매니저 통합 | \n간단한 설정 | \n고급 기능 제한적 | \n
| Yarn workspaces | \nYarn 통합 | \n안정적 | \nYarn에 종속 | \n
Turborepo 추천:
\nNx 추천:
\nLerna 추천:
\n기본 구조:
\nmy-monorepo/\n├── apps/\n│ ├── web/ # Next.js 앱\n│ ├── admin/ # React 앱\n│ └── api/ # Node.js API\n├── packages/\n│ ├── ui/ # 공유 UI 컴포넌트\n│ ├── utils/ # 유틸리티 함수\n│ └── config/ # 공유 설정\n├── package.json\n├── turbo.json # Turborepo 설정\n└── pnpm-workspace.yaml # pnpm workspaces 설정루트 package.json:
\n{\n \"name\": \"my-monorepo\",\n \"private\": true,\n \"workspaces\": [\n \"apps/*\",\n \"packages/*\"\n ],\n \"scripts\": {\n \"dev\": \"turbo run dev\",\n \"build\": \"turbo run build\",\n \"test\": \"turbo run test\",\n \"lint\": \"turbo run lint\"\n },\n \"devDependencies\": {\n \"turbo\": \"^1.10.0\"\n }\n}turbo.json:
\n{\n \"$schema\": \"https://turbo.build/schema.json\",\n \"pipeline\": {\n \"build\": {\n \"dependsOn\": [\"^build\"],\n \"outputs\": [\".next/**\", \"dist/**\"]\n },\n \"dev\": {\n \"cache\": false,\n \"persistent\": true\n },\n \"test\": {\n \"dependsOn\": [\"build\"],\n \"outputs\": []\n },\n \"lint\": {\n \"outputs\": []\n }\n }\n}apps/web/package.json:
\n{\n \"name\": \"web\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"next dev\",\n \"build\": \"next build\",\n \"start\": \"next start\",\n \"lint\": \"next lint\"\n },\n \"dependencies\": {\n \"next\": \"^14.0.0\",\n \"react\": \"^18.0.0\",\n \"react-dom\": \"^18.0.0\",\n \"@my-monorepo/ui\": \"workspace:*\",\n \"@my-monorepo/utils\": \"workspace:*\"\n }\n}apps/web/next.config.js:
\nconst { createVanillaExtractPlugin } = require('@vanilla-extract/next-plugin');\n\nconst withVanillaExtract = createVanillaExtractPlugin();\n\n/** @type {import('next').NextConfig} */\nconst nextConfig = {\n transpilePackages: ['@my-monorepo/ui'],\n};\n\nmodule.exports = withVanillaExtract(nextConfig);packages/ui/package.json:
\n{\n \"name\": \"@my-monorepo/ui\",\n \"version\": \"1.0.0\",\n \"main\": \"./index.tsx\",\n \"types\": \"./index.tsx\",\n \"scripts\": {\n \"build\": \"tsc\",\n \"dev\": \"tsc --watch\"\n },\n \"dependencies\": {\n \"react\": \"^18.0.0\"\n },\n \"devDependencies\": {\n \"@types/react\": \"^18.0.0\",\n \"typescript\": \"^5.0.0\"\n }\n}packages/ui/Button.tsx:
\nimport React from 'react';\n\nexport interface ButtonProps {\n children: React.ReactNode;\n onClick?: () => void;\n}\n\nexport const Button: React.FC<ButtonProps> = ({ children, onClick }) => {\n return (\n <button\n onClick={onClick}\n className=\"px-4 py-2 bg-blue-500 text-white rounded\"\n >\n {children}\n </button>\n );\n};packages/ui/index.tsx:
\nexport { Button } from './Button';\nexport type { ButtonProps } from './Button';apps/web/app/page.tsx:
\nimport { Button } from '@my-monorepo/ui';\nimport { formatDate } from '@my-monorepo/utils';\n\nexport default function Home() {\n return (\n <div>\n <h1>Welcome</h1>\n <p>Today is {formatDate(new Date())}</p>\n <Button onClick={() => alert('Clicked!')}>\n Click Me\n </Button>\n </div>\n );\n}개발 모드:
\n# 모든 앱 실행\npnpm dev\n\n# 특정 앱만 실행\npnpm --filter web dev빌드:
\n# 모든 패키지 빌드\npnpm build\n\n# 특정 패키지만 빌드\npnpm --filter web build캐싱:
\nNx 설치:
\nnpx create-nx-workspace@latest my-monorepo기본 구조:
\nmy-monorepo/\n├── apps/\n│ ├── web/\n│ └── api/\n├── libs/\n│ ├── ui/\n│ └── utils/\n├── nx.json\n├── workspace.json\n└── package.jsonNext.js 앱 생성:
\nnx generate @nx/next:application webReact 라이브러리 생성:
\nnx generate @nx/react:library ui --directory=libs/ui개발 서버:
\nnx serve web빌드:
\nnx build web테스트:
\nnx test web의존성 그래프:
\nnx graph영향 분석:
\n# 변경된 프로젝트 확인\nnx affected:graph\n\n# 영향받는 프로젝트만 빌드\nnx affected:build\n\n# 영향받는 프로젝트만 테스트\nnx affected:testpackage.json에서:
\n{\n \"dependencies\": {\n \"@my-monorepo/ui\": \"workspace:*\",\n \"@my-monorepo/utils\": \"workspace:*\"\n }\n}TypeScript 경로 매핑:
\n{\n \"compilerOptions\": {\n \"paths\": {\n \"@my-monorepo/ui\": [\"./packages/ui\"],\n \"@my-monorepo/utils\": [\"./packages/utils\"]\n }\n }\n}버전 동기화:
\nLerna를 사용한 버전 관리:
\n{\n \"version\": \"independent\",\n \"packages\": [\"packages/*\", \"apps/*\"]\n}.github/workflows/ci.yml:
\nname: CI\n\non:\n push:\n branches: [main]\n pull_request:\n branches: [main]\n\njobs:\n build:\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v3\n \n - name: Setup Node.js\n uses: actions/setup-node@v3\n with:\n node-version: '20'\n \n - name: Setup pnpm\n uses: pnpm/action-setup@v2\n with:\n version: 8\n \n - name: Install dependencies\n run: pnpm install\n \n - name: Build\n run: pnpm build\n \n - name: Test\n run: pnpm testTurborepo:
\n- name: Build changed packages\n run: |\n pnpm turbo build --filter='...[origin/main]'Nx:
\n- name: Build affected\n run: |\n nx affected:build --base=origin/mainpackages/eslint-config/package.json:
\n{\n \"name\": \"@my-monorepo/eslint-config\",\n \"version\": \"1.0.0\",\n \"main\": \"index.js\"\n}packages/eslint-config/index.js:
\nmodule.exports = {\n extends: [\n 'eslint:recommended',\n 'plugin:@typescript-eslint/recommended',\n 'plugin:react/recommended',\n ],\n rules: {\n // 공통 규칙\n },\n};앱에서 사용:
\n{\n \"extends\": \"@my-monorepo/eslint-config\"\n}packages/tsconfig/base.json:
\n{\n \"compilerOptions\": {\n \"target\": \"ES2020\",\n \"module\": \"ESNext\",\n \"lib\": [\"ES2020\", \"DOM\"],\n \"strict\": true,\n \"esModuleInterop\": true,\n \"skipLibCheck\": true,\n \"forceConsistentCasingInFileNames\": true\n }\n}앱에서 확장:
\n{\n \"extends\": \"@my-monorepo/tsconfig/base.json\",\n \"compilerOptions\": {\n \"outDir\": \"./dist\"\n }\n}명확한 구조:
\napps/: 실행 가능한 애플리케이션packages/: 재사용 가능한 패키지tools/: 개발 도구 및 스크립트의존성 최소화:
\n버전 통일:
\n병렬 빌드:
\n캐싱 활용:
\n공유 패키지 설계:
\n단계별 마이그레이션:
\n주의사항:
\nQ: 모노레포가 항상 좋은가요?
\nA: 상황에 따라 다릅니다. 코드 공유가 많고 관련된 프로젝트를 관리할 때 유리하지만, 완전히 독립적인 프로젝트는 멀티레포가 나을 수 있습니다.
Q: Turborepo와 Nx 중 어떤 것을 선택해야 하나요?
\nA: 간단한 프로젝트와 빠른 빌드가 중요하면 Turborepo, 대규모 엔터프라이즈 프로젝트와 강력한 도구가 필요하면 Nx를 선택하세요.
Q: 모노레포에서 Git 히스토리는 어떻게 관리하나요?
\nA: 기존 프로젝트를 통합할 때는 git subtree나 git filter-branch를 사용하여 히스토리를 보존할 수 있습니다.
Q: 패키지 버전을 독립적으로 관리할 수 있나요?
\nA: 네, Lerna의 independent 모드나 각 패키지의 독립적인 버전 관리가 가능합니다.
Q: CI/CD에서 모든 패키지를 빌드하나요?
\nA: 아니요, 변경된 패키지만 빌드하는 것이 효율적입니다. Turborepo와 Nx는 이를 자동으로 처리합니다.
Q: 모노레포 저장소 크기가 커지면 어떻게 하나요?
\nA: Git LFS 사용, 부분 클론, 또는 저장소 분할을 고려할 수 있습니다. 하지만 대부분의 경우 모던 Git은 큰 저장소도 잘 처리합니다.
모노레포는 대규모 프로젝트와 팀 협업에서 강력한 도구다. 코드 공유, 일관성 유지, 효율적인 빌드 등 많은 장점을 제공한다.
\n하지만 모든 프로젝트에 적합한 것은 아니다. 프로젝트의 규모, 팀 구조, 코드 공유 정도를 고려하여 선택해야 한다. 적절히 활용하면 개발 생산성을 크게 향상시킬 수 있다.
\nTurborepo와 Nx 같은 도구들이 모노레포의 복잡성을 크게 줄여주고 있다. 이제는 더 많은 프로젝트가 모노레포를 채택하고 있으며, 이는 앞으로의 트렌드가 될 것이다.
\n모노레포를 마스터한 후, 실제 프로젝트에 적용하고 싶다면 블루버튼 같은 프로젝트 매칭 플랫폼을 활용할 수 있다. 모노레포를 활용한 대규모 프로젝트 관리, 마이크로서비스 아키텍처, 코드 공유가 중요한 프로젝트 등에서 실전 경험을 쌓을 수 있다. 특히 프론트엔드와 백엔드를 함께 관리하거나, 여러 앱을 하나의 저장소에서 관리하는 프로젝트에서 모노레포의 강점을 발휘할 수 있다.
","tableOfContents":"