개발하는데 다 이유가 있겠지

`CommonJS`와 `ES Module(ESM)`은 자바스크립트에서 모듈을 관리하는 로드하는 방식입니다.

 

CommonJS

`CommonJS`는 Node.js 환경에서 사용되며, 모듈을 동기적으로 로드하는 역할을 합니다. 모듈이 전부 로드될 때까지 다음 코드가 실행되지 않는 방식입니다. `require`키워드를 사용해 모듈을 가져오고, `module.exports`를 통해 모듈을 내보냅니다.

주로 서버 측에서 사용됐지만, 클라이언트 환경에서도 번들러를 통해 사용할 수 있습니다.

// CommonJS 방식
// 모듈 내보내기
module.exports = {
    add: function(a, b) {
        return a + b;
    }
};

// 모듈 가져오기
const math = require('./math');

 

ES Module(ESM)

`ES Module`은 자바스크립트의 공식 표준 모델 시스템으로, ECMAScript2015(ES6)부터 도입되었습니다. 브라우저와 Node.js 환경 모두에서 사용할 수 있으며, 모듈을 비동기적으로 로드합니다. 모듈을 가져올 때는 `import`, 내보낼 때는 `export`키워드를 사용합니다.

ESM은 정적 분석이 가능해 트리 쉐이킹 같은 최적화 작업에도 유리합니다.

// ES Module 방식
// 모듈 내보내기
export const add = (a, b) => {
    return a + b;
};

// 모듈 가져오기
import { add } from './math.js';

 

 

구분	CommonJS	ES Module
문법	require/module.exports	import/export
로딩 타이밍	동기적	비동기적
사용 환경	주로 Node.js	브라우저와 Node.js 모두
코드최적화	런타임에서 동적 분석	정적 분석을 통한 최적화 가능(트리 쉐이킹)

 

ES Module 정리 내용

2024.11.06 - [프론트엔드/JavaScript] - [ESM] ES Module에 대해