CommonJS와 ES Module의 차이점

CommonJS와 ES Module(ESM)은 자바스크립트에서 모듈을 관리하고 불러오는 두 가지 주요 방식이며, 사용 환경과 특징에서 차이가 있다.

CommonJS

• 도입 배경: Node.js에서 모듈을 관리하기 위해 도입된 모듈 시스템
• 특징:
  1. 동기적 로딩: 모듈을 require로 가져올 때, 해당 모듈이 완전히 로드될 때까지 코드 실행이 멈춘다.
  2. 문법:
     • 가져오기: const module = require('module');
     • 내보내기: module.exports = value; 또는 exports.property = value;
  3. 사용 환경: 주로 Node.js 환경에서 사용되며, 브라우저에서는 번들러(예: Webpack, Browserify)를 통해 사용할 수 있다.
  4. 모든 코드가 런타임 시점에 평가되기 때문에 동적 로딩이 가능하다.
• 단점:
  • 동기적 로딩은 브라우저 환경에서 비효율적일 수 있으며, 모듈 의존성을 정적으로 분석하기 어려워 최적화에 제약이 있을 수 있다.

 

ES Module (ESM)

• 도입 배경: ES6부터 도입된 자바스크립트의 공식 표준 모듈 시스템
• 특징:
  1. 비동기적 로딩: 브라우저와 Node.js 환경 모두에서 비동기적으로 모듈을 로드한다.
  2. 문법:
     • 가져오기: import something from 'module';
     • 내보내기: export default value; 또는 export const name = value;
  3. 정적 분석 가능:
     • ESM은 코드를 컴파일 시점에 분석할 수 있으므로, 트리 쉐이킹(사용하지 않는 코드 제거) 같은 최적화가 가능하다.
  4. 브라우저와 서버 환경 모두에서 네이티브로 지원되며, 기본적으로 엄격 모드(strict mode)가 적용된다.
• 단점:
  • ES Module은 파일 확장자와 디렉터리 구조에 민감하고, 브라우저에서 사용 시 type="module" 속성을 <script> 태그에 명시해야 한다.

 

주요 차이점

특성	CommonJS	ES Module (ESM)
도입 시점	Node.js 초기	ES6(ECMAScript 2015)
로딩 방식	동기적	비동기적
문법	require, module.exports	import, export
정적 분석	불가능	가능
사용 환경	Node.js 중심	브라우저 & Node.js
최적화 (트리 쉐이킹)	지원하지 않음	지원
동적 로딩	지원 (require() 호출 시점)	미지원 (import()는 제한적)

 

CommonJS는 주로 서버(Node.js) 환경에서 사용되고, 동기적으로 동작하기 때문에 빠른 로딩이 요구되는 서버 작업에 적합하다.

ES Module은 브라우저와 서버에서 모두 사용할 수 있는 표준 모듈 시스템으로, 비동기적 로딩과 정적 분석을 지원하여 최적화에 유리하다.