왜 TurboRepo인가? 그리고 TurbeRepo를 이용하여 MonoRepo 사용해보기

여러 프로젝트 및 레포를 운영하다보면 모노레포의 필요성을 느끼게 되는데, 여러가지 모노레포의 Tool들이 있는데, Next.js를 사용하다보니 Vercel에서 개발한 모노레포를 자연스럽게 선택하게 되었다. 이번에는 TurboRepo에 대해서 정리해보고, 사용방법에 대해서 간략하게 정리해보았다.

터보레포(TurboRepo)란 무엇일까요?

• 자바스크립트 및 타입스크립트 코드 베이스를 위한 고성능 빌드 시스템입니다.
• 모노레포 환경에서 개발 속도를 높여줍니다.

주요 특징

• 빠른 빌드:
  • 변경된 파일만 빌드하여 개발 시간을 단축합니다.
  • 빌드 캐싱을 사용하여 중복 작업을 줄입니다.
  • 병렬 빌드를 지원하여 작업 속도를 높입니다.
• 간편한 사용:
  • 명령어 한 줄로 모든 작업을 실행할 수 있습니다.
  • 코드베이스 전체를 쉽게 관리할 수 있습니다.
  • 다양한 개발 도구와 통합됩니다.
• 확장 가능성:
  • 대규모 코드베이스에도 적용할 수 있습니다.
  • 사용자 정의가 가능하여 다양한 요구에 맞출 수 있습니다.

터보레포가 제공하는 장점:

• 개발 속도 향상
• 코드 관리 및 유지 보수 개선
• 팀 협업 강화
• 배포 프로세스 간소화

터보레포가 적합한 경우:

• 여러 자바스크립트/타입스크립트 프로젝트를 관리하는 경우
• 코드 재사용성을 높이고 싶은 경우
• 개발 속도를 높이고 싶은 경우
• 모노레포 환경을 도입하고 싶은 경우

폴더 구조 예시

폴더 구조 예시 1

my-monorepo
├─ apps
│ ├─ app
│ │ └─ package.json
│ ├─ docs
│ │ └─ package.json
│ └─ web
│   └─ package.json
├─ packages
│ └─ shared
│   └─ package.json
└─ package.json

설명

• apps: 각 앱의 소스 코드를 포함하는 폴더입니다. 각 앱은 자체 package.json 파일을 가지고 있으며 독립적인 프로젝트처럼 작동합니다.
  • app: 예시 앱 폴더입니다.
  • docs: 문서 사이트 폴더입니다.
  • web: 웹 앱 폴더입니다.
• packages: 공유 라이브러리 및 코드를 포함하는 폴더입니다. 각 패키지는 자체 package.json 파일을 가지고 있으며 npm 패키지처럼 설치 및 사용될 수 있습니다.
  • shared: 공유 라이브러리 폴더입니다.
• package.json: 터보레포 설정을 포함하는 루트 폴더의 파일입니다.

폴더 구조 예시 2

my-monorepo
├─ apps
│ ├─ app
│ │ └─ package.json
│ ├─ docs
│ │ └─ package.json
│ └─ web
│   └─ package.json
├─ packages
│ ├─ eslint-config
│ │ 
│ └─ typescript-config
└─ package.json

설명

• eslint-config: eslint 설정 폴더입니다. 해당 폴더는 각 app 혹은 packages에 사용될 eslint를 설정할 수 있습니다. 예)next.js 폴더 혹은 library 폴더에 사용될 eslint를 설정합니다
• typescript-config: typescript 설정 폴더입니다. 해당 폴더는 각 app 혹은 packages에 사용될 eslint를 설정할 수 있습니다. 예)next.js 폴더 혹은 library 폴더에 사용될 eslint를 설정합니다

폴더 구조 선택

위 폴더 구조는 일반적인 터보레포 폴더 구조이지만, 프로젝트의 요구 사항에 따라 변경할 수 있습니다. 예를 들어, 앱이 서로 밀접하게 연결되어 있지 않으면 각 앱을 별도의 저장소로 관리할 수 있습니다.

Turborepo 설치 및 설정 방법

1. Turborepo 설치

Turborepo는 다음과 같은 세 가지 방법으로 설치할 수 있습니다.

