모노레포에서 Internal Packages를 관리하는 3가지 방법

일반적인 형태의 모노레포 프로젝트 구성

-packages
-apps

Just-In Time Packages

JIT 패키지의 장점

1. 최소한의 Configuration으로 패키지 분할이 가능하다

JIT 패키지의 단점

1. 해당 패키지를 사용하는 측이 트랜스파일링, 빌드를 수행해줘야한다.
2. 빌드 결과물을 캐싱하는 게 불가능하다 ( 애초에 빌드를 안하니까요 )
3. 다른 방식에 비해 빌드시간이 길어질 수 있다

{
  "name": "@repo/ui",
  "exports": {
    "./button": "./src/button.tsx", 
    "./card": "./src/card.tsx"
  },
  "scripts": {
    "lint": "eslint . --max-warnings 0", 
    "check-types": "tsc --noEmit"
  }
}

@repo/ui/button

import { Button } from "@repo/ui/button";
 
export default function Home() {
  return (
    <div className="font-sans grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20">
      <Button appName="hello">hello</Button>
    </div>
  );
}

{
  "name": "next",
  "version": "14.2.4",
  "description": "The React Framework",
  "main": "./dist/server/next.js",
  "license": "MIT",
  "repository": "vercel/next.js",
  "bugs": "https://github.com/vercel/next.js/issues",
  "homepage": "https://nextjs.org",
  "types": "index.d.ts",
  ...중략
}

Compiled Packages

{
  "name": "@repo/ui",
  "exports": {
    "./button": {
      "types": "./src/button.tsx", 
      "default": "./dist/button.js",
    },
    "./card": {
      "types": "./src/card.tsx", 
      "default": "./dist/card.js",
    }
  },
  "scripts": {
    "build": "tsc"
  }
}

Compiled Packages의 장점

1. 빌드 캐싱이 가능합니다.

Compiled Packages의 단점

1. 더 많은 추가 Configuration이 필요합니다.
2. 적절하게 패키지를 빌드하기 위해 필요한 지식들을 학습해야합니다.
3. 빌드 순서에 대한 의존성이 생깁니다.

Publishable Packages

Publishable Packages의 장점

1. 버저닝이 용이하다.

Publishable Packages의 단점

1. 수많은 구성과 도구가 필요할 가능성이 높다.

그럼 어떻게 모노레포에서 Internal Packages를 관리하면 좋을까요?

참고문헌

마치며