<div id="readability-page-1" class="page"><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%93%88">모듈</a></li><li><a href="#%EB%AA%A8%EB%93%88-%EB%B6%88%EB%9F%AC%EC%98%A4%EA%B8%B0">모듈 불러오기</a><ul><li><a href="#file-path">File path</a></li><li><a href="#package-name">Package name</a></li></ul></li><li><a href="#%EB%AA%A8%EB%93%88-%EB%B6%88%EB%9F%AC%EC%98%A4%EA%B8%B0-%EC%9A%B0%EC%84%A0%EC%88%9C%EC%9C%84">모듈 불러오기 우선순위</a></li><li><a href="#%EC%98%88%EC%A0%9C">예제</a></li><li><a href="#%EC%99%84%EB%A3%8C">완료</a></li></ul></div><h2 id="개요">개요</h2>이번 블로그 포스트에서는 모노레포를 이해하기 위한 기본 지식으로 <code>NodeJS</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>[Monorepo] NodeJS의 모듈 불러오기</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>자바스크립트에서 모듈은 코드를 구성하고 재사용 가능한 단위로 분리하는 데 사용되는 기능입니다. 모듈을 사용하면 코드를 더 쉽게 유지보수하고 확장할 수 있습니다. ECMAScript 2015(ES6)부터 자바스크립트에 원래 없었던 모듈 시스템이 도입되었습니다.모듈은 파일 수준에서 코드를 캡슐화하고, 필요한 기능을 다른 파일에서 가져와 사용할 수 있도록 해줍니다. 모듈을 사용하면 전역 스코프의 충돌을 방지하고, 코드의 의존성을 명확하게 관리할 수 있습니다.JavaScript에서 모듈을 사용하기 위해 다음과 같은 키워드를 사용합니다.<ul><li><code>import</code>: 다른 모듈에서 내보낸 기능을 현재 모듈에서 가져옵니다.</li><li><code>export</code>: 현재 모듈에서 외부로 내보낼 함수, 변수, 클래스 등을 지정합니다.</li></ul>JavaScript에서 다음과 같이 모듈을 만들 수 있습니다.<div><pre><code>// math.js
export function add(a, b) {
 return a + b;
}

export function subtract(a, b) {
 return a - b;
}
</code></pre></div>이렇게 만든 모듈은 다음과 같이 사용이 가능합니다.<div><pre><code>// main.js
import { add, subtract } from './math';

console.log(add(5, 3)); // 8
console.log(subtract(7, 2)); // 5
</code></pre></div><h2 id="모듈-불러오기">모듈 불러오기</h2>JavaScript에서 모듈을 불러오는 방법은 크게 두 가지가 있습니다.<ul><li><code>File path</code>를 이용하는 방법</li><li><code>Package name</code>을 이용하는 방법</li></ul><h3 id="file-path">File path</h3><code>File path</code>를 이용하여 모듈을 추가할 때는 다음과 같이 상대 경로(Relative path)와 절대 경로(Absolute path)를 사용할 수 있습니다.<div><pre><code>// Relative path
import { add, subtract } from '../some/file/path/math';

// Absolute path
import { add, subtract } from '/src/math';
</code></pre></div><h3 id="package-name">Package name</h3><code>node_modules</code> 폴더 하위에 있는 모듈은 <code>Package name</code>을 이용하여 불러올 수 있습니다.<div><pre><code>// react module exists in node_modules
import React from 'react';
</code></pre></div><h2 id="모듈-불러오기-우선순위">모듈 불러오기 우선순위</h2><code>NodeJS</code>에서 모듈을 불러올 때, 우선 동일한 폴더에서 해당 모듈이 있는지, 동일한 폴더의 <code>node_modules</code>에 모듈이 확인합니다. 만약, 동일한 폴더에 존재하지 않는다면, 부모 폴더의 <code>node_modules</code> 폴더를 찾게 되고, 부모 폴더의 <code>node_modules</code>에도 존재하지 않는 경우, 부모 폴더의 상위 폴더의 <code>node_modules</code>에서 모듈을 찾게 됩니다.<h2 id="예제">예제</h2><code>NodeJS</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>이제 <code>src</code> 폴더명을 <code>node_modules</code>로 변경하고 다시 실행해 봅니다.<div><pre><code>node node_modules/module-a/index.js
</code></pre></div>그럼 다음과 같이 문제없이 실행되는 것을 확인할 수 있습니다.폴더명이 <code>src</code>인 경우, <code>module-a</code>에서 <code>require('module-b');</code>을 통해 <code>module-b</code>를 불러올 때, 파일 경로가 아니므로 동일한 폴더의 <code>node_modules</code>에서 <code>module-b</code>를 찾게 됩니다. <code>node_modules</code>가 현재 폴더에 존재하지 않으므로, 부모 폴더의 <code>node_modules</code>를 확인합니다. 부모 폴더에도 <code>node_modules</code>가 없기 때문에 <code>MODULE_NOT_FOUND</code> 에러가 발생하는 것을 확인할 수 있습니다.폴더명을 <code>node_modules</code>로 변경한 후, 동일한 코드를 실행하면, <code>module-a</code> 폴더에 <code>node_modules</code>가 존재하지 않기 때문에, 부모 폴더에서 <code>node_modules</code>를 찾게 됩니다. 부모 폴더에는 우리가 이름을 변경한 <code>node_modules</code>가 존재하고, 해당 폴더의 <code>module-b</code>가 존재하기 때문에 문제가 발생하지 않고 잘 실행되는 것을 확인할 수 있습니다.<h2 id="완료">완료</h2>이것으로 <code>NodeJS</code>가 모듈을 불러오는 방법에 대해서 알아보았습니다. <code>NodeJS</code>가 모듈을 불러오는 방법은 모노레포로 프로젝트를 구성하는데 도움이 되는 지식이므로 이번 블로그 포스트에서 소개해 보았습니다. 여러분도 이번 기회에 <code>NodeJS</code>가 모듈을 불러오는 방법에 대해서 다시 한번 이해해 보시기 바랍니다.<code> 제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다! </code><h2>앱 홍보</h2><div> 지금 보고 계신 블로그를 작성하는 <code>Deku</code>가 개발한 앱을 한번 사용해보세요. <code>Deku</code>가 개발한 앱은 Flutter로 개발되었습니다. 관심있으신 분들은 앱을 다운로드하여 사용해 주시면 정말 감사하겠습니다.</div><h2>책 홍보</h2></article></div>

dev-yakuza

JavaScript로 개발할 프로젝트에서 모노레포(Monorepo)를 사용하기 위한 지식으로 NodeJS가 모듈을 불러오는 방법에 대해서 알아보도록 하겠습니다.