1. npm:

npm install turbo --global

2. yarn:

yarn global add turbo

3. pnpm:

pnpm install turbo --global

참고:

• 전역 설치는 작업 공간에서 바로 Turborepo를 실행할 수 있도록 합니다.
• 특정 프로젝트에만 Turborepo를 사용하고 싶다면 --dev 옵션을 사용하여 로컬로 설치하십시오.

2. 새 모노레포 생성

1. create-turbo 사용:

npx create-turbo@latest

2. Turborepo GitHub 저장소 복제:

git clone https://github.com/vercel/turbo/tree/main/examples

참고:

• create-turbo 명령어는 기본적인 모노레포 구조를 생성합니다.
• GitHub 저장소를 복제하면 다양한 예시 프로젝트를 참고할 수 있습니다.

3. 기본 설정

1. package.json:

Turborepo는 package.json 파일에 다음과 같은 스크립트를 추가합니다.

{
  "scripts": {
    "turbo": "turbo start",
    "build": "turbo build",
    "test": "turbo test",
    "lint": "turbo lint"
  }
}

• turbo start: 개발 서버를 실행합니다.
• turbo build: 모든 프로젝트를 빌드합니다.
• turbo test: 모든 프로젝트의 테스트를 실행합니다.
• turbo lint: 모든 프로젝트의 코드를 검사합니다.

2. tsconfig.json:

Turborepo는 TypeScript 프로젝트에 대해 tsconfig.json 파일을 사용하여 컴파일 설정을 정의합니다.

기본 설정:

• extends: @turbo/tsconfig를 상속하여 기본 설정을 가져옵니다.
• compilerOptions: TypeScript 컴파일러 옵션을 설정합니다.
• include: 컴파일 대상 파일을 지정합니다.
• exclude: 컴파일 대상에서 제외할 파일을 지정합니다.

예시:

{
  "extends": "@turbo/tsconfig",
  "compilerOptions": {
    "target": "es2017",
    "module": "es6",
    "lib": ["es2017", "dom"],
    "outDir": "./dist",
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules/**/*"
  ]
}

추가 설정:

• rootDir: 프로젝트의 루트 디렉토리를 설정합니다.
• baseUrl: 경로 해결을 위한 기본 URL을 설정합니다.
• paths: 별칭을 사용하여 파일 경로를 줄일 수 있습니다.
• types: TypeScript 컴파일러에 필요한 타입 정의 파일을 지정합니다.

참고:

• Turborepo는 기본적으로 @turbo/tsconfig 파일을 제공합니다. 이 파일은 TypeScript 프로젝트에 필요한 기본 설정을 포함합니다.
• 필요에 따라 tsconfig.json 파일을 추가하여 프로젝트 특정 설정을 정의할 수 있습니다.
• Turborepo 공식 문서에서 tsconfig.json 설정에 대한 자세한 정보를 확인할 수 있습니다.

Turborepo에서 tsconfig.json 설정을 활용하는 방법:

• 모노레포 전체 설정:
  • @turbo/tsconfig 파일을 수정하여 모든 프로젝트에 적용되는 기본 설정을 변경합니다.
• 개별 프로젝트 설정:
  • 각 프로젝트의 tsconfig.json 파일을 수정하여 프로젝트 특정 설정을 정의합니다.
• 상속 관계:
  • extends 키워드를 사용하여 상속 관계를 정의하여 코드 재사용성을 높일 수 있습니다.

예시:

# packages/app/tsconfig.json
{
  "extends": "@turbo/tsconfig",
  "compilerOptions": {
    "target": "es2020",
  }
}

# packages/lib/tsconfig.json
{
  "extends": "@turbo/tsconfig",
  "compilerOptions": {
    "module": "commonjs",
  }
}

Turborepo에서 tsconfig.json 설정을 활용하면 모노레포 환경에서 TypeScript 프로젝트를 효율적으로 관리할 수 있습니다.

참고자료:

• Turborepo 공식 문서: [유효하지 않은 URL 삭제됨]
• Turborepo tsconfig.json 설정 가이드: [유효하지 않은 URL 삭제됨]

3. .gitignore:

