<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/">Home</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">environment</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/pnpm/">[Monorepo] PnpM을 사용하여 모노레포 만들기</a><meta itemprop="position" content="3"></li></ol></nav></div><div><article><div id="contents_list"><h2 id="section">목차</h2><ul><li><a href="#%EB%AA%A9%EC%B0%A8">목차</a></li><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="#pnpm">PnpM</a></li><li><a href="#pnpm-%EC%84%A4%EC%B9%98">PnpM 설치</a></li><li><a href="#%EC%98%88%EC%A0%9C">예제</a></li><li><a href="#pnpm-workspaceyaml">pnpm-workspace.yaml</a></li><li><a href="#%EC%9D%98%EC%A1%B4%EC%84%B1-%EC%84%A4%EC%B9%98">의존성 설치</a></li><li><a href="#%ED%99%95%EC%9D%B8">확인</a></li><li><a href="#%EC%99%84%EB%A3%8C">완료</a></li></ul></div><h2 id="개요">개요</h2>이번 블로그 포스트에서는 <code>PnpM</code>을 사용하여 모노레포를 만드는 방법에 대해서 알아보겠습니다.<h2 id="블로그-시리즈">블로그 시리즈</h2>이 블로그는 시리즈로 제작되었습니다. 다음 링크를 통해 다른 블로그 포스트도 확인해 보시기 바랍니다.<ul><li><a href="https://deku.posstree.com/ko/environment/repository_strategy/" target="\_blank">[프로젝트 관리] 리포지토리 전략</a></li><li><a href="https://deku.posstree.com/ko/environment/monorepo/tools/" target="\_blank">[JavaScript] 모노레포(Monorepo)를 위한 도구들</a></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>[Monorepo] PnpM을 사용하여 모노레포 만들기</li></ul><h2 id="pnpm">PnpM</h2>PnpM은 NodeJS 패키지 매니저중 하나로, <code>NPM</code>, <code>Yarn</code>과 동일한 역할을 합니다. <code>PnpM</code>은 빠른 설치 속도와 공간 절약을 강조하며 다양한 프로젝트에서 사용되고 있습니다.<h2 id="pnpm-설치">PnpM 설치</h2>다음 명령어를 사용하여 <code>PnpM</code>이 설치되어 있는지 확인합니다.설치가 되어 있지 않다면 다음 명령어를 실행하여 <code>PnpM</code>을 설치합니다.<h2 id="예제">예제</h2><code>PnpM</code>을 설치하였다면, <code>PnpM</code>을 사용하여 모노레포를 구성해 봅시다. 모노레포를 구성하기 위해 다음과 같은 폴더와 파일 구조를 만듭니다.<div><pre><code>.
├── package.json
└── src
 ├── module-a
 │ ├── index.js
 │ └── package.json
 └── module-b
 ├── index.js
 └── package.json
</code></pre></div><code>module-a</code>의 <code>package.json</code>은 다음과 같습니다.<div><pre><code>// src/module-a/package.json
{
 "name": "module-a",
 "version": "1.0.0",
 "main": "index.js",
 "scripts": {
 "start": "node index.js"
 }
}
</code></pre></div><code>module-b</code>의 <code>package.json</code>은 다음과 같습니다.<div><pre><code>// src/module-b/package.json
{
 "name": "module-b",
 "version": "1.0.0",
 "main": "index.js",
 "scripts": {
 "start": "node index.js"
 }
}
</code></pre></div>그리고 <code>module-b</code>의 <code>index.js</code>는 다음과 같습니다.<div><pre><code>// src/module-b/index.js
console.log('module-b');
</code></pre></div>마지막으로 <code>module-a</code>의 <code>index.js</code>는 다음과 같습니다.<div><pre><code>// src/module-a/index.js
console.log('module-a');

require('module-b');
</code></pre></div>이렇게 파일을 구성한 후, 다음 명령어를 실행하여 모듈을 잘 불러오는지 확인합니다.<div><pre><code>node src/module-a/index.js
</code></pre></div>그럼 다음과 같이 에러가 발생하는 것을 확인할 수 있습니다.<div><pre><code>module-a
node:internal/modules/cjs/loader:1073
 throw err;
 ^

