Tuborepo로 monorepo 프로젝트 설정하기

Monorepo

모노레포(monorepo)는 여러 개의 프로젝트를 하나의 저장소에서 관리하는 방식입니다. 일반적으로는 프로젝트마다 저장소를 따로 가져가는 식으로, 멀티레포(multirepo) 방식으로 개발을 했습니다.

 

모노레포는 하나의 저장소에서 여러개의 프로젝트를 관리하기 때문에, 코드 재사용성이 높아져서 코드 중복을 줄일 수 있습니다. 무조건 모노레포가 좋은것은 아니지만, 중복된 코드가 많다면 고려해보는 것이 좋습니다.

 

단점으로는 규모가 커져 복잡해보일 수 있고, 프로젝트마다 다른 의존성 버전을 사용하는 경우, 충돌 가능성도 발생할 수 있습니다.

 

Tuborepo

Turborepo는 vercel에서 개발했으며, 모노레포를 관리하기 위해 사용합니다. 모노레포 프로젝트를 구성할 때 Lerna, Turborepo 등을 사용할 수 있습니다. 각각 장단점이 있으나, 본 글에서는 Turborepo에 대해 소개합니다.

 

Tuborepo는 캐싱, 병렬처리 등을 통해 개발, 빌드 속도를 극대화 시켜줍니다. 한번 작업을 한 내용은 캐싱되어, 코드에 변화가 없다면 건너뜁니다. 즉, 한번만 연산을 하기 때문에 속도와 효율성이 높아집니다.

 

코드의 변화를 인식할 때는 timestamp 방식이 아닌 hash 값으로 비교하기 때문에, 내용이 변경된 경우만 새롭게 연산을 합니다

 

Tuborepo로 monorepo 설정

프로젝트 생성

create-tuborepo를 사용하면 쉽게 monorepo를 프로젝트를 생성할 수 있습니다. 아래 명령어를 사용하여 monorepo를 생성해봅시다.

npx create-turbo@latest

 

아래와 같은 프롬프트가 나오는데, 프로젝트 명을 입력을 하고 패키지 매니저는 yarn으로 하겠습니다.

? Where would you like to create your Turborepo? ./my-project
? Which package manager do you want to use? yarn

 

yarn berry 설정

본 글에서는 yarn 2버전인 yarn berry를 사용할 예정이라 아래 명령어를 사용하여, 패키지 매니저를 yarn berry로 버전을 변경합니다. yarn berry를 사용안하실 분은 해당 부분은 넘어가셔도 됩니다.

yarn set version berry

 

앱 실행

create-tuborepo로 만든 프로젝트를 확인해보면 apps에 next.js 프로젝트가 생성되어 있고, packages에 공통 모듈들이 생성되어 있습니다. 지금 이상태로도 실행이 가능하기 때문에, 정상적으로 실행이 되는지 확인해봅시다.

yarn install
yarn dev

 

아래 사진과 같이 나오면 정상적으로 실행이 됐습니다.

 

Tuborepo 프로젝트 살펴보기

turbo.json

root 경로에 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"]
    },
    "dev": {
      "cache": false,
      "persistent": true
    }
  }
}

 

turbo.json 파일은 monorepo에서 다양한 빌드 및 기타 작업을 정의할 때 사용하는 설정 파일입니다. 아래에서는 해당 옵션들에 대해 설명합니다.

 

$schema

"$schema": "https://turbo.build/schema.json"

 

JSON 파일이 어떤 스키마를 따르는지를 정의합니다. Turbo의 공식 스키마 URL을 사용하여, 해당 설정 파일의 구조 및 속성들이 올바른지 확인해줍니다.

 

ui

"ui": "tui"

 

tui는 터미널 기반의 인터페이스(Terminal User Interface)를 사용한다는 의미로, 작업 진행 상황을 터미널 상에서 직관적인 UI로 보여줍니다.

 

tasks > build

"build": {
  "dependsOn": ["^build"],
  "inputs": ["$TURBO_DEFAULT$", ".env*"],
  "outputs": [".next/**", "!.next/cache/**"]
}

 

 

dependsOn

• 해당 작업이 의존하는 다른 작업을 지정할 때 사용합니다. ^build를 넣으면, 해당 작업이 다른 패키지의 build 작업이 먼저 완료된 뒤에, 이 작업이 실행된다는 의미를 가집니다.

 

inputs

• 해당 작업에 영향을 주는 파일이나 폴더를 지정할 때 사용합니다. $TURBO_DEFAULT$는 기본적인 입력 파일을 의미하고, .env*는 환경 변수 파일을 의미합니다.

 

outputs

• 빌드 산출물이 저장되는 위치를 지정할 때 사용합니다. .next/**는 Next.js 빌드 산출물의 위치입니다. 그리고, !.next/cache/**는 .next 폴더 내의 캐시 파일을 제외시킨다는 뜻입니다.

 

dev

"dev": {
  "cache": false,
  "persistent": true
}

 

cache

• cache: false는 해당 작업의 결과물을 캐싱하지 않겠다는 의미입니다. 개발 모드에서는 파일이 자주 변경되기 때문에 캐시를 비활성화하여 더 빠르게 개발할 수 있습니다. 이러한 이유로 보통 false로 설정합니다.

 

persistent

• persistent: true는 이 작업이 종료되지 않고 계속 실행되는 작업을 의미합니다. dev 서버와 같은 작업은 파일 변경을 지속적으로 watch하고 있기 때문에 true로 설정해야합니다.

 

Reference

Installation | Turborepo