🙌안녕하세요🙌

자바스크립트로 프론트, 백 모두 작성하다보면 모듈 사용 방식이 자주 헷갈리곤 하는데요,
사용법을 좀 더 알기 쉽게 머리속에 넣기위해 각각의 파트별로 정리해보려고 합니다.

이 글을 보시고 자바스크립트의 모듈 시스템에 대해 쉽게 이해가 되었으면 좋겠습니다!

CommonJS

---

CommonJS는 웹브라우저 밖의 JavaScript를 위한 모듈 생태계의 규칙을 설립하기 위한 프로젝트라고 합니다.
웹브라우저 밖의 JavaScript라 하면 대표적으로 Nodejs가 있겠네요.
예상하시듯이, Nodejs는 기본적으로 CommonJS의 규칙을 따릅니다.

export

---

CommonJS의 모듈 제공 방식은 두가지가 있습니다.
module.exports와 exports

module.exports

---

먼저, module이라는 키워드는 공식 문서에 아래와 같이 설명되어있습니다.
현재 모듈을 나타내는 자유 변수, 빈 객체로 초기화 되어있는 상태
즉, module은 현재 모듈에 대한 정보를 담은 일종의 빈 Object({})라는 뜻입니다.

기본 문법은 다음과 같습니다.
module.exports = expression
자바스크립트에서 식은 곧 값이기 때문에, 값으로 허용되는 어떤 것도 export할 수 있습니다.

// utils.js
const PI = 3.14;
module.exports.PI = PI;

// app.js
const utils = require('./utils');
console.log(utils.PI); // 3.14

module이 일종의 객체라고 했었던 것 기억하시죠?
그럼 module.exports = 3.14로 바꾸면 어떻게 될까요?

// utils.js
module.exports = 3.14;

// app.js
const utils = require('./utils');
console.log(utils); // 3.14
console.log(utils.PI); // undefined

위와 같은 결과를 얻을 수 있을거에요. 그냥 객체라고 생각하시면 이해가 빠르실겁니다!

exports

---

기본적으로 exports 키워드도 module.exports와 비슷한 방식으로 동작합니다.

// 📁 utils.js

exports.PI = 3.14;
console.log(module.exports === exports); // true

console.log(exports); // { PI: 3.14 }

즉 exports는 module 객체의 exports를 참조하는 형식으로 이루어져있다고 볼 수 있습니다.

module.exports = "done";
exports.phrase = "done";

console.log(module.exports); // ???

그럼 위와 같은 경우는 어떨까요?
이 포스팅을 보고 계신 분이라면, Call By Reference에 대해 들어보셨을 거라고 생각합니다.
원시타입은 값을 기억하지만, 참조타입은 주소를 기억한다는 것, 기억나시나요??
exports는 modules.exports라는 객체를 참조하고 있는데,
module.exports가 값으로 덮어씌워지면 exports가 참조하고있는 객체는 더 이상 module.exports와는 전혀 상관없는 친구가 되겠죠?

이 때문에, exports는 module.exports = expression과는 함께 사용할 수 없습니다.
그러나, module.exports.key = value와 같이 프로퍼티를 추가하면 함께 사용할 수 있습니다.

import

---

var math = require('./math');

console.log(math.sum(1,2));

간단하죠?
같은 방법으로 4가지 경우를 커버할 수 있습니다.
1. File Module
2. Folder as Module
3. node_modules
4. Global Directory

File Modules

---

상대경로에 있는 파일 중 확장자가 .js, .json, .node인 파일을 모듈로써 불러옵니다. 확장자는 생략할 수 있습니다.

// data.json
{ "data": "Hello World!" }

// utils.js
module.exports.PI = 3.14

// app.js
const data = require('./data');
const utils = require('./utils');

console.log(data); // { data: "Hello World!" }
console.log(utils.PI); // 3.14

/로 시작하면 절대경로로, ./혹은 ../로 시작한다면 상대경로로 찾습니다.
아무것도 없이 시작할 경우에는, node_modules 폴더에서 찾습니다.

경로에서 찾을 수 없을 경우에 require()은 에러를 발생시키며 MODULE_NOT_FOUND라는 에러명이 나타날 것입니다.

