Turborepo로 모노레포(Mono-repo) 구축하기 - (1) 기초

 

프론트엔드 모노레포(Mono-Repo) 도입 배경

 

지난 포스팅에서 모노레포를 도입하게 된 배경에 대해 다루었습니다.
이번 포스팅에서는 모노레포 구축에 필요한 기초 세팅과 설정 방법에 대해 설명하겠습니다.

Lerna, nx 등 다양한 모노레포 관리 도구가 있지만, 저는 Turborepo를 선택하여 구성해 보기로 했습니다

 

Turborepo란?

Turborepo는 자바스크립트와 타입스크립트 모노레포를 위한 빌드 시스템입니다

모노레포는 장점이 많지만, 각 워크스페이스가 자체 테스트, 린팅, 빌드 프로세스를 갖추고 있어 확장성에 문제가 있습니다. 예를 들어, 한 애플리케이션의 작업이 110초, 다른 애플리케이션이 140초, 공유 패키지가 90초 걸리면 전체 작업에 큰 지연이 발생할 수 있습니다.

Turborepo는 이러한 모노레포의 확장성 문제를 해결합니다. Remote Cache는 작업 결과를 저장하여 CI가 같은 작업을 반복하지 않도록 합니다. 즉, 모든 파일을 다시 빌드하는 것이 아니라 캐시된 결과를 재사용합니다. 또한, 모든 코어를 활용하여 여러 워크스페이스를 병렬로 실행함으로써 빌드 시간을 단축합니다.

Turborepo는 점진적으로 도입할 수 있으며, 몇 분 안에 어떤 레포지토리에도 추가할 수 있습니다. 기존의 package.json 스크립트와 선언된 종속성, 단일 turbo.json 파일을 사용하며, npm, yarn, pnpm 등 어떤 패키지 관리자와도 호환됩니다.

 

---

모노레포 구축하기

1.  디렉토리 생성 및 yarn berry 세팅

mkdir 디렉토리명
cd 생성한디렉토리

git init
yarn set version berry

 

yarn이 설치 되어 있지 않다면 전역에 yarn 설치부터 먼저 진행해 주세요

npm install -g yarn

 

만약 아래와 같은 에러가 뜬다면 Node 버전을 확인 후 18.12 이상 버전을 설치 후 다시 진행해 주세요

SyntaxError: Unexpected token '.' (Node v18.xx )

 

 

설치가 완료되면 package.json과 .yarnrc.yml 파일이 생성된 것을 확인하실 수 있습니다

 

 

2. .yarnrc.yml 파일 작성하기

nodeLinker: pnp
yarnPath: .yarn/releases/yarn-4.4.0.cjs // 사용하는 yarn 버전 확인 필수!

 

• nodeLinker:
  • pnp 값이 설정되어 있으면, Yarn은 Plug'n'Play (PnP) 모드를 사용하여 모듈을 관리합니다. PnP 모드는 전통적인 node_modules 디렉터리 대신에, 모듈을 직접 참조하는 .pnp.js 파일을 생성하여 빠르고 효율적으로 모듈을 로드합니다.
• yarnPath:
  • 이 설정은 Yarn의 실행 파일 경로를 지정합니다. .yarn/releases/yarn-4.4.0.cjs로 설정된 경우, 프로젝트는 이 경로에 위치한 특정 버전의 Yarn을 사용하게 됩니다. 이렇게 하면 프로젝트의 종속성을 관리하는 데 사용되는 Yarn의 버전을 고정할 수 있습니다.

 

 

3. package.json 작성하기

{
  "name": "프로젝트명",
  "version": "1.0.0",
  "packageManager": "yarn@4.4.0",
  "workspaces": [
    "apps/*",
    "packages/*"
  ]
}

중요한 부분은 workspaces 설정입니다. 최종적으로는 모노레포 프로젝트에 apps와 packages 디렉터리를 생성할 계획입니다. apps 디렉터리에는 실행할 앱들을, packages 디렉토리에는 공통 패키지들을 배치할 예정입니다. 따라서 yarnrc.yml 파일은 다음과 같이 작성되었습니다.

 

4. .pnp.cjs 파일 생성하기

yarn install

packages.json 파일 생성을 했으니 설치를 진행해 보겠습니다.
설치가 완료되면 .pnp.cjs 파일이 생성됩니다.

 

5. code-workspace 파일 작성하기 (optional)

code-workspace 파일은 VSCode를 사용하는 분들에게 선택적인 사항입니다.

{
  "folders": [
    {
      "path": "apps/어플리케이션1"
    },
    {
      "path": "apps/어플리케이션2"
    }
  ],
  "extensions": {
    "recommendations": [
      "arcanis.vscode-zipfs",
      "dbaeumer.vscode-eslint",
      "esbenp.prettier-vscode"
    ]
  },
}

1. folders:
   • 이 항목은 작업 공간에 포함될 폴더들을 정의합니다. 각 폴더는 "path" 키를 통해 지정되며, 여기서는 두 개의 폴더 (apps/애플리케이션 1 및 apps/애플리케이션 2)가 포함되어 있습니다. 이 설정으로, VSCode는 이 두 폴더를 작업 공간의 일부로 인식하고, 해당 폴더 내의 파일들을 한 번에 작업할 수 있도록 합니다.
2. extensions:
   • 이 항목은 작업 공간에서 추천하는 VSCode 확장 프로그램들을 나열합니다. 사용자가 이 작업 공간을 열면, 추천된 확장 프로그램들을 설치하거나 활성화하라는 메시지를 받을 수 있습니다. 여기서는 다음과 같은 확장 프로그램들이 추천됩니다:
     • "arcanis.vscode-zipfs": ZIP 파일 시스템을 지원하는 확장 프로그램.
     • "dbaeumer.vscode-eslint": ESLint를 통합하여 코드의 품질을 검사하는 확장 프로그램.
     • "esbenp.prettier-vscode": Prettier를 통합하여 코드를 자동으로 포맷하는 확장 프로그램.

만약 해당 모노레포 리포지토리를 pull 받은 사람이 zipfs 플러그인이 설치되어 있지 않다면, VSCode는 해당 플러그인을 추천하거나 설치하라는 메시지를 표시할 것입니다. 이로 인해 개발자는 필요한 확장 프로그램을 손쉽게 설치할 수 있으며, 프로젝트의 모든 구성 요소와 파일을 정상적으로 열고 작업할 수 있게 됩니다. 플러그인이 설치되지 않으면 일부 기능이 제대로 작동하지 않거나 프로젝트의 일부 파일에 접근할 수 없을 수 있습니다

 

6. .gitignore 파일작성하기

모노레포 프로젝트의 root 디렉터리에 .gitignore 파일을 작성해 주세요.
내용은 다음과 같이 설정할 수 있습니다

# local editor settings
/.vscode

# testing
/coverage

# next.js
/.next/
/out/

# production
/build

# misc
.DS_Store
*.pem

# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
.pnpm-debug.log*

# local env files
.env*.local

# vercel
.vercel

# turbo
.turbo
build/**
dist/**
.next/**

# typescript
*.tsbuildinfo
next-env.d.ts

# node_modules
node_modules
**/node_modules

# yarn berry w/ zero-install
.yarn/*
!.yarn/cache
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/sdks
!.yarn/versions

# pnp
.pnp.*

이상으로 모노레포를 구축하기 위한 기초 설정을 마쳤습니다.
다음 포스팅에서는 🎉기존 리포지토리를 모노레포로 옮기는 방법에 대해 다루겠습니다.