이들은 코드를 여러 파일로 나누기 위한 JavaScript의 두 가지 모듈 시스템입니다.
ES Modules (ESM) — 현대적 표준
js
// import / export, 브라우저와 최신 Node에서 사용
import { sum } from "./math.js";
import defaultThing from "./thing.js";
export const x = 1;
export default function () {};
이들은 코드를 여러 파일로 나누기 위한 JavaScript의 두 가지 모듈 시스템입니다.
// import / export, 브라우저와 최신 Node에서 사용
import { sum } from "./math.js";
import defaultThing from "./thing.js";
export const x = 1;
export default function () {};
const { sum } = require("./math");
module.exports = { x: 1 };
| ES Modules | CommonJS | |
|---|---|---|
| 문법 | import/export | require/module.exports |
| 로딩 | 정적, 비동기 | 동적, 동기 |
| 분석 가능성 | ✅ → 트리 쉐이킹 | ❌ 더 어려움 |
| 바인딩 | 라이브(읽기 전용) | 복사된 값 |
최상위 this | undefined | module.exports |
**정적(static)**이라는 것은 ESM의 import가 파싱 시점에 알려진다는 뜻으로, 번들러가 트리 쉐이킹(tree-shaking)(사용되지 않는 export 제거)을 할 수 있게 합니다. CommonJS의 require는 동적(조건부로 require 가능)이라서 그만큼 쉽게 분석할 수 없습니다.
{ "type": "module" } // package.json에서, 또는 .mjs 확장자 사용
CommonJS에서 ESM 전용 패키지를 require()할 수 없으며, 둘을 섞으면 거친 부분이 있습니다. ESM의 import는 또한 **라이브 바인딩(live binding)**입니다 — export 측에서 값을 변경하면 import 측에서 새 값을 봅니다(CJS는 스냅샷 복사본을 줍니다).
ESM이 미래입니다(브라우저 네이티브, 트리 쉐이킹 가능, 최상위 await).
새 코드에는 ESM을 선호하되, Node 생태계의 상당 부분이 여전히 CJS를 사용하므로 CJS도 이해하세요.