모노레포(Monorepo) 완전정복 - Turborepo와 Nx로 대규모 프로젝트 관리하기

company/
├── frontend/          (별도 저장소)
├── backend/          (별도 저장소)
├── shared-library/   (별도 저장소)
└── mobile/           (별도 저장소)

company/
├── apps/
│   ├── frontend/
│   ├── backend/
│   └── mobile/
├── packages/
│   ├── shared-ui/
│   ├── shared-utils/
│   └── shared-types/
└── package.json

my-monorepo/
├── apps/
│   ├── web/              # Next.js 앱
│   ├── admin/            # React 앱
│   └── api/              # Node.js API
├── packages/
│   ├── ui/               # 공유 UI 컴포넌트
│   ├── utils/            # 유틸리티 함수
│   └── config/           # 공유 설정
├── package.json
├── turbo.json            # Turborepo 설정
└── pnpm-workspace.yaml   # pnpm workspaces 설정

{
  "name": "my-monorepo",
  "private": true,
  "workspaces": [
    "apps/*",
    "packages/*"
  ],
  "scripts": {
    "dev": "turbo run dev",
    "build": "turbo run build",
    "test": "turbo run test",
    "lint": "turbo run lint"
  },
  "devDependencies": {
    "turbo": "^1.10.0"
  }
}

{
  "$schema": "https://turbo.build/schema.json",
  "pipeline": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": [".next/**", "dist/**"]
    },
    "dev": {
      "cache": false,
      "persistent": true
    },
    "test": {
      "dependsOn": ["build"],
      "outputs": []
    },
    "lint": {
      "outputs": []
    }
  }
}

{
  "name": "web",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "^14.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "@my-monorepo/ui": "workspace:*",
    "@my-monorepo/utils": "workspace:*"
  }
}

const { createVanillaExtractPlugin } = require('@vanilla-extract/next-plugin');

const withVanillaExtract = createVanillaExtractPlugin();

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['@my-monorepo/ui'],
};

module.exports = withVanillaExtract(nextConfig);

{
  "name": "@my-monorepo/ui",
  "version": "1.0.0",
  "main": "./index.tsx",
  "types": "./index.tsx",
  "scripts": {
    "build": "tsc",
    "dev": "tsc --watch"
  },
  "dependencies": {
    "react": "^18.0.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.0",
    "typescript": "^5.0.0"
  }
}

import React from 'react';

export interface ButtonProps {
  children: React.ReactNode;
  onClick?: () => void;
}

export const Button: React.FC<ButtonProps> = ({ children, onClick }) => {
  return (
    <button
      onClick={onClick}
      className="px-4 py-2 bg-blue-500 text-white rounded"
    >
      {children}
    </button>
  );
};

export { Button } from './Button';
export type { ButtonProps } from './Button';

import { Button } from '@my-monorepo/ui';
import { formatDate } from '@my-monorepo/utils';

export default function Home() {
  return (
    <div>
      <h1>Welcome</h1>
      <p>Today is {formatDate(new Date())}</p>
      <Button onClick={() => alert('Clicked!')}>
        Click Me
      </Button>
    </div>
  );
}

# 모든 앱 실행
pnpm dev

# 특정 앱만 실행
pnpm --filter web dev

# 모든 패키지 빌드
pnpm build

# 특정 패키지만 빌드
pnpm --filter web build

npx create-nx-workspace@latest my-monorepo

my-monorepo/
├── apps/
│   ├── web/
│   └── api/
├── libs/
│   ├── ui/
│   └── utils/
├── nx.json
├── workspace.json
└── package.json

nx generate @nx/next:application web

nx generate @nx/react:library ui --directory=libs/ui

nx serve web

nx build web

nx test web

nx graph

# 변경된 프로젝트 확인
nx affected:graph

# 영향받는 프로젝트만 빌드
nx affected:build

# 영향받는 프로젝트만 테스트
nx affected:test

{
  "dependencies": {
    "@my-monorepo/ui": "workspace:*",
    "@my-monorepo/utils": "workspace:*"
  }
}

{
  "compilerOptions": {
    "paths": {
      "@my-monorepo/ui": ["./packages/ui"],
      "@my-monorepo/utils": ["./packages/utils"]
    }
  }
}

{
  "version": "independent",
  "packages": ["packages/*", "apps/*"]
}

name: CI

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '20'
      
      - name: Setup pnpm
        uses: pnpm/action-setup@v2
        with:
          version: 8
      
      - name: Install dependencies
        run: pnpm install
      
      - name: Build
        run: pnpm build
      
      - name: Test
        run: pnpm test

- name: Build changed packages
  run: |
    pnpm turbo build --filter='...[origin/main]'

- name: Build affected
  run: |
    nx affected:build --base=origin/main

{
  "name": "@my-monorepo/eslint-config",
  "version": "1.0.0",
  "main": "index.js"
}

module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:react/recommended',
  ],
  rules: {
    // 공통 규칙
  },
};

{
  "extends": "@my-monorepo/eslint-config"
}

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "lib": ["ES2020", "DOM"],
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

{
  "extends": "@my-monorepo/tsconfig/base.json",
  "compilerOptions": {
    "outDir": "./dist"
  }
}