ESM과 CommonJS의 차이

ESM 이란?

Enterprise Security Management 통합 보안 관리

방화벽, 침입 탐지 시스템, 칩입 방지 시스템 등 각종 보안 시스템의 로그들을 모아 한곳에서 통합 관리를 할 수 있게 해주는 시스템

아니고

Enterprise Service Management 엔터프라이즈 서비스 관리

아니고

ECMA Script modules

입니다!

Node.js에는 CommonJS 모듈과 ECMAScript 모듈이라는 두가지 모듈 시스템이 있습니다.

그러면 module이란 뭘까요

 

Module이란?

프로그램을 구성하는 구성 요소, 관련된 데이터와 함수를 하나로 묶은 단위를 의미합니다.

CommonJS 모듈

CommonJS 모듈은 Node.js용 JavaScript 코드를 패키징하는 독창적인 방법입니다.

ECMAScript 모듈

재사용을 위해 JavaScript 코드를 패키징하는 공식 표준 형식입니다. 모듈은 다양한 import, export문을 사용하여 정의됩니다.

Node.js가 CommonJS, ESM을 판단하는 방법.

1. 파일의 확장자가 .cjs / .mjs 인지
2. package.json 에 “type”값이 없거나 “commonjs” / “type”값이 “module” 인지
3. 기본값은 cjs 이다.

JS 모듈을 내보내거나 가져올때 2가지 방법을 사용합니다.

module.exports 로 모듈을 내보내고, require()로 접근하는 CJS(CommonJS)

// circle.js
const { PI } = Math;
module.exports.area = (r) => PI * r ** 2;     // 모듈 내보낼 때

const circle = require('./circle.js');        // 모듈 가져올 때     
console.log(`The area of a circle of radius 4 is ${circle.area(4)}`);

export로 모듈을 내보내고 import로 접근하는 ESM(ES Modules)이 있습니다.

// addTwo.mjs
function addTwo(num) {
	return num + 2;
}
export { addTwo }       // 모듈 내보낼 때 

// app.mjs
import { addTwo } from './addTwo.mjs';         // 모듈 가져올 때

console.log(addTwo(4)); // print : 6

CommonJS와 ESM의 가장 큰 차이

ESM은 비동기 import가 불가능합니다.

그럼 동기/비동기 는 뭘까요?

동기는 요청에 대한 응답이 와야 다음 동작을 수행할 수 있는것이고,

비동기는 요청에 대한 응답 상태에 상관없이 다음 동작을 수행하는 방식입니다.

CommonJS의 특징

• 비동기적인 장점은 속도가 빠르지만, 단점으로 안정적이지 않는다는 것입니다.
• 여러 import가 있을때, 마침 필요한 부분이 아직 다 import가 되지않아서 사용하고 싶은 내용을 사용하지 못할 수도 있습니다.
• 성능을 위해 Tree Shaking과 같은 작업이 필요한데, CommonJS에서는 상당히 어렵습니다.
• 비동기 모듈을 정의하기 어렵습니다. DB에 연결 동작은 비동기적으로 동작합니다.
• 조용히 require 함수를 재정의 해버릴 수도 있습니다.이렇게 grobal require를 myRequire로 재정의 할 수 있습니다. 이런 경우 require함수가 Monkey Patch되어 예상하지 못한 동작을 초래할 수 있습니다.
• const defaultRequire = global.require; const myRequire = (request: string) => { ... } global.require = myRequire;

ESM의 특징

• ESM은 동기적으로 import를 수행합니다.즉 필요한 부분이 없는 경우가 생기질 않아요.
• 보통 동기적의 단점은 속도가 느리지만, 장점으로는 안정성을 가집니다.
• 정적 분석이 쉽습니다. 조건적으로 모듈을 임포트할 수 없습니다. 따라서 어떤 파일을 참조하고 있는지 쉽게 알 수 있습니다.
• ESM의 import와 export는 함수인 require와 달리 자바스크립트의 키워드(if, for, while 등)이기 때문에 다른 변수로 재할당 할 수 없습니다.
• 언어 표준입니다.
• 비교적 최근에 생기고, 이미 CommonJS가 많은 상황에서 ESM을 사용하는것이 쉽지않다. 오류가 많이 생길 수 있다.

참고 사이트

Modules: ECMAScript modules | Node.js v21.7.3 Documentation

Modules: CommonJS modules | Node.js v21.7.3 Documentation

ESM과 CommonJS의 차이

CommonJs와 ECMAScript Modules(ESM)