<aside> 💡

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

</aside>

1. CJS (CommonJS)

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

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

ex)

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

// 가져온 모듈을 아래와 같이 사용할 수 있다.
function foo () {
  lib.log('hello world!');
}

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

// 동기로 동작하는 특징을 가진다.
// 동기적인 특징을 가지므로 서버사이드에 사용하기 용이하다. 
// Node.js가 CommonJS를 채택하여 사용하고 있다.
// (server 구축한 파일들을 보면 require로 모듈을 불러오고 있다.)

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에 JavaScript 모듈 기능이 추가되었다.

import lib from 'package/lib';

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

export {
  foobar: foo
};

export , export default 차이점

3. JavaScript 자체 모듈 시스템