.gitignore 파일에 다음과 같은 패턴을 추가하여 빌드 아티팩트를 무시하도록 설정합니다.

node_modules/
dist/
coverage/

4. 추가 설정

Turborepo는 다양한 설정 옵션을 제공합니다. 자세한 내용은 공식 문서를 참조하십시오.

• 공식 문서: https://turbo.build/repo/docs

5. 팁

• Turborepo는 기본적으로 eslint을 사용하여 코드 스타일을 검사합니다. 필요에 따라 다른 linter를 사용하도록 설정할 수 있습니다.
• Turborepo는 jest를 사용하여 테스트를 실행합니다. 필요에 따라 다른 테스트 프레임워크를 사용하도록 설정할 수 있습니다.
• Turborepo는 prettier를 사용하여 코드를 정렬합니다. 필요에 따라 다른 포매터를 사용하도록 설정할 수 있습니다.

TurboRepo vs Yarn Workspaces vs Nx

TurboRepo, Yarn Workspaces, 그리고 Nx는 모두 모노레포 환경에서 코드 베이스를 관리하기 위한 인기 있는 도구들입니다. 이 도구들 간의 주요 차이점을 파악하는 것은 프로젝트에 가장 적합한 선택을 하는 데 도움이 됩니다.

핵심 차이점

특징	Turborepo	Yarn Workspaces	Nx
접근 방식	작업 중심의 캐싱 + 태스크 실행	패키지 연동 기반. 간단한 설정이 강점.	프로젝트 그래프 기반 분석. 보다 구조화된 접근.
성능	매우 빠름. 고성능에 초점을 두고 개발됨.	비교적 빠름.	스마트 빌드 계산. 영향을 받는 영역만 빌드.
도구 지원	기본적인 도구와의 통합. 커스터마이징에 대한 유연성이 높음.	기본적인 도구와의 통합. 커스터마이징에 대한 유연성이 높음.	내장된 도구 세트 제공. Angular 등 특정 프레임워크와의 강력한 통합.
학습 곡선	상대적으로 낮음. 익히기 쉽고 커스터마이징 가능.	매우 낮음. 기본 지식만으로 쉽게 시작 가능.	중간 수준. 내부의 추상화 개념에 대한 이해 필요.
확장성	매우 우수. 패키지 단위로 그래프 정의. 대규모 환경에 적합.	우수. 패키지 단위로 그래프 정의. 대규모 환경에 적합.	우수. 대규모 모노레포를 위해 설계.
커뮤니티	빠르게 성장중인 활발한 커뮤니티.	Yarn 자체가 갖는 대규모 커뮤니티 지원	활발한 커뮤니티와 지원.

대략적인 비교

• Turborepo: 가장 빠른 빌드 성능 제공, 쉽게 시작하고 유연하게 설정 가능. 개발 속도를 최우선 하는 현대적인 프로젝트에 적합.
• Yarn Workspaces: 가장 간단한 설정, 기존 JavaScript/TypeScript 프로젝트에 빠르게 도입 가능. 엄격한 구조가 필요하지 않은 경우에 적합.
• Nx: 스마트한 의존성 분석과 내장 도구 셋으로 보다 구조화된 대규모 프로젝트 관리에 용이. 특정 프레임워크와의 긴밀한 결합을 필요로 할 때 강력함.

선택 요인

• 프로젝트 규모와 복잡성: 대규모, 복합적인 프로젝트일수록 Nx의 장점이 빛납니다.
• 성능 최적화: 최고의 빌드 성능을 요구한다면 Turborepo가 강력합니다.
• 간결성과 유연성: 설정의 쉬움과 유연성을 중시한다면 Yarn Workspaces 또는 Turborepo 가 적합합니다.
• 특정 기술 스택: Angular와 밀접하게 같이 사용할 예정이라면 Nx의 내장 지원이 유용합니다.

언제 어떤 것을 선택할까요?

• 엄청난 성능향상을 원하고, 조금의 설정이 필요하더라도 상관없다면 Turborepo를 선택하세요.
• 가능한 빨리 모노레포를 구성하고 싶으시다면 Yarn Workspaces를 선택하세요.
• 대규모 프로젝트를 강력한 도구들과 함께 작업하고 싶은 경우 Nx를 고려하세요.