[Node.js] CommonJs vs ECMAScript

CommonJS(Node.js에서 사용됨)와 ECMAScript 모듈(ES 모듈 또는 ESM)은 JavaScript의 서로 다른 두 모듈 시스템이며 구문, 동작 및 사용 사례 측면에서 몇 가지 주요 차이점이 있습니다.

 

CommonJS 모듈:

// Importing
const fs = require('fs');
const { funcA, funcB } = require('./myModule');

// Exporting
module.exports = {
  funcA,
  funcB,
};

 

특성:

1. 동적: CommonJS 모듈은 런타임에 로드되고 실행됩니다. 이를 통해 조건이나 변수를 기반으로 동적 가져오기가 가능합니다.
2. 싱글턴: 여러 위치에서 모듈을 가져올 때 동일한 인스턴스에 대한 참조를 얻습니다. 모듈은 첫 번째 가져오기 후에 캐시됩니다.
3. 순환 종속성: CommonJS는 순환 종속성을 허용하지만 모듈을 부분적으로 해결하여 이를 처리합니다.
4. Node.js에서 사용됨: CommonJS는 Node.js에서 사용되는 모듈 시스템입니다.

 

ECMAScript 모듈(ESM):

// Importing
import fs from 'fs';
import { funcA, funcB } from './myModule';

// Exporting
export { funcA, funcB };

 

특성:

1. 정적: ESM은 구문 분석 단계에서 정적으로 분석됩니다. 가져오기는 코드가 실행되기 전에 해결됩니다.
2. 싱글톤: CommonJS와 유사하게 ESM의 가져오기는 싱글톤입니다. 여러 위치에서 모듈을 가져오면 동일한 인스턴스에 대한 참조를 얻게 됩니다.
3. 동적 가져오기 없음: ESM은 조건이나 변수를 기반으로 하는 동적 가져오기를 지원하지 않습니다. 가져오기는 정적으로 결정되어야 합니다.
4. 순환 종속성 없음: ESM은 순환 종속성을 허용하지 않습니다. 순환 종속성을 사용하려고 하면 오류가 발생합니다.
5. 브라우저 및 최신 JavaScript 런타임에서 사용됨: ESM은 ECMAScript에서 정의한 표준 모듈 시스템이며 Node.js와 같은 최신 브라우저 및 런타임 환경에서 지원됩니다.

CommonJS의 기능적 장점:

동적 가져오기: CommonJS는 런타임 조건에 따라 동적 가져오기를 허용(dinamic import)합니다. 이러한 유연성은 특정 시나리오에서 유용할 수 있습니다.

// CommonJS dynamic import
const myModule = condition ? require('./moduleA') : require('./moduleB');

 

순환 종속성 처리: CommonJS는 모듈을 부분적으로 해결하여 순환 종속성을 처리할 수 있습니다. 이는 특정 상황에서 유용할 수 있지만 문제를 방지하려면 신중한 설계가 필요합니다.

 

광범위한 채택: CommonJs는 특히 Node.js 환경에서 널리 채택되었습니다. 기존의 많은 npm패키지와 Node.js모듈은 CommonJs 구문을 사용합니다.

ESM의 기능적 장점:

1. 정적 분석: ESM은 구문 분석 단계에서 정적으로 분석되므로 개발 프로세스 초기에 오류를 포착할 수 있습니다. 이는 코드 안정성을 향상시키는 데 도움이 됩니다.
2. 표준화: ESM은 ECMAScript에 의해 정의된 표준화된 모듈 시스템으로, 최신 JavaScript 환경의 기본 선택입니다. 다양한 플랫폼과 환경에서 일관성을 제공합니다.
3. 트리 쉐이킹: ESM은 번들링 프로세스 중에 데드 코드를 제거하여 더 작고 더 최적화된 번들을 생성하는 프로세스인 트리 쉐이킹을 지원합니다.
4. 빌드 도구와의 향상된 통합: Webpack 및 Rollup과 같은 많은 최신 빌드 도구는 ESM을 더 잘 지원하므로 프로덕션용 코드를 더 쉽게 최적화하고 번들링할 수 있습니다.
5. 브라우저 지원: ESM은 최신 브라우저에서 기본적으로 지원되므로 개발자는 서버측 환경과 클라이언트측 환경 모두에서 실행할 수 있는 코드를 작성할 수 있습니다.

요약:

• CommonJS와 ESM은 JavaScript의 두 가지 다른 모듈 시스템입니다.
• CommonJS는 Node.js에서 사용되며 동적 가져오기를 지원하고 순환 종속성을 허용합니다.
• ESM은 ECMAScript에 의해 정의된 표준화된 모듈 시스템으로 정적 분석을 지원하며 순환 종속성을 허용하지 않습니다.
• CommonJS는 동적 특성과 순환 종속성 처리로 인해 특정 시나리오에서 더 유연합니다.
• ESM은 현대 JavaScript 개발의 표준이 되어 정적 분석, 표준화, 빌드 도구와의 향상된 통합과 같은 이점을 제공합니다.