모노레포 | sim.junghun

모노레포는 여러 프로젝트(패키지)를 하나의 저장소에서 관리하는 전략입니다. 코드 공유, 의존성 관리, 일관된 설정이 장점입니다.

면접에서 "모노레포를 사용해본 적이 있나요?"라고 물으면, 장단점과 구체적인 구성 방법을 설명할 수 있어야 합니다.

프로젝트 구조

PLAINTEXT

my-monorepo/
├── packages/
│   ├── ui/                    # 공유 UI 컴포넌트 라이브러리
│   │   ├── src/
│   │   │   ├── Button.vue
│   │   │   ├── Input.vue
│   │   │   └── index.ts
│   │   ├── package.json       # @my-org/ui
│   │   └── tsconfig.json
│   ├── utils/                 # 공유 유틸리티
│   │   ├── src/
│   │   └── package.json       # @my-org/utils
│   └── types/                 # 공유 타입 정의
│       ├── src/
│       └── package.json       # @my-org/types
├── apps/
│   ├── web/                   # 메인 웹 앱
│   │   ├── src/
│   │   └── package.json
│   ├── admin/                 # 관리자 앱
│   │   ├── src/
│   │   └── package.json
│   └── docs/                  # 문서 사이트
│       └── package.json
├── pnpm-workspace.yaml
├── turbo.json
└── package.json

pnpm 워크스페이스 설정

YAML

# pnpm-workspace.yaml
packages:
  - 'packages/*'
  - 'apps/*'

JSON

// packages/ui/package.json
{
  "name": "@my-org/ui",
  "version": "1.0.0",
  "main": "./src/index.ts",
  "dependencies": {
    "vue": "^3.4.0"
  }
}

JSON

// apps/web/package.json
{
  "name": "@my-org/web",
  "dependencies": {
    "@my-org/ui": "workspace:*",
    "@my-org/utils": "workspace:*",
    "vue": "^3.4.0"
  }
}

BASH

# 워크스페이스 전체 의존성 설치
pnpm install

# 특정 패키지에서 명령 실행
pnpm --filter @my-org/web dev
pnpm --filter @my-org/ui build

# 모든 패키지에서 테스트
pnpm -r run test

Turborepo로 빌드 최적화

JSON

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

BASH

# Turborepo로 빌드 — 캐시 활용, 병렬 실행
npx turbo run build
npx turbo run test
npx turbo run lint

Turborepo의 핵심 기능:

** 원격 캐싱** — 같은 입력이면 빌드 결과를 재사용
** 의존성 그래프** — 패키지 간 빌드 순서 자동 결정
** 병렬 실행** — 독립적인 작업은 동시 실행

모노레포 vs 멀티레포

항목	모노레포	멀티레포
코드 공유	쉬움 (workspace link)	어려움 (npm publish 필요)
의존성	통합 관리	개별 관리
설정 일관성	유지 용이	유지 어려움
빌드 시간	길어질 수 있음 (캐시로 해결)	독립적
접근 권한	전체 코드 공개	세분화 가능

면접 팁

모노레포의 ** 의존성 호이스팅 **과 phantom dependencies 문제를 pnpm이 어떻게 해결하는지 설명할 수 있으면 좋습니다
Turborepo의 ** 원격 캐싱 **은 CI 파이프라인 시간을 대폭 줄여주는 핵심 기능입니다
"모노레포는 팀 규모와 프로젝트 관계에 따라 도입 여부를 결정한다"는 실용적 판단을 보여주세요

요약

Vue 모노레포는 pnpm 워크스페이스로 패키지를 관리하고, Turborepo로 빌드 캐싱과 병렬 실행을 최적화합니다. 공유 UI 라이브러리, 유틸리티, 타입을 패키지로 분리하여 여러 앱에서 재사용할 수 있습니다.