모노레포 — Turborepo로 Svelte 프로젝트 관리하기

여러 패키지가 서로 의존하고, 공통 설정을 공유해야 할 때 — 모노레포가 빛납니다.

개념 정의

모노레포(Monorepo) 는 여러 프로젝트/패키지를 하나의 저장소에서 관리하는 방식입니다. 코드 공유, 일관된 설정, 원자적 커밋이 가능합니다.

구조

PLAINTEXT

my-monorepo/
├── apps/
│   ├── web/              # SvelteKit 메인 앱
│   │   ├── src/
│   │   ├── svelte.config.js
│   │   └── package.json
│   └── admin/            # SvelteKit 관리자 앱
│       ├── src/
│       └── package.json
├── packages/
│   ├── ui/               # 공유 UI 컴포넌트
│   │   ├── src/
│   │   └── package.json
│   ├── utils/            # 공유 유틸리티
│   │   └── package.json
│   └── config/           # 공유 설정 (ESLint, Prettier 등)
│       └── package.json
├── turbo.json
├── package.json
└── pnpm-workspace.yaml

pnpm 워크스페이스 설정

YAML

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

JSON

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

공유 UI 패키지

JSON

// packages/ui/package.json
{
  "name": "@my-org/ui",
  "version": "0.0.1",
  "svelte": "./src/index.js",
  "exports": {
    ".": { "svelte": "./src/index.js" }
  },
  "peerDependencies": {
    "svelte": "^5.0.0"
  }
}

JAVASCRIPT

// packages/ui/src/index.js
export { default as Button } from './Button.svelte';
export { default as Card } from './Card.svelte';
export { default as Modal } from './Modal.svelte';

SVELTE

<!-- packages/ui/src/Button.svelte -->
<script>
  let { variant = 'primary', children, ...restProps } = $props();
</script>

<button class="btn btn-{variant}" {...restProps}>
  {@render children()}
</button>

앱에서 공유 패키지 사용

JSON

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

SVELTE

<!-- apps/web/src/routes/+page.svelte -->
<script>
  import { Button, Card } from '@my-org/ui';
  import { formatDate } from '@my-org/utils';
</script>

<Card>
  <h1>공유 컴포넌트 사용</h1>
  <Button variant="primary">클릭</Button>
  <p>{formatDate(new Date())}</p>
</Card>

실행 명령어

BASH

# 모든 앱 개발 서버 실행
pnpm turbo dev

# 모든 패키지 빌드 (의존성 순서 자동)
pnpm turbo build

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

# 린트 검사
pnpm turbo lint

면접 포인트

"모노레포의 장단점은?": 장점은 코드 공유, 원자적 변경, 일관된 도구 설정입니다. 단점은 저장소 크기 증가, CI/CD 복잡성, 의존성 충돌 가능성입니다.
"Turborepo의 역할은?": 태스크 실행을 최적화합니다. 캐시를 활용하여 변경되지 않은 패키지의 빌드를 건너뛰고, 의존성 순서에 맞게 병렬 실행합니다.

정리

모노레포는 여러 앱이 코드를 공유하는 프로젝트에서 생산성을 크게 높입니다. Turborepo + pnpm 워크스페이스 조합은 Svelte/SvelteKit 프로젝트에서 가장 실용적인 모노레포 설정입니다.