<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/symlink/"><span itemprop="name">[Monorepo] Symlink</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="#%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="#symlink">Symlink</a></li><li><a href="#%EC%98%88%EC%A0%9C">예제</a></li><li><a href="#symlink-%EC%83%9D%EC%84%B1">Symlink 생성</a></li><li><a href="#symlink-%ED%99%95%EC%9D%B8">Symlink 확인</a></li><li><a href="#%EC%99%84%EB%A3%8C">완료</a></li></ul></div><h2 id="개요">개요</h2><p>모노레포에서 여러 모듈들의 의존성을 연결할 때, <code>Symlink</code>를 활용하게 됩니다. 이번 블로그 포스트에서는 모노레포를 이해하기 위한 기본 지식인 <code>Symlink(Symbolic Link)</code>에 대해서 알아보도록 하겠습니다.</p><h2 id="블로그-시리즈">블로그 시리즈</h2><p>이 블로그는 시리즈로 제작되었습니다. 다음 링크를 통해 다른 블로그 포스트도 확인해 보시기 바랍니다.</p><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>[Monorepo] Symlink</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="symlink">Symlink</h2><p><code>Symlink</code>는 <code>Symbolic Link</code>의 줄임말로, <code>파일</code> 또는 <code>디렉토리</code>에 대한 <code>바로가기(System shortcut)</code>라고 생각하시면 됩니다.</p><p>Symlink는 주요 OS(macOS, Windows, Linux)에서 지원하는 기본 기능입니다. 또한 <code>NodeJS</code>의 패키지 매니저인 <code>npm</code>과 <code>yarn</code>에서도 지원하고 있습니다.</p><h2 id="예제">예제</h2><p><code>npm</code>과 <code>yarn</code>이 제공하는 <code>Symlink</code> 기능을 확인하기 위한 예제를 만들어 봅시다. 우선, 다음과 같이 폴더와 파일 구조를 생성합니다.</p><div><pre><code><span>.</span>
└── src/
    ├── module-a/
    │   ├── index.js
    │   └── package.json
    └── module-b/
        ├── index.js
        └── package.json
</code></pre></div><p><code>module-a</code>의 <code>package.json</code>은 다음과 같습니다.</p><div><pre><code><span>//</span><span> </span><span>src/module-a/package.json</span><span>
</span><span>{</span><span>
  </span><span>"name"</span><span>:</span><span> </span><span>"module-a"</span><span>,</span><span>
  </span><span>"version"</span><span>:</span><span> </span><span>"1.0.0"</span><span>,</span><span>
  </span><span>"main"</span><span>:</span><span> </span><span>"index.js"</span><span>
</span><span>}</span><span>
</span></code></pre></div><p><code>module-b</code>의 <code>package.json</code>은 다음과 같습니다.</p><div><pre><code><span>//</span><span> </span><span>src/module-b/package.json</span><span>
</span><span>{</span><span>
  </span><span>"name"</span><span>:</span><span> </span><span>"module-b"</span><span>,</span><span>
  </span><span>"version"</span><span>:</span><span> </span><span>"1.0.0"</span><span>,</span><span>
  </span><span>"main"</span><span>:</span><span> </span><span>"index.js"</span><span>
</span><span>}</span><span>
</span></code></pre></div><p>그리고 <code>module-b</code>의 <code>index.js</code>는 다음과 같습니다.</p><div><pre><code><span>// src/module-b/index.js</span>
<span>console</span><span>.</span><span>log</span><span>(</span><span>'</span><span>module-b</span><span>'</span><span>);</span>
</code></pre></div><p>마지막으로 <code>module-a</code>의 <code>index.js</code>는 다음과 같습니다.</p><div><pre><code><span>// src/module-a/index.js</span>
<span>console</span><span>.</span><span>log</span><span>(</span><span>'</span><span>module-a</span><span>'</span><span>);</span>

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

