<aside> 💡

처음 JavaScript는 모듈을 가져오거나 내보내는 방법이 없어, 하나의 파일에 모든 기능들이 들어가야 했다. CJS, AMD, UMD, ESM이 등장한 이후에는 모듈로 개발하고 배포할 수 있게 되었다.

</aside>

1. CJS (CommonJS)

자바스크립트를 서버에서 사용할 수 있는 큰 이유 중 하나는 모듈화가 가능하기 때문이다. 자바스크립트의 모듈화 명세를 만든 대표적인 그룹 중 'CommonJS'가 있고, 이 CommonJS의 명세가 현재 Node.js의 표준이 되어있다.

Node.js 표준(CommonJS의 명세)이 require와 module.exports이다.

// require을 통해 package/lib 모듈을 변수에 담을 수 있다.
const lib = require('package/lib');

function foo() {
  lib.log('hello world!');
}

// foo 함수를 다른 파일에서 사용할 수 있도록 모듈로 추출한다.
exports.foobar = foo;

CJS의 가장 큰 특징은 동기적으로 동작한다는 점이다. require 호출이 완료될 때까지 다음 코드로 넘어가지 않는다. 서버 환경에서는 파일 시스템에서 모듈을 읽어오는 I/O가 빠르기 때문에 이 방식이 실용적이지만, 브라우저 환경에서는 네트워크를 통해 파일을 가져와야 하므로 동기 방식이 블로킹을 일으켜 적합하지 않다.

// 동기적으로 순서대로 실행된다.
const foo = require('foo');
const bar = require('bar');

foo.log('It is foo');
bar.log('It is bar');

그런데 ES6로 넘어오면서 자바스크립트 자체에서 ES6 Module이라는 이름으로 모듈화를 지원하기 시작했고, 이것이 바로 import와 export이다.

2. ESM (ECMAScript Module)

ES6(ES2015)에 자바스크립트 공식 모듈 기능이 추가되었다. ESM은 ECMAScript 표준에 포함된 모듈 시스템으로, 브라우저와 Node.js 모두에서 공식적으로 지원한다.

import lib from 'package/lib';

function foo() {
  lib.log('hello world!');
}

export { foo as foobar };

2-1) export vs export default

export와 export default는 모듈에서 값을 내보내는 두 가지 방식이다.

named export (export) 는 하나의 파일에서 여러 값을 내보낼 수 있으며, 가져올 때는 반드시 {}로 감싸고 내보낸 이름과 동일하게 써야 한다. as 키워드로 alias를 줄 수 있다.

// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

// main.js
import { add, subtract } from './math.js';
import { add as plus } from './math.js'; // alias 사용

default export (export default) 는 파일당 하나만 사용할 수 있으며, 가져올 때 {}가 필요 없고 임의의 이름으로 받을 수 있다.

// calculator.js
export default function calculate(a, b) {
  return a + b;
}

// main.js
import calc from './calculator.js';       // 이름 자유롭게 지정 가능
import myCalc from './calculator.js';     // 이것도 동일하게 동작