<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="#nodejs%EC%9D%98-%EB%AA%A8%EB%93%88-%EB%B6%88%EB%9F%AC%EC%98%A4%EA%B8%B0">NodeJS의 모듈 불러오기</a></li><li><a href="#%EC%9D%98%EC%A1%B4%EC%84%B1-hoisting">의존성 Hoisting</a></li><li><a href="#%EC%98%88%EC%A0%9C">예제</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="#%EC%9D%98%EC%A1%B4%EC%84%B1-%EC%B6%94%EA%B0%80">의존성 추가</a></li><li><a href="#hoisting%EB%90%9C-%EC%9D%98%EC%A1%B4%EC%84%B1-%EC%82%AC%EC%9A%A9">Hoisting된 의존성 사용</a></li><li><a href="#%EC%9D%98%EC%A1%B4%EC%84%B1-%EB%B2%84%EC%A0%84-%EC%B6%A9%EB%8F%8C">의존성 버전 충돌</a></li><li><a href="#nohoist-%EC%98%B5%EC%85%98">nohoist 옵션</a></li><li><a href="#%EC%99%84%EB%A3%8C">완료</a></li></ul></div><h2 id="개요">개요</h2>이번 블로그 포스트에서는 <code>Yarn</code>의 <code>Workspaces</code>를 사용하여 모노레포를 구성하는 과정에서 각 프로젝트에 필요한 의존성(라이브러리)을 추가할 때, 의존성이 추가되는 과정에서 발생하는 <code>Hoisting</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>[Monorepo] Yarn Workspaces의 Hoisting</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="nodejs의-모듈-불러오기">NodeJS의 모듈 불러오기</h2><code>NodeJS</code>에서 <code>import</code>를 사용하여 모듈을 불러올 때, <code>NodeJS</code>는 우선 루트 폴더의 <code>node_modules</code>를 확인하고 해당 모듈이 없는 경우, 부모의 <code>node_modules</code>를 확인하고, 이를 반복하여 최상위 폴더의 <code>node_modules</code>까지 확인합니다.<ul><li><a href="https://deku.posstree.com/ko/environment/monorepo/module-resolutions/" target="\_blank">[Monorepo] NodeJS의 모듈 불러오기</a></li></ul>이번 블로그 포스트에서 소개할 <code>Hoisting</code>은 <code>NodeJS</code>의 모듈 불러오기 과정을 활용한 기능입니다.<h2 id="의존성-hoisting">의존성 Hoisting</h2><code>Yarn</code>의 <code>Workspaces</code>를 사용하여 모노레포를 구성하는 과정에서 각 프로젝트에 필요한 의존성을 추가하면, 효율적으로 의존성을 관리하기 위해 해당 의존성은 <code>Hoisting</code>되어 최상위 폴더의 <code>node_modules</code>에 설치됩니다.의존성의 <code>Hoisting</code>은 다음과 같은 장점을 가집니다.<ul><li>각 프로젝트에서 공통으로 사용되는 의존성은 한번만 설치되어 메모리를 절약할 수 있습니다.</li><li>동일한 버전의 의존성과 다른 버전의 의존성을 분리하여 관리하기 때문에 의존성의 버전 충돌을 방지할 수 있습니다.</li><li>동일한 의존성을 설치하는 경우, 한번만 설치를 하므로 빠르게 설치가 가능하고 이미 설치된 의존성을 사용하는 경우 추가로 설치하지 않기 때문에 캐싱 효과를 얻을 수 있습니다.</li></ul><h2 id="예제">예제</h2>의존성의 <code>Hoisting</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"
}
</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>마지막으로 루트 폴더의 있는 <code>package.json</code> 파일을 다음과 같이 수정합니다.<div><pre><code>{
 "name": "monorepo",
 "version": "1.0.0",
 "main": "index.js",
 "license": "MIT",
 "private": true,
 "workspaces": {
 "packages": ["src/*"]
 }
}
</code></pre></div><code>Yarn</code>의 <code>Workspaces</code>를 사용하기 위해 <code>package.json</code>의 <code>workspaces</code>에 <code>packages</code>가 설정된 것을 확인할 수 있습니다. <code>Yarn</code>의 <code>Workspaces</code>에 대한 자세한 내용은 다음 블로그 포스트를 참고하시기 바랍니다.<ul><li><a href="https://deku.posstree.com/ko/environment/monorepo/yarn_workspaces/" target="\_blank">[Monorepo] Yarn Workspaces</a></li></ul><h2 id="의존성-설치">의존성 설치</h2>이제 다음 명령어를 실행하여 의존성을 설치합니다.그럼 다음과 같이 <code>node_modules</code>에 <code>module-a</code>와 <code>module-b</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><h2 id="의존성-추가">의존성 추가</h2>이제 <code>module-a</code>에 의존성을 추가하여 의존성이 <code>Hoisting</code>되는지 확인해 봅시다. <code>module-a</code>의 <code>package.json</code> 파일인 <code>src/module-a/package.json</code> 파일을 열고 다음과 같이 수정합니다.<div><pre><code>{
 "name": "module-a",
 "version": "1.0.0",
 "main": "index.js",
 "dependencies": {
 "lodash": "^3"
 }
}
</code></pre></div>그런 다음 다음 명령어를 실행하여 의존성을 설치합니다.그럼 다음과 같이 루트 폴더의 <code>node_modules</code>에 <code>Hoisting</code>된 <code>lodash</code>가 설치된 것을 확인할 수 있습니다.<div><pre><code>.
├── node_modules
│ ├── lodash
│ ├── module-a -&gt; ../src/module-a
│ └── module-b -&gt; ../src/module-b
├── package.json
├── src
│ ├── module-a
│ └── module-b
└── yarn.lock
</code></pre></div><h2 id="hoisting된-의존성-사용">Hoisting된 의존성 사용</h2><code>Hoisting</code>된 의존성을 사용할 수 있는지 알아보기 위해 <code>src/module-a/index.js</code> 파일을 열고 다음과 같이 수정합니다.<div><pre><code>const _ = require('lodash');