Folder as Modules

---

폴더를 require() 구문을 이용해 import할 때는 2가지 방법이 있습니다.
1. 디렉토리의 루트에 main모듈을 명시한 package.json 파일을 통한 방법
ex)

// package.json
{ 
  "name": "DIY-library",
  "main": "./lib/DIY-library"
}

package.json파일이 없거나, main 모듈의 엔트리포인트가 없을 때 혹은 resolve되지 않을 때,
다음 방법을 따릅니다.
2. 디렉토리에서 index.js 나 index.node 파일을 찾습니다.

위의 방법이 모두 실패하면
Node.js는 Error: Cannot find module 'Module_Name'을 출력할 것입니다.

from node_modules

---

require()로 넘겨진 인자가 코어 모듈(언어 자체에 내장 된 모듈)이 아니라면, 그리고 /, ./, ../로 시작하지 않는다면 Node.js는 현재 모듈의 상위 디렉토리에 /node_modules를 붙이고 그 위치부터 모듈을 찾기 시작합니다.

찾지 못하면, 더 상위 디렉토리로, 파일시스템의 루트경로(/)에 닿을 때까지 반복합니다.

예를 들어 경로가 /home/ry/projects/foo.js인 파일에서 require('bar.js')를 호출하였을 때, Node.js는 아래의 순서대로 모듈을 찾습니다.

• /home/ry/projects/node_modules/bar.js
• /home/ry/node_modules/bar.js
• /home/node_modules/bar.js
• /node_modules/bar.js

모듈이름 뒤에 경로를 추가해서 특정 파일이나 서브모듈을 불러올 수 있습니다.
ex) require('DIY-library/path/to/file')
DIY-library를 먼저 찾은다음 path/to/file은 상대경로로써 적용됩니다.

global

---

위에 나열 된 방법들로 모듈을 찾을 수 없고, NODE_PATH 환경 변수가 콜론(:)으로 분리된 절대경로의 목록에 설정 되어있다면 Node.js는 그 경로에서 모듈을 찾습니다.

Windows의 경우에는 콜론대신 세미콜론(;)입니다.

NODE_PATH는 현재의 Module resolution 알고리즘이 정립되기 전에 모듈 로드를 지원하기 위하여 만들어졌다고 합니다.

NODE_PATH는 여전히 지원되는 중이며, NODE_PATH설정된다는 점에 대해서 주의하지 않으면, 프로그램이 의도치 않은 동작을 할 수 도 있습니다. 모듈을 NODE_PATH에서 가져오게되거나하여 다른 버전, 혹은 아예 다른 모듈이 로드 될 수도 있기 때문입니다.

추가적으로, 아래 목록의 전역 디렉토리에서 모듈을 찾습니다.
1. $HOME/.node_modules
2. $HOME/.node_libraries
3. $PREFIX/lib/node
$HOME은 사용자의 home 디렉토리, $PREFIX는 Node.js에서 설정한 node_prefix입니다.

AMD(Asynchronous Module Definition)

---

Asynchronous Module Definition의 약자로써, 비동기적 모듈 선언이라는 뜻입니다.
AMD는 모듈 선언의 방법론이고, 이것을 구현한 대표적인 모듈 시스템은 Require.js입니다.

클라이언트 사이드에서 모듈을 로딩할 때, 스크립트 태그를 이용해서 로딩하는 것은, 로딩이 완료될 때까지 브라우저가 프리징되어 사용자 경험에 안좋은 영향을 끼쳤습니다. 그래서 비동기적으로 모듈 로딩을 할 필요가 있었기 때문에 태어났습니다.

하지만! 이전에 태어난 배경이 그랬던 것이지, 최근에는 대안이 존재합니다.

1. ESM - 자바스크립트 내장 모듈 시스템
2. Webpack과 같은 bundler의 모듈 로드

그래도 일단 사용하는 방법은 알아두어야겠죠❓

<!-- index.html  -->
<html>
  ...
  <script src="require.js"></script>
  <script src="app.js"></script>
  ...
</html>