Error: Cannot find module 'module-b'
Require stack:
- /Users/deku/temp/temp/src/module-a/index.js
 at Module._resolveFilename (node:internal/modules/cjs/loader:1070:15)
 at Module._load (node:internal/modules/cjs/loader:923:27)
 at Module.require (node:internal/modules/cjs/loader:1137:19)
 at require (node:internal/modules/helpers:121:18)
 at Object.&lt;anonymous&gt; (/Users/deku/temp/temp/src/module-a/index.js:3:1)
 at Module._compile (node:internal/modules/cjs/loader:1255:14)
 at Module._extensions..js (node:internal/modules/cjs/loader:1309:10)
 at Module.load (node:internal/modules/cjs/loader:1113:32)
 at Module._load (node:internal/modules/cjs/loader:960:12)
 at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:83:12) {
 code: 'MODULE_NOT_FOUND',
 requireStack: [ '/Users/deku/temp/temp/src/module-a/index.js' ]
}
</code></pre></div><h2 id="pnpm-workspaceyaml">pnpm-workspace.yaml</h2><code>PnpM</code>을 사용하여 모노레포를 구성하기 위해서는 <code>pnpm-workspace.yaml</code> 파일이 필요합니다. 루트 폴더에 <code>pnpm-workspace.yaml</code> 파일을 만들고 다음과 같이 수정합니다.<h2 id="의존성-설치">의존성 설치</h2><code>module-a</code>가 <code>module-b</code>를 사용하기 때문에, <code>module-a</code>의 <code>package.json</code> 파일에 <code>module-b</code>를 의존성으로 추가해야 합니다. 의존성을 추가하기 위해 <code>src/module-a/package.json</code> 파일을 열고 다음과 같이 수정합니다.<div><pre><code>{
 "name": "module-a",
 "version": "1.0.0",
 "main": "index.js",
 "scripts": {
 "start": "node index.js"
 },
 "dependencies": {
 "module-b": "workspace:*"
 }
}
</code></pre></div>파일을 수정하였다면, 루트 폴더에서 다음 명령어를 실행하여 의존성을 설치합니다.그런 다음 폴더 구조를 확인해 보면 다음과 같이 <code>module-a</code> 폴더안 <code>node_modules</code>에 <code>module-b</code>의 <code>Symlink</code>가 생성된 것을 확인할 수 있습니다.<div><pre><code>.
├── node_modules
├── package.json
├── pnpm-lock.yaml
├── pnpm-workspace.yaml
└── src
 ├── module-a
 │ ├── index.js
 │ ├── node_modules
 │ │ └── module-b -&gt; ../../module-b
 │ └── package.json
 └── module-b
 ├── index.js
 └── package.json
</code></pre></div><code>Symlink</code>에 관한 자세한 내용은 다음 링크를 참고하시기 바랍니다.<ul><li><a href="https://deku.posstree.com/ko/environment/monorepo/symlink/" target="\_blank">[Monorepo] Symlink</a></li></ul><h2 id="확인">확인</h2>이제 <code>PnpM</code>을 사용하여 모노레포를 사용할 준비가 끝났습니다. 다음 명령어를 실행하여 모듈을 잘 불러오는지 확인합니다.그럼 다음과 같이 실행이 잘 되는 것을 확인할 수 있습니다.<code>module-a</code>의 <code>node_modules</code>에 <code>module-b</code>의 <code>Symlink</code>가 생성되었기 때문에, 다음 명령어를 사용할 수 있습니다.<code>module-b</code>는 의존성이 없으므로, 다음 명령어를 실행하면 문제없이 실행 되는 것을 확인할 수 있습니다.<div><pre><code>pnpm module-b start
# module-b
node ./src/module-b
# module-b
</code></pre></div><h2 id="완료">완료</h2>이것으로 <code>PnpM</code>을 사용하여 모노레포를 구성하는 방법에 대해서 알아보았습니다. 여러분이 만약 <code>Yarn</code>을 사용하지 않고 <code>PnpM</code>을 사용하고 계신다면, 이 블로그 포스트를 참고하여 <code>PnpM</code>으로 모노레포를 구성해 보시기 바랍니다.<code> 제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다! </code><h2>앱 홍보</h2><div> 지금 보고 계신 블로그를 작성하는 <code>Deku</code>가 개발한 앱을 한번 사용해보세요. <code>Deku</code>가 개발한 앱은 Flutter로 개발되었습니다. 관심있으신 분들은 앱을 다운로드하여 사용해 주시면 정말 감사하겠습니다.</div><h2>책 홍보</h2></article></div></div></div>

dev-yakuza

NodeJS의 패키지 매니저중 하나인 PnpM을 사용하여 모노레포를 만드는 방법에 대해서 알아봅시다.