console.log('module-a');

require('module-b');

console.log(_.flatten([1, [2, 3, 4]]));
</code></pre></div>그리고 다음 명령어를 실행하여 <code>module-a</code>를 실행합니다.그럼 다음과 같이 <code>lodash</code>가 잘 불러와지는 것을 확인할 수 있습니다.<div><pre><code>module-a
module-b
[ 1, 2, 3, 4 ]
</code></pre></div>이를 통해 <code>Hoisting</code>된 의존성을 사용할 수 있음을 확인할 수 있습니다.<h2 id="의존성-버전-충돌">의존성 버전 충돌</h2>동일한 의존성의 다른 버전이 설치된 경우, 어떻게 동작하는지 확인해 봅시다. <code>module-b</code>의 <code>package.json</code> 파일인 <code>src/module-b/package.json</code> 파일을 열고 다음과 같이 수정합니다.<div><pre><code>{
 "name": "module-b",
 "version": "1.0.0",
 "main": "index.js",
 "dependencies": {
 "lodash": "^4"
 }
}
</code></pre></div>그런 다음, 다음 명령어를 실행하여 의존성을 설치합니다.그럼 다음과 같이 버전이 다른 의존성은 모듈 폴더안에 <code>node_modules</code>에 설치되는 것을 확인할 수 있습니다.<div><pre><code>.
├── node_modules
│ ├── lodash
│ ├── 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
│ ├── node_modules
│ │ └── lodash
│ └── package.json
└── yarn.lock
</code></pre></div><h2 id="nohoist-옵션">nohoist 옵션</h2><code>Hoisting</code>된 의존성을 사용하지 않고, 각 프로젝트의 <code>node_modules</code>에 의존성을 설치하고 싶은 경우, <code>nohoist</code> 옵션을 사용할 수 있습니다. 루트 폴더의 <code>package.json</code> 파일을 열고 다음과 같이 <code>nohoist</code> 옵션을 추가합니다.<div><pre><code>{
 "name": "monorepo",
 "version": "1.0.0",
 "main": "index.js",
 "license": "MIT",
 "private": true,
 "workspaces": {
 "packages": ["src/*"],
 "nohoist": ["**/lodash"]
 }
}
</code></pre></div>그리고 <code>yarn.lock</code> 파일을 삭제한 다음, 다음 명령어를 실행하여 의존성을 설치합니다.<div><pre><code># rm yarn.lock
yarn install
</code></pre></div>그럼 다음과 같이 <code>lodash</code>가 <code>Hoisting</code>되지 않고 각 프로젝트의 <code>node_modules</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
│ │ ├── node_modules
│ │ │ └── lodash
│ │ └── package.json
│ └── module-b
│ ├── index.js
│ ├── node_modules
│ │ └── lodash
│ └── package.json
└── yarn.lock
</code></pre></div><h2 id="완료">완료</h2>이것으로 <code>Yarn</code>의 <code>Workspaces</code>를 사용하여 모노레포를 구성하는 과정에서 각 프로젝트에 필요한 의존성을 추가할 때, 의존성이 추가되는 과정에서 발생하는 <code>Hoisting</code>에 대해서 알아보았습니다. 또한 의존성이 <code>Hoisting</code>되는 것을 방지하기 위한 <code>nohoist</code> 옵션에 대해서도 알아보았습니다.여러분도 <code>Yarn</code>의 <code>Workspaces</code>를 사용하여 모노레포를 구성하는 과정에서 의존성의 <code>Hoisting</code>과 <code>nohoist</code>을 활용하여 효율적으로 의존성을 관리해 보시기 바랍니다.<code> 제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다! </code><h2>앱 홍보</h2><div> 지금 보고 계신 블로그를 작성하는 <code>Deku</code>가 개발한 앱을 한번 사용해보세요. <code>Deku</code>가 개발한 앱은 Flutter로 개발되었습니다. 관심있으신 분들은 앱을 다운로드하여 사용해 주시면 정말 감사하겠습니다.</div><h2>책 홍보</h2></article></div>

dev-yakuza

Yarn의 Workspaces를 사용하여 모노레포를 구성하는 과정에서, 각 프로젝트에 필요한 의존성을 추가할 때 동작하는 Hoisting에 대하여 알아도록 하겠습니다.

[Monorepo] Yarn Workspaces의 의존성 Hoisting

댓글