CommonJS와 ES Module(ESM) 차이점
자바스크립트에서 모듈을 관리하고 불러오는 방식에는 CommonJS와 ES Module(ESM)이 존재한다.
두 방식은 모두 코드의 구조화와 재사용성을 높이기 위한 목적을 가지고 있으나, 로딩 방식과 적용 환경에서 뚜렷한 차이를 보인다.
CommonJS
CommonJS는 주로 Node.js 환경에서 사용되는 모듈 시스템으로, 동기적 로딩(synchronous loading) 방식을 사용한다.
즉, 모듈이 완전히 로드될 때까지 이후 코드의 실행이 일시적으로 중단된다.
모듈을 불러올 때에는 require 키워드를, 내보낼 때에는 module.exports를 사용한다.
이 방식은 서버 측 환경에서 널리 활용되어 왔으며, 브라우저 환경에서는 Webpack, Browserify와 같은 번들러를 통해 사용할 수 있다.
1
2
3
// CommonJS 예시
const fs = require('fs');
module.exports = { readFile: fs.readFileSync };
ES Module (ESM)
ES Module(ESM)은 ECMAScript 2015(ES6)에서 도입된 공식 표준 모듈 시스템이다. 브라우저와 Node.js 환경 모두에서 사용할 수 있으며, 비동기적 로딩(asynchronous loading)을 지원한다.
모듈을 가져올 때에는 import, 내보낼 때에는 export 키워드를 사용한다. 또한 ESM은 정적 분석(static analysis)이 가능하므로, 트리 쉐이킹(Tree Shaking)과 같은 빌드 최적화 과정에 유리하다.
🔍 정적 분석 (Static Analysis) : 코드를 실행하지 않고, 코드 자체를 분석하는 과정 🔍 트리 쉐이킹 (Tree Shaking) : 사용되지 않는 코드(dead code)를 제거하는 최적화 기법
1
2
3
// ES Module 예시
import fs from 'fs';
export const readFile = fs.readFileSync;
CommonJS와 ESM의 비교
| 구분 | CommonJS | ES Module (ESM) |
|---|---|---|
| 도입 시기 | 초기 Node.js 모듈 시스템 | ECMAScript 2015(ES6) 공식 표준 |
| 로딩 방식 | 동기적 로딩 | 비동기적 로딩 |
| 문법 | require, module.exports | import, export |
| 사용 환경 | 주로 Node.js | 브라우저 및 Node.js |
| 트리 쉐이킹 | 불가능 | 가능 |
| 주요 특징 | 서버 측 중심 | 브라우저 및 서버 모두 지원 |
최근 동향
Node.js는 버전 12부터 ESM을 네이티브로 지원하기 시작하였다. 이에 따라 브라우저와 서버 간의 모듈 호환성을 고려한 ESM 기반 프로젝트가 점차 증가하고 있다.
특히 ESM은 비동기 로딩, 정적 분석 기반의 최적화, 트리 쉐이킹 지원 등의 이점을 지니고 있어, 현대 자바스크립트 개발 환경에서 점점 더 널리 채택되고 있는 추세이다.