Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.
npx skills add https://github.com/puk0806/gugbab-claude --skill monorepo-turborepo명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.
로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.
SKILL.md 표시 중
DDD(Domain-Driven Design) 아키텍처 핵심 패턴 - 유비쿼터스 언어, 서브도메인, 바운디드 컨텍스트, Aggregate, Entity/VO, 도메인 서비스/이벤트, 레이어드 아키텍처
대규모 React/Next.js 프로젝트를 layer-first(types/·utils/·hooks/·api/·components/ 밑에 도메인이 반복되는 구조)에서 domain-first(feature/도메인 우선) 구조로 전환하는 설계 기준과 절차. Feature-Sliced Design 2.1 정본(layers 6종·slices·segments·import 규칙·@x 크로스임포트·public API), FSD를 쓰지 않는 경량 대안(features + shared 2~3계층 + ESLint import/no-restricted-paths), Next.js App Router 공존 전략(route group `()`·private folder `_`·colocation), Turborepo/Nx 모노레포에서 폴더↔패키지 승격 기준, colocation과 배럴 파일 성능 트레이드오프, 도메인 경계 역추출(import 그래프·change coupling·용어 클러스터), 전환 실패 패턴(shared 비대화·entities 남용·순환 의존·도메인=라우트 착각·조기 추상화). 도메인 개념 자체(바운디드 컨텍스트·유비쿼터스 언어)는 `architecture/ddd` 스킬을 참조한다.
소스 파일 수천 개 규모 프론트엔드 코드베이스를 멈추지 않고 점진 재구조화하는 실행 전략 - Strangler Fig / Branch by Abstraction / Parallel Change, ts-morph·jscodeshift codemod, PR 분할·검증 게이트·되돌리기, 테스트 없는 코드의 안전망, 작업 순서 설계와 위반 수 기반 진행 추적
| name | monorepo-turborepo |
| description | 모노레포 vs 멀티레포 선택 기준, Turborepo 구조 및 파이프라인 설정 |
소스: https://turborepo.dev/docs | https://github.com/vercel/turborepo 검증일: 2026-08-11 기준 버전: Turborepo 2.10.9 (2026-08-07) / pnpm 11.21.0
참고: 구 도메인
turbo.build는 현재turborepo.dev로 301 리다이렉트된다.
| 기준 | 모노레포 | 멀티레포 |
|---|---|---|
| 패키지 간 의존성 | 많음 (공유 컴포넌트/유틸) | 적음 (독립 서비스) |
| 팀 규모 | 한 팀이 여러 패키지 관리 | 팀별 독립 저장소 |
| 배포 단위 | 함께 배포되는 경우 많음 | 완전 독립 배포 |
| 변경 영향도 | 한 곳에서 파악 가능 | 저장소마다 확인 필요 |
| 도구 통일 | 중앙 관리 | 팀마다 다를 수 있음 |
모노레포 적합:
멀티레포 적합:
monorepo/
├── apps/ # 실행 애플리케이션
│ ├── web/ # Next.js 앱
│ ├── mobile/ # React Native
│ └── storybook/ # 컴포넌트 문서
├── packages/ # 공유 라이브러리
│ ├── ui/ # UI 컴포넌트 (tsup 빌드)
│ ├── utils/ # 유틸리티 함수
│ ├── types/ # 공유 TypeScript 타입
│ ├── tsconfig/ # 공유 tsconfig
│ └── eslint-config/ # 공유 ESLint 설정
├── turbo.json
├── pnpm-workspace.yaml # 또는 package.json workspaces
└── package.json # private: true
{
"name": "myorg",
"private": true,
"packageManager": "pnpm@11.21.0",
"scripts": {
"build": "turbo run build",
"dev": "turbo run dev --parallel",
"lint": "turbo run lint",
"test": "turbo run test",
"typecheck": "turbo run typecheck"
}
}
packages:
- "apps/*"
- "packages/*"
{
"$schema": "https://turbo.build/schema.json",
"globalEnv": ["NODE_ENV", "TURBO_TELEMETRY_DISABLED"],
"tasks": {
"build": {
"dependsOn": ["^build"], // 의존 패키지 build 먼저
"outputs": [".next/**", "dist/**", "!.next/cache/**"],
"cache": true
},
"dev": {
"cache": false,
"persistent": true // 장기 실행 프로세스
},
"lint"
^ (caret) 의미: 의존하는 패키지의 해당 task를 먼저 실행
apps/web (ui 패키지 의존)
→ turbo run build 실행 시:
1. packages/ui build 먼저 실행
2. apps/web build 실행
// apps/web/package.json
{
"dependencies": {
"@myorg/ui": "workspace:*", // 항상 로컬 버전 사용
"@myorg/utils": "workspace:*",
"@myorg/types": "workspace:*"
}
}
workspace:* 장점:
// packages/ui/package.json
{
"name": "@myorg/ui",
"exports": {
".": {
"types": "./dist/index.d.ts",
"import": "./dist/index.mjs",
"require": "./dist/index.js"
}
},
"scripts": {
"build": "tsup src/index.ts --format esm,cjs --dts",
"dev": "tsup src/index.ts --format esm,cjs --dts --watch"
}
}
// packages/tsconfig/package.json
{
"name": "@myorg/tsconfig",
"files": ["base.json", "nextjs.json", "react.json"]
}
// packages/tsconfig/base.json
{
"compilerOptions": {
"strict": true,
"target": "ES2020",
"moduleResolution": "bundler"
}
}
// packages/types/package.json
{
"name": "@myorg/types",
"main": "./src/index.ts", // 타입만이면 빌드 불필요
"types": "./src/index.ts"
}
turbo run build # 캐시 히트 시 즉시 완료
turbo run build --force # 강제 재빌드
turbo run build --dry # 실행 계획만 확인 (실제 실행 안 함)
turbo login # Vercel 계정으로 로그인
turbo link # 현재 레포를 원격 캐시에 연결
장점: 팀원 간 / CI 간 캐시 공유 → 빌드 시간 40-85% 단축
{
"tasks": {
"build": {
"env": ["NEXT_PUBLIC_API_URL", "API_*"] // 변경 시 캐시 무효화
}
}
}
# 설치
pnpm add -D @changesets/cli
pnpm changeset init
# 변경사항 기록
pnpm changeset # 인터랙티브: 패키지 선택, 버전 타입, 설명
# 버전 적용
pnpm changeset version # package.json 버전 업데이트 + CHANGELOG 생성
# 발행
pnpm changeset publish # npm 발행
워크플로우:
개발 → changeset 작성 → PR 머지 → Release PR 자동 생성 → 승인 → 발행
# 특정 패키지만 실행
turbo run build --filter=@myorg/web
# 특정 패키지와 의존 패키지 포함
turbo run build --filter=@myorg/web...
# 변경된 패키지만 실행 (git 기반) — main 브랜치 대비
turbo run build --filter=[main...HEAD]
# 또는 간략하게
turbo run build --affected
# 실행 그래프 시각화
turbo run build --graph
# 병렬 실행 (dev 서버 여러 개)
turbo run dev --parallel
apps/web/
├── .env.local # 로컬 전용 (gitignore)
├── .env.development # 개발 환경
├── .env.production # 프로덕션 환경
└── .env.example # 필요 변수 목록 (git 포함)
❌ 루트에 .env 두지 않기: 각 앱이 독립적인 환경변수 관리 필요 ✅ .env.example는 git에 포함: 팀원이 필요한 변수 파악 가능
# ❌ 루트에서 패키지 직접 설치
npm install react # 루트 node_modules에 설치됨
# ✅ 특정 워크스페이스에 설치
pnpm add react --filter @myorg/web
pnpm add -D typescript --filter @myorg/ui
// ❌ turbo.json에 환경변수 선언 누락
// → 환경변수 변경해도 캐시 무효화 안 됨
// ✅ 사용하는 환경변수 명시
{
"tasks": {
"build": {
"env": ["NEXT_PUBLIC_API_URL"]
}
}
}
주의: pnpm 11(2026-04-28 출시)은 Node.js 22+ 필수. pnpm 10에서 11로 업그레이드 시 CI/개발 환경도 Node.js 22 이상으로 함께 올려야 한다.
# pnpm 11 주요 변경사항
# - Node.js 22+ 필수 (18/19/20/21 지원 종료)
# - 순수 ESM으로 전환
# - SQLite 기반 스토어 인덱스 (JSON-per-package → 단일 SQLite DB)
# - 자체 publish 구현 (npm CLI 폴백 제거)
# - lockfile 구조 변경 (configDependencies가 별도 YAML 문서로 분리)
과거 Turborepo + pnpm 11 lockfile 이슈 — 모두 Turborepo 2.9.7(2026-05-01)에서 해소:
| 이슈 | 원인 | 해소 버전 |
|---|---|---|
| multi-document YAML lockfile 파싱 실패 | pnpm 11의 configDependencies 사용 시 멀티 YAML 문서 생성 | 2.9.7 (PR #12616) |
patchedDependencies flat-string 형식 경고 | pnpm 11이 {path, hash} 대신 flat 해시 문자열로 변경 | 2.9.7 (PR #12676) |
대응 방법:
configDependencies·patchedDependencies를 그대로 사용할 수 있다. 신규 세팅은 최신 안정 버전(2.10.9)을 권장한다.| 기능 | 내용 |
|---|---|
| 로컬 캐시 자동 정리 | turbo.json 최상위 cacheMaxAge·cacheMaxSize로 오래되거나 용량 초과한 캐시 항목 자동 제거 |
--affected + --filter 조합 | 이전에는 배타적이었던 두 옵션을 함께 사용 가능 |
| Graceful shutdown | 태스크 중단 시 정상 종료 절차·exit code 보존 |
| Incremental task caching | 태스크 단위 증분 캐싱 |
| Boundaries 순환 의존성 탐지 | turbo boundaries가 패키지 간 순환 의존성을 검출 |
// turbo.json — 로컬 캐시 자동 정리 (기본값은 둘 다 "0" = 비활성)
{
"$schema": "https://turbo.build/schema.json",
"cacheMaxAge": "7d", // 30s | 5m | 24h | 7d | 2w
"cacheMaxSize": "10GB", // 500MB | 10GB | 1.5GB (대소문자 무관)
"tasks": { }
}
# 2.10부터 --affected와 --filter 동시 사용 가능
turbo run build --affected --filter=@myorg/web