// myModule.js
define(['jquery', 'math'], function($, Math) {
  console.log($);
  console.log(Math);
  return {
    a: $,
    b: Math,
  }
});

첫번째 인자에는 가져올 모듈 이름의 배열, 두번째 인자에는 콜백함수를 넣으면 됩니다.

이렇게 만든 모듈 require해서 사용할 수 있습니다.

require(['myModule'], function(mod){
  console.log(mod.a) // jquery
  console.log(mod.b) // Math
});

ESM(ECMAScript Module)

---

ESM은 ES6부터 지원되는 자바스크립트 자체 모듈 시스템입니다.
HTML 파일에서 직접 가져오는 코드는 아래와 같이 작성합니다.

<html>
  //...
  <script type="module" src="lib.mjs"></script>
  <script type="module" src="app.mjs"></script>
  //...
</html>

ES6모듈 파일의 확장자는 모듈임을 명확하게 하기 위해 mjs를 사용한다고 하네요!

그럼 js 파일 내에서 사용하는 방법을 알아볼까요?

export

---

모듈밖으로 내보낼 때는 export키워드를 이용합니다.

// module.mjs
export const pi = Math.PI;

export function square(x){
  return x * x;
}

export class Person {
  constructor(name) {
    this.name = name;
  }
}

차례로 변수, 함수, 클래스를 내보내는 방법입니다. 간단하죠?
또는 한번에 모아서 내보내는 방법도 있습니다.

// module.mjs
const pi = Math.PI;

function square(x) {
  return x * x;
}

class Person {
  constructor(name) {
    this.name = name;
  }
}

export { pi, square, Person };

import

---

모듈을 가져올 때는 import키워드를 사용합니다.
export된 식별자를 그대로 가져오며 확장자는 생략 가능합니다(mjs).

// app.mjs
import { pi, square, Person } from './module.mjs';

console.log(pi); // 3.14...
console.log(square(10)); // 100
console.log(new Person('Lee')); Person { name: 'Lee' }

어떤가요? 제가 느끼기엔 다른 모듈 시스템보다 훨씬 직관적이고 깔끔해보이네요👍

한번에 내보내는 방법이 있었으니 한번에 가져오는 방법도 있겠죠?

// app.js
import * as lib from './module.mjs';

console.log(lib.pi);
console.log(lib.square(10));
console.log(new lib.Person('Lee'));

이렇게하면 export된 데이터들을 한번에 가져올 수 있습니다!

또, 가져오면서 자신이 원하는 이름으로 변경해서 가져올 수도 있습니다.

// app.js
import { pi as PI, square as sq, Person as P } from './module.mjs';

console.log(PI);
console.log(sq(2));
console.og(new P('Lee'));

export default

---

하나의 데이터만을 export할 때는 default 키워드를 사용합니다.

// module.mjs
export default function (x) {
  return x * x;
}

deafult키워드를 사용하는 경우에는 var, let, const를 사용할 수 없습니다.

// module.mjs
export default () => {}; // OK

export default const foo = () => {}; // Error

default키워드로 export된 모듈은 {} 없이 임의의 이름으로 import합니다.

// module.mjs
import square from './module.mjs';

console.log(square(3)); // 9

UMD(Univerasal Module Definition)

---

UMD는 AMD, CommonJS, window에 추가하는 방식에까지 모두 적용할 수 있는 모듈 패턴입니다.
AMD는 define, CommonJS는 module.exports를 사용한다는 점을 이용하는 것입니다.

// module.js
(function(root, factory){
  if (typeof define === 'function' && define.amd) {
    define(['jquery', 'myModule'], factory); // require.js
  } else if (typeof module === 'object' && module.exports) {
    module.exports = factory(require('jquery'), require('myModule')); // CommonJS
  } else {
    root.myModule = factory(root.$, root.mod); // window
  }
}(this, function($, mod) {
  return {
    a: $,
    b: mod,
  };
});

이렇게 자바스크립트의 여러 모듈 시스템에 대해 알아보았습니다!
유익한 시간이셨나요? 이 포스트가 여러분이 모듈 시스템에 대해 이해하시는데 도움이 됐으면 좋겠습니다. 다음 포스팅에서 또 만나요🙌