<div id="readability-page-1" class="page"><div><div><nav aria-label="breadcrumb"><ol itemscope="" itemtype="http://schema.org/BreadcrumbList"><li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><a itemtype="http://schema.org/Thing" itemprop="item" href="/ko/"><span itemprop="name">Home</span></a><meta itemprop="position" content="1"></li><li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><a itemtype="http://schema.org/Thing" itemprop="item" href="/ko/environment"><span itemprop="name">environment</span></a><meta itemprop="position" content="2"></li><li aria-current="page" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><a itemtype="http://schema.org/Thing" itemprop="item" href="/ko/environment/monorepo/tools/"><span itemprop="name">[JavaScript] 모노레포(Monorepo)를 위한 도구들</span></a><meta itemprop="position" content="3"></li></ol></nav></div><div><article><div id="contents_list"><h2 id="section">목차</h2><ul><li><a href="#%EA%B0%9C%EC%9A%94">개요</a></li><li><a href="#%EB%B8%94%EB%A1%9C%EA%B7%B8-%EC%8B%9C%EB%A6%AC%EC%A6%88">블로그 시리즈</a></li><li><a href="#%EB%AA%A8%EB%85%B8%EB%A0%88%ED%8F%AC%EB%A5%BC-%EC%8B%9C%EC%9E%91%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95">모노레포를 시작하는 방법</a></li><li><a href="#%ED%8C%A8%ED%82%A4%EC%A7%80-%EB%A7%A4%EB%8B%88%EC%A0%80">패키지 매니저</a></li><li><a href="#%EB%AA%A8%EB%85%B8%EB%A0%88%ED%8F%AC%EC%9A%A9-%ED%88%B4">모노레포용 툴</a><ul><li><a href="#lerna">Lerna</a></li><li><a href="#nx">Nx</a></li><li><a href="#turborepo">Turborepo</a></li></ul></li><li><a href="#%EC%99%84%EB%A3%8C">완료</a></li></ul></div><h2 id="개요">개요</h2><p>이번 블로그 포스트에서는 JavaScript로 개발할 프로젝트에서 모노레포(Monorepo)를 사용하기 위해 필요한 도구들을 알아보도록 하겠습니다.</p><h2 id="블로그-시리즈">블로그 시리즈</h2><p>이 블로그는 시리즈로 제작되었습니다. 다음 링크를 통해 다른 블로그 포스트도 확인해 보시기 바랍니다.</p><ul><li><a href="https://deku.posstree.com/ko/environment/repository_strategy/" target="\_blank">[프로젝트 관리] 리포지토리 전략</a></li><li>[JavaScript] 모노레포(Monorepo)를 위한 도구들(https://deku.posstree.com/environment/monorepo/tools/){:target=”_blank”}</li><li><a href="https://deku.posstree.com/ko/environment/monorepo/module-resolutions/" target="\_blank">[Monorepo] NodeJS의 모듈 불러오기</a></li><li><a href="https://deku.posstree.com/ko/environment/monorepo/symlink/" target="\_blank">[Monorepo] Symlink</a></li><li><a href="https://deku.posstree.com/ko/environment/monorepo/yarn_workspaces/" target="\_blank">[Monorepo] Yarn Workspaces</a></li><li><a href="https://deku.posstree.com/ko/environment/monorepo/yarn_workspaces/hoisting/" target="\_blank">[Monorepo] Yarn Workspaces의 Hoisting</a></li><li><a href="https://deku.posstree.com/ko/environment/monorepo/yarn_workspaces/command/" target="\_blank">[Monorepo] Yarn Workspaces의 명령어</a></li><li><a href="https://deku.posstree.com/ko/environment/monorepo/pnpm/" target="\_blank">[Monorepo] pnpm을 사용하여 모노레포 만들기</a></li></ul><h2 id="모노레포를-시작하는-방법">모노레포를 시작하는 방법</h2><p>모노레포를 시작하는 방법은 크게 두 가지가 있습니다.</p><ul><li>패키지 매니저를 이용하는 방법</li><li>모노레포용 툴을 사용하는 방법</li></ul><p>이번 블로그 포스트에서는 JavaScript 프로젝트에서 모노레포를 지원하는 패키지 매니저와 모노레포 툴에 대해서 알아보겠습니다.</p><h2 id="패키지-매니저">패키지 매니저</h2><p>JavaScript 프로젝트에서 모노레포를 구성하기 위해서는 모노레포를 지원하는 패키지 매니저를 사용할 수 있습니다. 모노레포를 지원하는 패키지 매니저는 <code>pnpm</code>, <code>yarn</code>, <code>npm</code>이 있습니다.</p><p>모노레포를 지원하는 패키지매니저인 <code>pnpm</code>, <code>yarn</code>, <code>npm</code>은 다음과 같은 특성을 가지고 있습니다.</p><table><thead><tr><th>기능</th><th>pnpm</th><th>yarn</th><th>npm</th></tr></thead><tbody><tr><td>workspace 제공</td><td>✅</td><td>✅</td><td>✅</td></tr><tr><td>고립된 node_modules</td><td>✅(default)</td><td>✅</td><td>✅</td></tr><tr><td>호이스팅된 node_modules</td><td>✅</td><td>✅</td><td>✅(default)</td></tr><tr><td>피어 자동 설치</td><td>✅</td><td>❌</td><td>✅</td></tr><tr><td>Plug’n’Play</td><td>✅</td><td>✅(default)</td><td>✅</td></tr><tr><td>Zero-Installs</td><td>❌</td><td>✅</td><td>❌</td></tr><tr><td>종속 패치</td><td>✅</td><td>✅</td><td>❌</td></tr><tr><td>NodeJS 버전 관리</td><td>✅</td><td>❌</td><td>❌</td></tr><tr><td>Lockfile</td><td>✅(pnpm-lock.yaml)</td><td>✅(yarn.lock)</td><td>✅(package-lock.json)</td></tr><tr><td>덮어쓰기 지원</td><td>✅</td><td>✅(resolution 사용)</td><td>✅</td></tr><tr><td>Content-addressable 리포지토리</td><td>✅</td><td>❌</td><td>❌</td></tr><tr><td>동적 패키지 실행</td><td>✅(pnpm dlx)</td><td>✅(yarn dlx)</td><td>✅(npx)</td></tr><tr><td>Listing licenses</td><td>✅(pnpm licenses list)</td><td>✅(Via a plugin)</td><td>❌</td></tr></tbody></table><h2 id="모노레포용-툴">모노레포용 툴</h2><p>패키지 매니저가 제공하는 <code>Workspace</code> 기능만으로도 충분히 모노레포를 구성할 수 있지만, 모노레포용 툴을 사용하면 보다 쉽게 모노레포를 구성할 수 있습니다. 또한, 모노레포용 툴이 제공하는 <code>Cache</code> 기능을 사용하면 <code>Build</code>나 <code>CI</code> 등을 보다 빠르게 수행할 수 있습니다.</p><p>JavaScript 프로젝트를 위한 모노레포용 툴에는 <code>Lerna</code>, <code>Nx</code>, <code>Turborepo</code>가 있습니다.</p><h3 id="lerna">Lerna</h3><p><code>Lerna</code>는 오픈소스로 개발, 관리되고 있습니다. 오픈소스 커뮤니티만으로는 관리가 어려워 <code>Nx</code>에 인수되었습니다.</p><ul><li>Lerna: <a href="https://lerna.js.org/" rel="nofollow noreferrer" target="\_blank">https://lerna.js.org/</a></li></ul><p>현재도 <code>Lerna</code>를 사용할 수 있지만, <code>Nx</code>에 인수되었기 때문에, <code>Nx</code>가 자신들의 툴만큼 <code>Lerna</code>를 지원할지 확실하지 않기 때문에, <code>Lerna</code>를 사용할 예정이라면 <code>Nx</code>를 사용하는 것을 고려하거나, 좀 더 추이를 지켜보는 것이 좋을 것 같습니다.</p><h3 id="nx">Nx</h3><p><code>Nx</code>는 <code>Narwhal Technologies Inc.</code>라는 회사에서 개발하여 제공하고 있습니다. 이 회사는 <code>Angular</code> 프레임워크와 관련된 도구 및 서비스를 제공하는 회사입니다. <code>Angular</code> 프레임워크 관련 도구를 개발하는 회사가 만든 <code>Nx</code>이기 때문에, <code>Nx</code>는 <code>Angular</code> 애플리케이션을 위한 모노레포 관리 도구로 시작되었습니다. 현재는 <code>React</code> 등 다른 프레임워크도 지원하고 있습니다.</p><ul><li>Nx: <a href="https://nx.dev/" rel="nofollow noreferrer" target="\_blank">https://nx.dev/</a></li></ul><p>만약 <code>Angular</code> 프레임워크로 프로젝트를 개발할 예정이라면 <code>Nx</code>는 훌륭한 선택일 것입니다. 물론 다른 프레임워크에서도 <code>Nx</code>는 좋은 선택지일 수 있지만, <code>Angular</code> 프레임워크를 중심으로 개발된 <code>Nx</code>와 <code>Angular</code> 중심의 툴을 개발하는 회사가 만든 <code>Nx</code>는 <code>Angular</code> 프레임워크에서 더 좋은 성능을 발휘할 것입니다.</p><p><code>Nx</code>가 지원하는 프레임워크는 다음 링크를 통해서 확인 가능합니다.</p><ul><li>Recipes: <a href="https://nx.dev/recipes" rel="nofollow noreferrer" target="\_blank">https://nx.dev/recipes</a></li></ul><h3 id="turborepo">Turborepo</h3><p><code>Turborepo</code>는 <a href="https://twitter.com/jaredpalmer" rel="nofollow noreferrer" target="\_blank">Jared Palmer</a>가 개발하였지만, 2021년 <code>NextJS</code>를 만들고 운영하는 <a href="https://vercel.com/blog/vercel-acquires-turborepo" rel="nofollow noreferrer" target="\_blank">Vercel</a>이 인수하여 개발, 관리하고 있습니다.</p><ul><li>Turbo: <a href="https://turbo.build/" rel="nofollow noreferrer" target="\_blank">https://turbo.build/</a></li></ul><p>만약, <code>NextJS</code>, <code>React</code>로 프로젝트를 개발할 예정이라면 <code>Turborepo</code>는 훌륭한 선택일 것입니다. 특히, <code>NextJS</code>를 사용하면 같은 회사가 개발, 관리하고 있는 <code>Turborepo</code>를 사용하는 것이 다른 툴을 사용하는 것보다 좋을 것입니다.</p><p><code>Turborepo</code>가 지원하는 프레임워크는 다음 링크를 통해서 확인 가능합니다.</p><ul><li>Turborepo Examples: <a href="https://turbo.build/repo/docs/getting-started/from-example" rel="nofollow noreferrer" target="\_blank">https://turbo.build/repo/docs/getting-started/from-example</a></li></ul><h2 id="완료">완료</h2><p>이번 블로그 포스트에서는 JavaScript로 개발할 프로젝트에서 모노레포(Monorepo)를 사용하기 위해 필요한 도구들을 알아보도록 하겠습니다. 패키지 매니저가 제공하는 기능으로도 충분히 모노레포를 구성할 수 있지만, 모노레포용 툴을 사용하면 좀 더 편하고 다양한 기능들을 사용할 수 있습니다.</p><p>모노레포로 프로젝트를 구성할 예정이시라면 패키지 매니저의 기능뿐만 아니라 모노레포용 툴의 도입도 고려해 보시기 바랍니다.</p><p><code> 제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다! </code></p><h2>앱 홍보</h2><div><p> 지금 보고 계신 블로그를 작성하는 <code>Deku</code>가 개발한 앱을 한번 사용해보세요.<br><code>Deku</code>가 개발한 앱은 Flutter로 개발되었습니다.</p><p> 관심있으신 분들은 앱을 다운로드하여 사용해 주시면 정말 감사하겠습니다.</p></div><h2>책 홍보</h2></article></div></div></div>

dev-yakuza

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