[JavaScript] 모노레포(Monorepo)를 위한 도구들

개요

이번 블로그 포스트에서는 JavaScript로 개발할 프로젝트에서 모노레포(Monorepo)를 사용하기 위해 필요한 도구들을 알아보도록 하겠습니다.

블로그 시리즈

이 블로그는 시리즈로 제작되었습니다. 다음 링크를 통해 다른 블로그 포스트도 확인해 보시기 바랍니다.

[프로젝트 관리] 리포지토리 전략
[JavaScript] 모노레포(Monorepo)를 위한 도구들(https://deku.posstree.com/environment/monorepo/tools/){:target=”_blank”}
[Monoepo] NodeJS의 모듈 불러오기
[Monorepo] Symlink
[Monoepo] Yarn Workspaces
[Monoepo] Yarn Workspaces의 Hoisting
[Monoepo] Yarn Workspaces의 명령어
[Monoepo] pnpm을 사용하여 모노레포 만들기

모노레포를 시작하는 방법

모노레포를 시작하는 방법은 크게 두 가지가 있습니다.

패키지 매니저를 이용하는 방법
모노레포용 툴을 사용하는 방법

이번 블로그 포스트에서는 JavaScript 프로젝트에서 모노레포를 지원하는 패키지 매니저와 모노레포 툴에 대해서 알아보겠습니다.

패키지 매니저

JavaScript 프로젝트에서 모노레포를 구성하기 위해서는 모노레포를 지원하는 패키지 매니저를 사용할 수 있습니다. 모노레포를 지원하는 패키지 매니저는 pnpm, yarn, npm이 있습니다.

모노레포를 지원하는 패키지매니저인 pnpm, yarn, npm은 다음과 같은 특성을 가지고 있습니다.

기능	pnpm	yarn	npm
workspace 제공	✅	✅	✅
고립된 node_modules	✅(default)	✅	✅
호이스팅된 node_modules	✅	✅	✅(default)
피어 자동 설치	✅	❌	✅
Plug’n’Play	✅	✅(default)	✅
Zero-Installs	❌	✅	❌
종속 패치	✅	✅	❌
NodeJS 버전 관리	✅	❌	❌
Lockfile	✅(pnpm-lock.yaml)	✅(yarn.lock)	✅(package-lock.json)
덮어쓰기 지원	✅	✅(resolution 사용)	✅
Content-addressable 리포지토리	✅	❌	❌
동적 패키지 실행	✅(pnpm dlx)	✅(yarn dlx)	✅(npx)
Listing licenses	✅(pnpm licenses list)	✅(Via a plugin)	❌

모노레포용 툴

패키지 매니저가 제공하는 Workspace 기능만으로도 충분히 모노레포를 구성할 수 있지만, 모노레포용 툴을 사용하면 보다 쉽게 모노레포를 구성할 수 있습니다. 또한, 모노레포용 툴이 제공하는 Cache 기능을 사용하면 Build나 CI 등을 보다 빠르게 수행할 수 있습니다.

JavaScript 프로젝트를 위한 모노레포용 툴에는 Lerna, Nx, Turborepo가 있습니다.

Lerna

Lerna는 오픈소스로 개발, 관리되고 있습니다. 오픈소스 커뮤니티만으로는 관리가 어려워 Nx에 인수되었습니다.

Lerna: https://lerna.js.org/

현재도 Lerna를 사용할 수 있지만, Nx에 인수되었기 때문에, Nx가 자신들의 툴만큼 Lerna를 지원할지 확실하지 않기 때문에, Lerna를 사용할 예정이라면 Nx를 사용하는 것을 고려하거나, 좀 더 추이를 지켜보는 것이 좋을 것 같습니다.

Nx

Nx는 Narwhal Technologies Inc.라는 회사에서 개발하여 제공하고 있습니다. 이 회사는 Angular 프레임워크와 관련된 도구 및 서비스를 제공하는 회사입니다. Angular 프레임워크 관련 도구를 개발하는 회사가 만든 Nx이기 때문에, Nx는 Angular 애플리케이션을 위한 모노레포 관리 도구로 시작되었습니다. 현재는 React 등 다른 프레임워크도 지원하고 있습니다.

Nx: https://nx.dev/

만약 Angular 프레임워크로 프로젝트를 개발할 예정이라면 Nx는 훌륭한 선택일 것입니다. 물론 다른 프레임워크에서도 Nx는 좋은 선택지일 수 있지만, Angular 프레임워크를 중심으로 개발된 Nx와 Angular 중심의 툴을 개발하는 회사가 만든 Nx는 Angular 프레임워크에서 더 좋은 성능을 발휘할 것입니다.

Nx가 지원하는 프레임워크는 다음 링크를 통해서 확인 가능합니다.

Recipes: https://nx.dev/recipes

Turborepo

Turborepo는 Jared Palmer가 개발하였지만, 2021년 NextJS를 만들고 운영하는 Vercel이 인수하여 개발, 관리하고 있습니다.

Turbo: https://turbo.build/

만약, NextJS, React로 프로젝트를 개발할 예정이라면 Turborepo는 훌륭한 선택일 것입니다. 특히, NextJS를 사용하면 같은 회사가 개발, 관리하고 있는 Turborepo를 사용하는 것이 다른 툴을 사용하는 것보다 좋을 것입니다.

Turborepo가 지원하는 프레임워크는 다음 링크를 통해서 확인 가능합니다.

Turborepo Examples: https://turbo.build/repo/docs/getting-started/from-example

완료

이번 블로그 포스트에서는 JavaScript로 개발할 프로젝트에서 모노레포(Monorepo)를 사용하기 위해 필요한 도구들을 알아보도록 하겠습니다. 패키지 매니저가 제공하는 기능으로도 충분히 모노레포를 구성할 수 있지만, 모노레포용 툴을 사용하면 좀 더 편하고 다양한 기능들을 사용할 수 있습니다.

모노레포로 프로젝트를 구성할 예정이시라면 패키지 매니저의 기능뿐만 아니라 모노레포용 툴의 도입도 고려해 보시기 바랍니다.

Github Sponsor

Buy me a coffee

제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다!