온라인 멘토와 함께하는 공부/JS

[NodeJS] CommonJS 모듈 시스템과 ECMAScript 모듈(ESM) 시스템

easyfly 2024. 7. 11. 17:43
반응형

CommonJS 모듈 시스템과 ECMAScript 모듈(ESM) 시스템

Node.js 환경에서 CommonJS 모듈 시스템과 ECMAScript 모듈(ESM) 시스템은 모듈을 관리하고 불러오는 방식에서 중요한 차이를 가집니다. 다음은 두 모듈 시스템의 주요 차이점과 특징입니다.

CommonJS 모듈 시스템

  1. 파일 확장자:
    • CommonJS는 기본적으로 .js 확장자를 사용합니다.
  2. 모듈 불러오기:
    • require 함수를 사용하여 모듈을 불러옵니다.
    • 동기식으로 동작합니다. 
      const module = require('module-name');
  3. 모듈 내보내기:
    • module.exports 또는 exports 객체를 사용하여 모듈을 내보냅니다. 
      module.exports = function() {
// 코드
};
  4. 환경 설정:
    • CommonJS는 Node.js의 기본 모듈 시스템입니다. 별도의 설정 없이 사용할 수 있습니다.

ECMAScript 모듈(ESM) 시스템

  1. 파일 확장자:
    • 기본적으로 .mjs 확장자를 사용하거나, package.json 파일에 "type": "module"을 추가하여 .js 파일을 ESM으로 사용할 수 있습니다.
  2. 모듈 불러오기:
    • import 문을 사용하여 모듈을 불러옵니다.
    • 비동기식으로 동작합니다. 
      import module from 'module-name';
  3. 모듈 내보내기:
    • export 키워드를 사용하여 모듈을 내보냅니다. 
      export default function() {
// 코드
};
  4. 환경 설정:
    • ESM을 사용하려면 package.json 파일에 "type": "module"을 추가하거나 .mjs 파일 확장자를 사용해야 합니다. 
      {
"type": "module"
}

주요 차이점

  1. 호환성:
    • CommonJS는 Node.js의 기본 모듈 시스템으로, 대부분의 Node.js 환경에서 기본적으로 사용됩니다.
    • ESM은 ES6(ECMAScript 2015)에서 도입된 표준 모듈 시스템으로, 최신 JavaScript 표준을 따릅니다.
  2. 비동기 및 동기:
    • CommonJS의 require는 동기식으로 모듈을 로드합니다. 따라서 모듈을 불러오는 동안 다른 코드 실행이 블록됩니다.
    • ESM의 import는 비동기식으로 모듈을 로드합니다. 이는 더 나은 성능과 모듈 로딩 방식의 유연성을 제공합니다.
  3. 스코프:
    • CommonJS 모듈은 파일 단위의 스코프를 가집니다.
    • ESM은 모듈 단위의 스코프를 가지며, import와 export 키워드를 사용하여 모듈 내에서 명시적으로 내보내고 가져옵니다.
  4. 사용성:
    • 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 환경에서 프로젝트 요구 사항에 따라 적합한 모듈 시스템을 선택하여 사용할 수 있습니다.

반응형