- eslint config ✅
- tsconfig 설정 ✅
- pnpm-workspace.yaml ✅
- package.json의 script 설정 ➡️
- turbo.json 셋업 ➡️
package.json
현재 구성되어있는 package.json파일들이다.
최초 생성된 파일에서, 앞선 설정을 하면서 수정된 부분이 조금씩 있다.
터미널에서 turbo run dev 를 입력하면 각 앱의 dev 스크립트를 자동으로 실행하여 각각의 앱의 dev 서버가 작동한다.
코드 원문 ▼
더보기
// 루트
{
"name": "date-project",
"private": true,
"scripts": {
"build": "turbo run build",
"dev": "turbo run dev",
"lint": "turbo run lint",
"format": "prettier --write \"**/*.{ts,tsx,md}\"",
"check-types": "turbo run check-types",
"version": "turbo run changeset version",
"changelog": "turbo run changeset changelog"
},
"devDependencies": {
"@changesets/cli": "^2.28.1",
"prettier": "^3.5.3",
"turbo": "^2.4.4",
"typescript": "5.8.2",
"@repo/eslint-config": "workspace:*",
"@repo/typescript-config": "workspace:*",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-prettier": "^4.0.0"
},
"packageManager": "pnpm@9.0.0",
"engines": {
"node": ">=18"
}
}
// 앱
{
"name": "admin",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"react": "^19.0.0",
"react-dom": "^19.0.0",
"next": "15.2.1"
},
"devDependencies": {
"typescript": "^5",
"@types/node": "^20",
"@types/react": "^19",
"@types/react-dom": "^19",
"eslint": "^9",
"eslint-config-next": "15.2.1",
"@eslint/eslintrc": "^3",
"@repo/typescript-config": "workspace:*"
}
}
turbo.json
: 여러 프로젝트나 패키지가 포함된 모노레포에서 작업 흐름, 캐시 설정, 종속성 관계 등을 관리하는 역할
{
"$schema": "https://turbo.build/schema.json",
"ui": "tui",
"tasks": {
"build": {
"dependsOn": ["^build"],
"inputs": ["$TURBO_DEFAULT$", ".env*"],
"outputs": [".next/**", "!.next/cache/**"]
},
"lint": {
"dependsOn": ["^lint"]
},
"check-types": {
"dependsOn": ["^check-types"]
},
"dev": {
"cache": false,
"persistent": true
}
}
}
"outputs": [".next/**", "!.next/cache/**"] : 빌드되는 패키지 기준 기점하여 경로 설정
지피티좀 돌려서 현재 코드를 설명해달라고 했다.
주요 속성 설명
- $schema
- https://turbo.build/schema.json을 지정함으로써 TurboRepo의 JSON 스키마를 참조하게 됩니다. 이로 인해 IDE에서 자동완성, 유효성 검사 등을 지원받을 수 있습니다.
- ui
- tui는 TurboRepo의 UI 스타일을 설정합니다. tui는 TurboRepo의 기본 UI 형식으로, 터미널에서 진행 상황을 보기 좋게 표시해주는 역할을 합니다. GUI(그래픽 사용자 인터페이스)나 다른 UI 옵션을 사용할 수도 있지만, tui는 터미널 기반의 인터페이스로 유용합니다.
- tasks
- 이 섹션은 작업을 정의하고 설정하는 부분으로, 각각의 작업에 대해 실행 순서와 종속성, 캐시 등을 지정할 수 있습니다. 각 작업은 여러 설정을 가질 수 있습니다.
ㄴ tasks 설정
- build
- dependsOn: ^build
- ^build는 모든 종속된 패키지의 build 작업이 먼저 실행되도록 설정합니다. 이는 TurboRepo가 병렬로 작업을 실행하면서 각 작업 간의 의존 관계를 자동으로 처리하는 방식입니다. ^build는 "상위 작업"을 의미합니다.
- inputs: ["$TURBO_DEFAULT$", ".env*"]
- 이 작업의 입력 파일을 지정합니다. "$TURBO_DEFAULT$"는 TurboRepo가 자동으로 감지할 수 있는 기본 입력 경로를 의미하며, .env*는 .env로 시작하는 모든 파일을 입력으로 처리합니다.
- outputs: [".next/**", "!.next/cache/**"]
- 이 작업의 출력 경로를 지정합니다. .next/**는 .next 디렉토리의 모든 파일을 출력으로 설정하고, !.next/cache/**는 .next/cache 디렉토리 내 파일을 제외하도록 설정합니다. 즉, 빌드 아티팩트는 .next/**에 저장되고, 캐시 파일은 제외됩니다.
- lint
- dependsOn: ^lint
- lint 작업도 상위 패키지의 lint 작업이 먼저 실행되도록 설정되어 있습니다. ^lint는 상위 모듈에서 lint 작업을 실행한 후 하위 모듈이 이를 따라 실행합니다.
- check-types
- dependsOn: ^check-types
- check-types 작업은 상위 check-types 작업을 먼저 실행합니다. 이를 통해 타입 체크를 하위 모듈들이 상위 모듈에 맞춰 일관되게 실행하도록 합니다.
- dev
- cache: false
- dev 작업에서는 캐시를 사용하지 않도록 설정했습니다. 이는 개발 모드에서 캐시가 불필요할 수 있거나, 항상 최신 상태로 작업을 실행하려는 경우에 사용됩니다.
- persistent: true
- persistent를 true로 설정하면 dev 작업이 지속적으로 실행됩니다. 보통 개발 환경에서 서버를 계속해서 실행하려는 경우에 사용됩니다.
아래와 같은 경우가 발생하면 필요에 따라 추가하면 될것같다.
작업 추가:
- 특정 작업이나 환경에 필요한 추가적인 작업을 정의하려면 tasks 섹션에 작업을 추가하면 됩니다. 예를 들어, 새로운 build:ts 작업이 필요하다면 이를 추가하는 방식입니다.
환경 변수:
- 만약 추가적인 환경 변수가 필요한 경우 globalPassThroughEnv나 globalEnv에 추가할 수 있습니다.
https://github.com/vercel/turborepo/blob/main/turbo.json
또는
https://turbo.build/repo/docs/reference/configuration
여기서 코드를 참조하면 된다.
'개발개발 > Date-project' 카테고리의 다른 글
[date] Chromatic 배포하기 (0) | 2025.03.06 |
---|---|
[date] Storybook 설정하기 (0) | 2025.03.06 |
[date] pnpm-workspace.yaml 설정하기 (0) | 2025.03.06 |
[date] tsconfig 설정하기 (0) | 2025.03.05 |
[date] turborepo config 설정하기 - eslint (0) | 2025.03.05 |