JS의 모듈과 CommonJS, ES Modules

sham·2025년 1월 13일

개요

JS에서 모듈은 하나의 파일을 의미하며, 대개 클래스 하나 혹은 복수의 함수로 구성된 라이브러리 하나로 구성된다.

CommonJS와 ES Modules은 JS에서 가장 자주 마주치게 될 키워드일텐데, 이것이 무엇인지, 어떤 차이점이 있는지에 대해 다시 한 번 짚고 넘어가보자.

과거에는 JS의 크기도 작고 기능도 단순했기에 굳이 모듈 관련 표준 문법을 만들 필요가 없었다.

하지만 스크립트의 크기가 커지고 기능도 복잡해지며 모듈 시스템의 필요성이 생기자 여러 시행착오를 거치며 AMD, CommonJS, UMD라는 모듈 시스템들이 등장하였다.

모듈 시스템은 2015년에 표준으로 등재되었으며, 관련 문법은 진화를 거듭해 이제는 대부분의 주요 브라우저와 Node.js에서 모듈 시스템을 지원하고 있다.

// add.js
module.exports.add = (x, y) => x + y;

// main.js
const { add } = require('./add');

add(1, 2);

Node.js에서 JavaScript 모듈화를 지원하기 위해 만들어진 표준이다.

require와 module.exports를 사용해 모듈을 가져오고 내보내는 방법으로 사용한다.
동기적으로 작동하며, 모듈이 로드될 때까지 코드 실행이 중단된다.
모듈 전체를 하나의 객체로 내보낸다.
Node.js 런타임에서 모듈 관리를 위해 만들어졌기에 브라우저에서는 동작하지 않는다.
- require나 module.exports를 브라우저가 이해하지 못하기 때문. type="module" 등의 처리가 필요.
사용하지 않을 코드를 제거하는 트리쉐이킹이 불가능에 가깝다.
- 동기적으로 작동한다는 것은 런타임에 실행되어 어떤 모듈을 가져올지 결정한다는 것인데, 번들러가 정적으로 분석할 수가 없게 된다.
- 전체를 내보내기에 사용하지 않을 코드를 명확하게 판단하기 어렵다.

// add.js
export function add(x, y) {
  return x + y
}

// main.js
import { add } from './add.js';

add(1, 2);

ES6(ES2015)에서 표준 모듈 시스템을 도입하면서 탄생하였다.

ESM에서 CJS를 import 할 수 있지만, CJS에서 ESM을 require 할 수는 없다. CJS는 Top-level Await을 지원하지 않기 때문…