JavaScript 모듈 시스템 완전 이해하기 – CommonJS vs ESModules

들어가며

JavaScript는 과거에는 별도의 모듈 시스템 없이 전역 스코프에서만 코드를 관리했지만,
대형 프로젝트가 늘어나면서 코드 분리와 재사용을 위한 모듈 시스템이 필수가 되었습니다.

대표적인 모듈 시스템으로는 CommonJS(Node.js 중심)와 ESModules(ESM)(브라우저 표준)이 있으며,
각각의 동작 방식과 문법 차이를 정확히 이해해야 환경에 맞게 코드를 구성할 수 있습니다.

 

 

---

1. CommonJS란?

Node.js에서 사용되는 대표적인 모듈 시스템 (동기 방식)

문법

// math.js
function add(x, y) {
  return x + y;
}
module.exports = { add };

// app.js
const math = require("./math");
console.log(math.add(2, 3));

• require()로 모듈을 동기적으로 불러옴
• module.exports로 외부에 공개

특징

• 동기 로딩 기반 (파일 시스템 중심)
• require는 실행 시점에 평가
• __dirname, __filename 등 Node.js 전용 전역 변수 사용 가능

 

---

2. ESModules (ESM)이란?

브라우저와 최신 Node.js 환경에서 사용 가능한 표준 모듈 시스템 (비동기 방식)

문법

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

// app.js
import { add } from "./math.js";
console.log(add(2, 3));

• import, export 키워드 사용
• 정적 분석 가능 (빌드 도구가 의존성 분석 가능)

특징

• 비동기 로딩 가능 (type="module", 또는 .mjs 확장자 필요)
• Tree Shaking 최적화 가능
• top-level await 사용 가능 (ES2022+)

 

---

3. 주요 차이점 정리

항목CommonJSESModules

사용 환경	Node.js (기본)	브라우저, Node.js 12+
로딩 방식	동기 (require)	비동기 (import)
문법	module.exports, require()	export, import
평가 시점	실행 시점	파싱 시점 (정적 분석)
파일 확장자	.js	.mjs, .js (package.json 설정 필요)

 

---

4. Node.js에서 ESM 사용하기

// package.json
{
  "type": "module"
}

또는 파일 확장자를 .mjs로 변경

주의할 점

• __dirname, require() 사용 불가 → 대신 import.meta.url, URL() 사용
• import 경로에 확장자 필수 (.js)

 

---

5. 혼합 사용 불가 주의

• CommonJS에서 ESModule을 import할 수 없음 (require()로 ESM import 불가)
• ESM에서 CommonJS 모듈은 import createRequire 방식으로 우회 사용

// esmFile.mjs
import { createRequire } from "module";
const require = createRequire(import.meta.url);
const fs = require("fs");

 

---

마치며

모듈 시스템은 JavaScript 애플리케이션의 구조를 결정짓는 핵심 요소입니다.
Node.js 개발자라면 CommonJS,
프론트엔드 또는 현대적 Node.js 개발자라면 ESModules를 기본으로 사용하게 됩니다.

두 시스템의 문법과 동작 차이를 명확히 이해하면,
트랜스파일링 없이도 환경에 맞는 모듈 구조를 유연하게 설계할 수 있습니다.

📂 다음 글에서는:

• ESModules에서 동적 import 사용하기 (import())
• 번들러에서의 ESM 처리 방식 (Vite, Webpack)
• tsconfig + module 설정 가이드

등을 이어서 다루겠습니다.

바로기기 > ESModules심화1

 

📌 이전 글 다시보기

👉 자바스크립트의 이벤트 루프와 태스크 큐 완전 이해하기 

📌 다음 글 미리보기
👉 프레임워크 없이 바닐라 JS로 SPA 만들기 – 라우팅, 렌더링, 상태관리 직접 구현해보기

📚 JavaScript 시리즈 전체 보기
👉 https://jobreview.tistory.com/category/language/javascript