모노레포란?

하나의 레포지토리에서 독립적인 여러 프로젝트를 관리하는 방법이다. 각각의 레포지토리에서 작업을 관리하는 멀티레포의 경우 프로젝트마다 서로 다른 컨벤션과 라이브러리가 존재하게 되고, 새 프로젝트를 생성할 때 마다 환경 세팅이 필요하다. 또한 중복 코드와 프로젝트 관리의 어려움 등의 문제가 발생할 수 있다. 하지만 모노레포를 방식을 채택한다면 일관된 개발 환경, 생상성 향상, 프로젝트 관리의 이점이 발생할 수 있다. 두 가지 방식 모두 각각 장단점이 존재하기에 적절한 상황에서의 사용이 필요하다.

장점

빠른 코드 수정 - Utils를 변경하더라도 다른 곳에 바로 반영된다. 멀티레포의 경우 버전을 올리고 의존성을 다시 설치해야 사용할 수 있다.
각 레포지토리 마다 사용했던 같은 코드의 중복을 제거할 수 있다.
코드를 한번에 관리하기 떄문에 대규모 리팩토링이 쉬워진다.
코드 컨벤션 통일 - 멀티레포에서는 각 레포마다 다른 컨벤션을 가졌다면 모노레포에서는 한 곳에서 관리하여 통일하기 수월하다. eslint 패키지를 만들고 각 패키지에 주입하면 컨벤션 관리에 용이하다.
통합 CI, TEST 관리가 가능 - 멀티레포의 경우 수정 사항이 생기면 각 레포마다 테스트를 돌려야하지만 한번에 CI와 TEST를 실행할 수 있다.

단점

의존성 관리가 복잡 - 서로 의존성 연결이 쉽기 때문에 과도한 의존 관계가 생길 수 있다. 배포할 때 문제가 발생할 수 있다.
무거운 프로젝트(CI 속도 저하)
Code ownership 위배 - 많은 팀이 하나의 레포를 관리하여 책임감이 분산될 수 있다.

Turborepo

Vercel에서 인수하였고, Next.js+TypeScript를 기본으로 사용한다. 캐싱으로 빌드 최적화 가능하다.

apps

docs: 문서 폴더. 기본 next 프로젝트
web: 실제로 서비스되는 App 프로덕트 폴더. 기본 next 프로젝트

packages

eslint-config: eslint 구성을 커스텀하여 app 간에 공통으로 쓸 수 있는 폴더
typescript-config: config를 기본으로 설정하는 폴더로 next 관련 설정도 할 수 있음
ui: 공통으로 사용되는 UI 컴포넌트를 만들 수 있음

Next.js + TypeScript + Tailwind + Husky + Eslint 터보레포 세팅하기

1 - npx create-turbo@latest를 실행하여 프로젝트를 시작한다.

2 - 가장 루트 위치에 huksy와 prettier 관련 패키지를 설치하고 세팅하여 프로젝트 전역적으로 사용한다.

3 - packages 폴더 내에 custom-config 폴더를 생성하여 설정 파일들을 담는다. 그리고 package.json 파일을 생성하여 필요한 패키지(eslint 관련) 설치하고 아래와 같이 설정 코드를 작성한다.

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    // apps content
    `./app/**/*.{js,ts,jsx,tsx}`,
    `./components/**/*.{js,ts,jsx,tsx}`,
    // packages content
    '../../packages/**/*.{js,ts,jsx,tsx}',
  ],
  plugins: [],
};


// package.json
{
  "name": "custom-config",
  "version": "0.0.0",
  "main": "index.js",
  "license": "MIT",
  "files": [
    "tailwind.config.js",
    "postcss.config.js",
    ".eslintrc.js"
  ],
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^6.19.0",
    "@typescript-eslint/parser": "^6.19.0",
    "eslint": "^8.56.0",
    "eslint-plugin-tailwindcss": "^3.14.0"
  }
}

4 - 실제 서비스하는 프로덕트 폴더에서 tailwind 및 관련 패키지를 설치한다.

5 - 위에서 설정한 custom-config를 프로덕트 프로젝트의 package.json 파일에서 불러온다.

6 - 프로덕트 프로젝트의 eslint, tailwind config 파일에서 아래와 같이 설정 불러온다.

// .eslint.js
module.exports = require("custom-config/.eslintrc");

// tailwind.config.js
module.exports = require("custom-config/tailwind.config");

7 - packages > ui 폴더에도 eslint 설정을 불러와서 사용한다.

// packages > ui > .eslintrc.js
module.exports = require("custom-config/.eslintrc");

모노레포(Monorepo)