<div id="readability-page-1" class="page"><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="#yarn-workspaces">Yarn Workspaces</a></li><li><a href="#%EC%98%88%EC%A0%9C">예제</a></li><li><a href="#yarn-workspaces-%EC%84%A4%EC%A0%95">Yarn Workspaces 설정</a></li><li><a href="#yarn-workspaces-%ED%99%95%EC%9D%B8">Yarn Workspaces 확인</a></li><li><a href="#gitignore">gitignore</a></li><li><a href="#%EC%99%84%EB%A3%8C">완료</a></li></ul></div><h2 id="개요">개요</h2>이번 블로그 포스트에서는 <code>Yarn</code>의 <code>Workspaces</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>[Monorepo] Yarn Workspaces</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="yarn-workspaces">Yarn Workspaces</h2>이전 블로그 포스트인 <code>모노레포를 위한 도구</code>에서 자바스크립트 패키지 매니저인 <code>Yarn</code>의 <code>Workspaces</code>를 소개하였습니다.<ul><li><a href="https://deku.posstree.com/ko/environment/monorepo/tools/" target="\_blank">[JavaScript] 모노레포(Monorepo)를 위한 도구들</a></li></ul>이번 블로그 포스트에서는 실제로 <code>Yarn</code>의 <code>Workspaces</code> 기능을 사용하여 모노레포를 구성하는 방법에 대해서 알아보도록 하겠습니다.<ul><li>공식 문서: <a href="https://yarnpkg.com/features/workspaces" rel="nofollow noreferrer" target="\_blank">Workspaces</a></li></ul><code>Yarn</code>의 <code>Workspaces</code>는 이전 블로그 포스트에서 소개한 <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>yarn</code>이 제공하는 <code>Workspace</code> 기능을 확인하기 위한 예제를 만들어 봅시다. 우선, 다음과 같이 폴더와 파일 구조를 생성합니다.<div><pre><code>.
└── 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"
}
</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"
}
</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="yarn-workspaces-설정">Yarn Workspaces 설정</h2>이제 <code>Yarn</code>의 <code>Workspaces</code>를 사용하여 <code>module-a</code>에서 <code>module-b</code>를 사용할 수 있게 만들어 보겠습니다. 우선 루트 폴더(<code>/</code>)에서 다음 명령어를 사용하여 <code>Yarn</code>의 <code>Workspaces</code>를 사용할 준비를 합니다.그럼 루트 폴더에 다음과 같은 내용을 포함한 <code>package.json</code>이 생성되는 것을 확인할 수 있습니다.<div><pre><code>{
 "name": "monorepo",
 "version": "1.0.0",
 "main": "index.js",
 "license": "MIT"
}
</code></pre></div><code>Yarn</code>의 <code>Workspaces</code>를 사용하기 위해서는 이 <code>package.json</code> 파일을 다음과 같이 수정해야 합니다.<div><pre><code>{
 "name": "monorepo",
 "version": "1.0.0",
 "main": "index.js",
 "license": "MIT",
 "private": true,
 "workspaces": {
 "packages": ["src/module-a", "src/module-b"]
 }
}
</code></pre></div>모노레포는 여러 프로젝트를 가지고 있는 단일 코드베이스이기 때문에 <code>npm</code> 레지스트리와 같은 곳에 배포할 필요가 없습니다. 따라서 <code>private</code>을 <code>true</code>로 설정하여 모노레포가 배포되지 않도록 합니다. <code>Yarn V1</code>에서는 필수로 설정해야 하지만, <code>Yarn V2</code>부터는 설정하지 않아도 됩니다. 안전하게 관리하기 위해 <code>private</code>을 <code>true</code>로 설정하는 것을 권장합니다. 물론, 모노레포안에 있는 개별 프로젝트는 배포할 수 있으므로 각각의 프로젝트는 <code>private</code>을 설정하지 않아도 됩니다.<code>Workspaces</code>는 배열(<code>[]</code>)이나 오브젝트(<code>{}</code>)를 설정할 수 있습니다. <code>Yarn</code>에서는 오브젝트 형식으로 작성하는 것을 권장하고 있습니다. <code>Workspaces</code>안에 <code>packages</code>라는 키로 배열을 만들고 각각의 모듈을 추가하였습니다. 이와 같이 각각 지정해도 되지만 다음과 같이 <code>*</code>을 사용하여 간단하게 모든 모듈을 지정할 수도 있습니다.<div><pre><code>{
 "name": "monorepo",
 "version": "1.0.0",
 "main": "index.js",
 "license": "MIT",
 "private": true,
 "workspaces": {
 "packages": ["src/*"]
 }
}
</code></pre></div><h2 id="yarn-workspaces-확인">Yarn Workspaces 확인</h2>이것으로 <code>Yarn</code>의 <code>Workspaces</code>를 사용할 준비가 끝났습니다. 이제 다음 명령어를 실행하여 패키지를 설치합니다.그럼 다음과 같이 루트 폴더에 <code>node_modules</code> 폴더가 생기가 <code>Symlink</code>를 통해 각각의 모듈들이 연결된 것을 확인할 수 있습니다.<div><pre><code>.
├── node_modules
│ ├── module-a -&gt; ../src/module-a
│ └── module-b -&gt; ../src/module-b
├── package.json
├── src
│ ├── module-a
│ │ ├── index.js
│ │ └── package.json
│ └── module-b
│ ├── index.js
│ └── package.json
└── yarn.lock
</code></pre></div>이제 다음 명령어를 실행하여 <code>module-a</code>에서 <code>module-b</code>를 사용할 수 있는지 확인해 보겠습니다.<div><pre><code>node src/module-a/index.js
</code></pre></div>그럼 다음과 같이 문제없이 <code>module-a</code>가 실행되는 것을 확인할 수 있습니다.물론 <code>Symlink</code>로 연결된 것이기 때문에 <code>module-b</code>의 코드를 수정하면 <code>module-a</code>에서도 수정된 코드를 사용할 수 있습니다. <code>src/module-b/index.js</code> 파일을 열고 다음과 같이 수정합니다.<div><pre><code>console.log('module-b!!!');
</code></pre></div>그리고 다음 명령어를 실행하여 변경된 내용이 잘 표시되는 확인합니다.<div><pre><code>node src/module-a/index.js
</code></pre></div>그럼 다음과 같이 변경된 내용이 잘 표시되는 것을 확인할 수 있습니다.<h2 id="gitignore">.gitignore</h2><code>Git</code>으로 소스코드를 관리하고 있다면, <code>.gitignore</code> 파일을 만들고 다음과 같이 수정하여 <code>node_modules</code> 폴더를 <code>Git</code>에서 제외하도록 합니다.<div><pre><code># .gitignore
node_modules
</code></pre></div><h2 id="완료">완료</h2>이것으로 모노레포를 사용하기 위해 <code>Yarn</code>의 <code>Workspaces</code>를 사용하는 방법에 대해서 알아보았습니다. <code>Yarn</code>의 <code>Workspaces</code>는 기본적으로 <code>Symlink</code>로 동작하므로 <code>Symlink</code>에 대해 이해하면 좋습니다. <code>Symlink</code>에 대해 자세히 알고 싶다면 이전 블로그 포스트를 참고해 주시기 바랍니다.<ul><li><a href="https://deku.posstree.com/ko/environment/monorepo/symlink/" target="\_blank">[Monorepo] Symlink</a></li></ul>이제 여러분도 <code>Yarn</code>의 <code>Workspaces</code>를 사용하여 모노레포를 구성해 보시기 바랍니다.<code> 제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다! </code><h2>앱 홍보</h2><div> 지금 보고 계신 블로그를 작성하는 <code>Deku</code>가 개발한 앱을 한번 사용해보세요. <code>Deku</code>가 개발한 앱은 Flutter로 개발되었습니다. 관심있으신 분들은 앱을 다운로드하여 사용해 주시면 정말 감사하겠습니다.</div><h2>책 홍보</h2></article></div>

dev-yakuza

JavaScript로 개발할 프로젝트에서 모노레포(Monorepo)를 사용하기 위한 지식인 Yarn의 Workspaces에 대해서 알아도록 하겠습니다.