반응형
CommonJS 모듈 시스템과 ECMAScript 모듈(ESM) 시스템
Node.js 환경에서 CommonJS 모듈 시스템과 ECMAScript 모듈(ESM) 시스템은 모듈을 관리하고 불러오는 방식에서 중요한 차이를 가집니다. 다음은 두 모듈 시스템의 주요 차이점과 특징입니다.
CommonJS 모듈 시스템
- 파일 확장자:
- CommonJS는 기본적으로
.js
확장자를 사용합니다.
- CommonJS는 기본적으로
- 모듈 불러오기:
require
함수를 사용하여 모듈을 불러옵니다.- 동기식으로 동작합니다.
const module = require('module-name');
- 모듈 내보내기:
module.exports
또는exports
객체를 사용하여 모듈을 내보냅니다.module.exports = function() { // 코드 };
- 환경 설정:
- CommonJS는 Node.js의 기본 모듈 시스템입니다. 별도의 설정 없이 사용할 수 있습니다.
ECMAScript 모듈(ESM) 시스템
- 파일 확장자:
- 기본적으로
.mjs
확장자를 사용하거나,package.json
파일에"type": "module"
을 추가하여.js
파일을 ESM으로 사용할 수 있습니다.
- 기본적으로
- 모듈 불러오기:
import
문을 사용하여 모듈을 불러옵니다.- 비동기식으로 동작합니다.
import module from 'module-name';
- 모듈 내보내기:
export
키워드를 사용하여 모듈을 내보냅니다.export default function() { // 코드 };
- 환경 설정:
- ESM을 사용하려면
package.json
파일에"type": "module"
을 추가하거나.mjs
파일 확장자를 사용해야 합니다.{ "type": "module" }
- ESM을 사용하려면
주요 차이점
- 호환성:
- CommonJS는 Node.js의 기본 모듈 시스템으로, 대부분의 Node.js 환경에서 기본적으로 사용됩니다.
- ESM은 ES6(ECMAScript 2015)에서 도입된 표준 모듈 시스템으로, 최신 JavaScript 표준을 따릅니다.
- 비동기 및 동기:
- CommonJS의
require
는 동기식으로 모듈을 로드합니다. 따라서 모듈을 불러오는 동안 다른 코드 실행이 블록됩니다. - ESM의
import
는 비동기식으로 모듈을 로드합니다. 이는 더 나은 성능과 모듈 로딩 방식의 유연성을 제공합니다.
- CommonJS의
- 스코프:
- CommonJS 모듈은 파일 단위의 스코프를 가집니다.
- ESM은 모듈 단위의 스코프를 가지며,
import
와export
키워드를 사용하여 모듈 내에서 명시적으로 내보내고 가져옵니다.
- 사용성:
- CommonJS는 기존의 많은 Node.js 프로젝트에서 널리 사용되고 있으며, 대부분의 Node.js 패키지는 CommonJS 모듈 시스템을 따릅니다.
- ESM은 브라우저 환경과의 호환성을 위해 점점 더 많이 사용되고 있으며, 최신 JavaScript 기능을 활용할 수 있습니다.
예제 코드 비교
CommonJS:
// module.js
function sayHello() {
console.log('Hello, CommonJS');
}
module.exports = sayHello;
// main.js
const sayHello = require('./module.js');
sayHello();
ESM:
// module.mjs
export function sayHello() {
console.log('Hello, ESM');
}
// main.mjs
import { sayHello } from './module.mjs';
sayHello();
또는 package.json
파일에 "type": "module"
을 추가한 경우:
// module.js
export function sayHello() {
console.log('Hello, ESM');
}
// main.js
import { sayHello } from './module.js';
sayHello();
정리
이렇게 CommonJS와 ESM은 각기 다른 방식으로 모듈을 관리하고 불러오지만, 각각의 장점과 용도가 있습니다. Node.js 환경에서 프로젝트 요구 사항에 따라 적합한 모듈 시스템을 선택하여 사용할 수 있습니다.
반응형
'온라인 멘토와 함께하는 공부 > JS' 카테고리의 다른 글
자바스크립트(JavaScript)와 NodeJS (2) | 2024.07.15 |
---|---|
자바스크립트에서 작은따옴표와 백틱의 차이 (2) | 2024.06.03 |
[NodeJS] NodeJS가 백엔드와 프런트엔드에서 하는 역할 비교 (32) | 2024.05.28 |
[NodeJS] Node.js가 동작하는 방식 (1) | 2024.05.27 |
[NodeJS] 학습자에게 소개하는 http.createSever 함수 (36) | 2024.05.26 |