Error: Cannot find module <span>'module-b'</span>
Require stack:
- /Users/deku/temp/temp/src/module-a/index.js
    at Module._resolveFilename <span>(</span>node:internal/modules/cjs/loader:1070:15<span>)</span>
    at Module._load <span>(</span>node:internal/modules/cjs/loader:923:27<span>)</span>
    at Module.require <span>(</span>node:internal/modules/cjs/loader:1137:19<span>)</span>
    at require <span>(</span>node:internal/modules/helpers:121:18<span>)</span>
    at Object.&lt;anonymous&gt; <span>(</span>/Users/deku/temp/temp/src/module-a/index.js:3:1<span>)</span>
    at Module._compile <span>(</span>node:internal/modules/cjs/loader:1255:14<span>)</span>
    at Module._extensions..js <span>(</span>node:internal/modules/cjs/loader:1309:10<span>)</span>
    at Module.load <span>(</span>node:internal/modules/cjs/loader:1113:32<span>)</span>
    at Module._load <span>(</span>node:internal/modules/cjs/loader:960:12<span>)</span>
    at Function.executeUserEntryPoint <span>[</span>as runMain] <span>(</span>node:internal/modules/run_main:83:12<span>)</span> <span>{</span>
  code: <span>'MODULE_NOT_FOUND'</span>,
  requireStack: <span>[</span> <span>'/Users/deku/temp/temp/src/module-a/index.js'</span> <span>]</span>
<span>}</span>
</code></pre></div><h2 id="symlink-생성">Symlink 생성</h2><p><code>Symlink</code> 기능을 확인하기 위해 <code>module-b</code> 폴더로 이동합니다.</p><p>이동한 후, 다음 명령어를 실행하여 <code>Symlink</code>를 사용할 준비를 합니다.</p><p>이후, <code>module-b</code>를 사용하는 <code>module-a</code> 폴더로 이동합니다.</p><p><code>module-a</code> 폴더로 이동하였다면, 다음 명령어를 사용하여 <code>module-b</code>에 대한 <code>Symlink</code>를 생성합니다.</p><p>이렇게 <code>link</code> 명령어를 실행하면 다음과 같이 <code>module-a</code> 폴더의 <code>node_modules</code> 폴더가 생성되고 <code>modules-b</code>의 <code>Symlink</code>가 생성된 것을 확인할 수 있습니다.</p><div><pre><code><span>.</span>
├── index.js
├── node_modules
│   └── module-b -&gt; ../../module-b
└── package.json
</code></pre></div><p>이 <code>Symlink</code> 폴더는 <code>module-b</code>를 복사한 것이 아니라 <code>module-b</code> 자체와 연동이 되어 있습니다. 따라서 <code>src/module-b/index.js</code> 파일을 수정하면 <code>src/module-a/node_modules/module-b/index.js</code> 파일도 같이 수정이 되며, 반대로 <code>src/module-a/node_modules/module-b/index.js</code> 파일을 수정하면 <code>src/module-b/index.js</code> 파일도 같이 수정이 됩니다.</p><h2 id="symlink-확인">Symlink 확인</h2><p>이제 프로젝트의 루트 폴더(<code>/</code>)로 이동한 후, 다음 명령어를 실행하여 모듈을 잘 불러오는지 확인합니다.</p><div><pre><code><span># cd ../..</span>
node src/module-a/index.js
</code></pre></div><p>그럼 다음과 같이 문제없이 잘 실행되는 것을 확인할 수 있습니다.</p><p>이제 <code>src/module-b/index.js</code> 파일 내용을 다음과 같이 수정합니다.</p><div><pre><code><span>console</span><span>.</span><span>log</span><span>(</span><span>'</span><span>module-b!!!!</span><span>'</span><span>);</span>
</code></pre></div><p>수정후, <code>src/module-a/node_modules/module-b/index.js</code> 파일을 열어보면 위에서 수정한 내용이 반영되어 있는 것을 확인할 수 있습니다. 물론, 다음 명령어를 실행하면, 변경된 내용이 잘 출력되는 것을 확인할 수 있습니다.</p><div><pre><code>node src/module-a/index.js

module-a
module-b!!!!
</code></pre></div><h2 id="완료">완료</h2><p>이것으로 모노레포를 사용하기 위한 기초 지식인 <code>Symlink</code>에 대해서 알아보았습니다. 모노레포에서 여러 모듈들의 의존성을 연결할 때, <code>Symlink</code>를 활용하므로 이번 블로그 포스트를 통해 <code>Symlink</code>를 이해해 두면 모노레포를 사용하는데 도움이 될 것입니다.</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)를 사용하기 위한 지식인 Symlink(Symbolic Link)에 대해서 알아보도록 하겠습니다.