---
id: wiki-2026-0508-large-frontend-projects
title: Large Frontend Projects
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [Frontend at Scale, Monorepo Frontend, Micro-frontends]
duplicate_of: none
source_trust_level: A
confidence_score: 0.9
verification_status: applied
tags: [frontend, monorepo, micro-frontends, design-system, turborepo, nx]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: pending
tech_stack: { language: ts, framework: turborepo/nx/module-federation }
---

# Large Frontend Projects

## 매 한 줄
> **"매 코드보다 경계 (boundary) 가 먼저"**. Monorepo + design system + 빌드 캐시 + 명확한 ownership, micro-frontend 는 마지막 수단.

## 매 핵심
### 매 4 축
- **Code organization**: monorepo (Turborepo/Nx/pnpm)
- **Runtime composition**: SPA / module federation / iframe / SSR composition
- **Shared layer**: design system, type, utility, eslint config
- **Build / CI**: incremental, remote cache, affected-only test

### 매 monorepo vs polyrepo
| | Monorepo | Polyrepo |
|---|---|---|
| 공유 코드 | trivial (workspace) | publish/version 지옥 |
| 일관성 | 강제 (lint/CI 한곳) | 어려움 |
| 빌드 시간 | tooling 필요 | 단순 |
| 권한 분리 | CODEOWNERS | repo level |
| 권장 | 공유 많음 | 완전 독립 product |

### 매 micro-frontend 트리거
- 팀 자율성 > 일관성
- 다른 release cadence
- 다른 tech stack 강제 (드물어야 함)
- 그 외엔 monorepo 가 거의 항상 정답

### 매 응용
1. Design system 패키지화
2. Module federation 으로 런타임 합성
3. Turborepo 로 빌드 80% 단축
4. Affected-only CI
5. Ownership 자동화 (CODEOWNERS + bot)

## 💻 패턴

### Pattern 1: pnpm workspace + Turborepo
```yaml
# pnpm-workspace.yaml
packages:
  - "apps/*"
  - "packages/*"
```
```jsonc
// turbo.json
{
  "tasks": {
    "build": { "dependsOn": ["^build"], "outputs": ["dist/**", ".next/**"] },
    "test": { "dependsOn": ["^build"], "outputs": [] },
    "lint": {}
  }
}
```

### Pattern 2: Shared package
```jsonc
// packages/ui/package.json
{
  "name": "@acme/ui",
  "exports": { ".": "./src/index.ts" },
  "peerDependencies": { "react": "^18 || ^19" }
}
```
```ts
// apps/web uses workspace dep
// package.json: "@acme/ui": "workspace:*"
import { Button } from "@acme/ui";
```

### Pattern 3: Module Federation (Webpack/Rspack)
```js
new ModuleFederationPlugin({
  name: "shell",
  remotes: { checkout: "checkout@https://cdn/checkout/remoteEntry.js" },
  shared: { react: { singleton: true }, "react-dom": { singleton: true } },
});
// 런타임에 다른 팀 빌드 import
```

### Pattern 4: Affected-only CI (Nx)
```yaml
- run: npx nx affected -t build test lint --base=origin/main
# 변경된 프로젝트와 의존하는 프로젝트만 실행
```

### Pattern 5: Remote cache
```bash
# Turborepo Vercel remote cache
turbo login && turbo link
# 또는 self-hosted (Cloudflare R2)
TURBO_API=... TURBO_TOKEN=... turbo build
```

### Pattern 6: Design system token boundary
```ts
// packages/tokens
export const tokens = {
  color: { brand: { 500: "#5B21B6" } },
  space: { 1: "4px", 2: "8px" },
} as const;

// packages/ui consumes tokens — never hard-coded values
```

### Pattern 7: CODEOWNERS automation
```
# .github/CODEOWNERS
/apps/checkout/   @acme/payments-team
/packages/ui/     @acme/design-system
/packages/api-client/ @acme/platform
```

### Pattern 8: ESLint boundary rule (Nx tags)
```jsonc
// .eslintrc — apps 가 다른 app 을 직접 import 못하도록
"@nx/enforce-module-boundaries": ["error", {
  "depConstraints": [
    { "sourceTag": "scope:web", "onlyDependOnLibsWithTags": ["scope:shared", "scope:web"] },
    { "sourceTag": "type:app", "onlyDependOnLibsWithTags": ["type:lib"] }
  ]
}]
```

### Pattern 9: Per-package versioning (Changesets)
```bash
pnpm changeset       # 변경 기록
pnpm changeset version  # version bump
pnpm publish -r       # publish 변경된 package 만
```

## 매 결정 기준

| 상황 | Approach |
|---|---|
| 공유 코드 많음, 같은 release | Monorepo + Turborepo |
| 거대 + 그래프 분석 필요 | Nx (affected, codegen, plugin) |
| 진짜 독립 팀 + 별 cadence | Module Federation |
| Iframe 격리 필요 (legacy) | Iframe 합성 |
| Design 일관성 | Design system + tokens |

**기본값**: pnpm + Turborepo + design system + Changesets, MFE 는 마지막 수단.

## 🔗 Graph
- 부모: [[Software_Architecture]], [[Frontend Architecture]]
- 변형: [[Turborepo]], [[Nx]], [[Module_Federation]]
- 응용: [[Design_System]], [[CI_CD_Pipeline|CI_CD]]
- Adjacent: [[Build_Performance]], [[Monorepo]]

## 🤖 LLM 활용
**언제**: dependency graph 분석, 큰 PR review, codemod 생성 (Babel/jscodeshift).
**언제 X**: deterministic refactor (codemod 직접 작성이 더 안전), 보안 boundary 검증.

## ❌ 안티패턴
- 처음부터 micro-frontend → 분산의 모든 비용, 이점 0
- Cache 없이 monorepo → CI 30분+ 폭발
- Design system 없이 1000개 button → 일관성 0
- 모든 변경 시 전체 빌드 → affected only 미사용
- 패키지 간 circular dep → boundary 망함

## 🧪 검증 / 중복
- Verified (Turborepo docs, Nx docs, Module Federation docs, Changesets). 신뢰도 A.

## 🕓 Changelog
| 날짜 | 변경 |
|---|---|
| 2026-05-08 | Phase 1 |
| 2026-05-10 | Manual cleanup — 4 축, monorepo/MFE/boundary patterns |