ES Module과 CommonJS의 차이점을 설명해주세요.

ES Module은 import/export 기반의 정적 모듈 시스템이라 트리 쉐이킹과 정적 분석에 유리합니다. CommonJS는 require/module.exports 기반으로 런타임 로딩 패턴에 강하지만 최적화에는 불리할 수 있습니다.

핵심 개념

핵심 기준은 정적 분석 가능 여부와 로딩 방식입니다. 이 개념은 단순한 용어가 아니라, 실제 코드나 시스템에서 반복적으로 생기는 문제를 다루기 위해 등장했습니다.

JavaScript는 실행 문맥, 비동기 흐름, 참조 관계가 코드 동작에 직접 영향을 주는 언어입니다. 그래서 문법을 외우는 것보다 값이 언제 결정되고 어떤 순서로 실행되는지 이해하는 것이 중요합니다.

동작 흐름

1. 먼저 어떤 문제가 있는지 확인합니다.
2. 이 개념이 그 문제를 어떤 기준으로 나누거나 해결하는지 봅니다.
3. 실제 코드에서는 입력, 상태, 실행 순서, 비용이 어떻게 바뀌는지 확인합니다.
4. 마지막으로 한계와 부작용을 함께 점검합니다.

실제 예시

// ES Module
import { readFile } from "node:fs/promises";
export async function load(path) {
  return readFile(path, "utf8");
}

// CommonJS
const fs = require("node:fs");
module.exports = { fs };

ESM은 정적 구조라 번들러가 분석하기 쉽고, CommonJS는 런타임 로딩 패턴이 자연스럽습니다. 프로젝트 런타임과 번들 환경에 맞춰 선택합니다.

실무에서 주의할 점

• 암묵적 변환이나 실행 문맥에 기대면 작은 리팩터링에도 동작이 달라질 수 있습니다.
• 비동기 코드에서는 실행 순서와 에러 전파 경로를 반드시 확인해야 합니다.
• 브라우저 이벤트나 타이머를 사용했다면 정리(cleanup) 시점을 놓치지 않는 것이 좋습니다.

함께 연결해서 보면 좋은 키워드

JS, Module, ESM, CommonJS

정리

한 줄로 정리하면, ES Module은 import/export 기반의 정적 모듈 시스템이라 트리 쉐이킹과 정적 분석에 유리합니다. CommonJS는 require/module.exports 기반으로 런타임 로딩 패턴에 강하지만 최적화에는 불리할 수 있습니다. 실무에서는 개념을 적용하는 조건과 적용하지 않았을 때 생기는 문제까지 함께 이해하는 것이 중요합니다.

ESM과 CommonJS의 핵심 차이

ES Module은 import/export를 사용하는 표준 모듈 시스템이고, CommonJS는 Node.js에서 오래 사용된 require/module.exports 기반 모듈 시스템입니다.

// ESM
import { add } from './math.js';
export const result = add(1, 2);

// CommonJS
const { add } = require('./math');
module.exports = { result: add(1, 2) };

동작 방식 차이

실무 주의사항

Node.js에서는 package.json의 type, 파일 확장자 .mjs/.cjs, 번들러 설정에 따라 해석 방식이 달라집니다. ESM에서 CommonJS를 가져오거나 반대로 가져올 때 default export 형태가 예상과 다를 수 있으므로 라이브러리 문서를 확인해야 합니다.