JavaScript 모듈은 코드 구성, 재사용성 향상, 애플리케이션 유지 관리 향상에 중요한 역할을 합니다. 널리 사용되는 두 가지 주요 모듈 시스템은 CommonJS(CJS)와 ECMAScript 모듈(ESM)입니다. 프로젝트에서 이를 효과적으로 활용하려면 차이점과 기능을 이해하는 것이 중요합니다.

커먼JS(CJS)

CommonJS는 원래 Node.js 환경용으로 설계된 모듈 시스템입니다. 모듈의 단순성과 동기식 로딩을 강조합니다.

CommonJS 내보내기/가져오기 모듈

CommonJS의 모듈은 module.exports를 사용하여 값, 객체 또는 함수를 내보냅니다.

1. 기본 내보내기/가져오기

// logger.js
function log(message) {
    console.log(message);
}

module.exports = log; // Default export

// index.js
const log = require('./logger');

log('This is a log message.'); // Output: This is a log message.

2. 지정 수출/수입

// math.js
function add(a, b) {
    return a   b;
}

function subtract(a, b) {
    return a - b;
}

module.exports = { add, subtract }; // Named exports

// index.js
const { add, subtract } = require('./math');

console.log(add(5, 3)); // Output: 8
console.log(subtract(5, 3)); // Output: 2

ECMAScript 모듈(ESM)

ES6(ES2015)에 도입된 ESM은 JavaScript용 표준화된 모듈 시스템입니다. 동기식 및 비동기식 모듈 로딩을 모두 지원하며 특정 구성의 최신 브라우저와 Node.js에서 기본적으로 지원됩니다.

ECMAScript 내보내기 모듈

ESM은 내보내기 문을 사용하여 값, 개체 또는 함수를 내보냅니다.

1. 기본 내보내기/가져오기

// utils.mjs (Note the .mjs extension for ESM)
function formatName(name) {
    return `Mr./Ms. ${name}`;
}

export default formatName;

// index.mjs
import formatName from './utils.mjs';

console.log(formatName('John')); // Output: Mr./Ms. John

2. 명명된 수출

// operations.mjs
export function multiply(a, b) {
    return a * b;
}

export function divide(a, b) {
    return a / b;
}

// index.mjs
import { multiply, divide } from './operations.mjs';

console.log(multiply(4, 2)); // Output: 8
console.log(divide(10, 2)); // Output: 5

삼. ECMAScript 모듈의 혼합 내보내기 스타일

// mixedExports.mjs
function greet(name) {
    return `Hello, ${name}!`;
}

export default greet;

export function goodbye(name) {
    return `Goodbye, ${name}!`;
}

// index.mjs
import sayHello, { goodbye } from './mixedExports.mjs';

console.log(sayHello('Alice')); // Output: Hello, Alice!
console.log(goodbye('Bob')); // Output: Goodbye, Bob!

CommonJS와 ESM의 주요 차이점

• 구문: CommonJS는 require() 및 module.exports를 사용하는 반면 ESM은 import 및 내보내기 문을 사용합니다.
• 로딩: CommonJS 모듈은 동기식으로 로드되는 반면 ESM은 동기식 및 비동기식 로딩을 모두 지원합니다.
• 환경: CommonJS는 주로 Node.js에서 사용되는 반면 ESM은 기본적으로 브라우저에서 지원되며 특정 구성(--experimental-modules 플래그 또는 .mjs 파일 확장자)을 사용하여 Node.js에서 사용할 수 있습니다.

호환성 및 사용법

• Node.js: CommonJS는 Node.js 환경의 오랜 지원과 단순성으로 인해 여전히 널리 사용되고 있습니다.
• 브라우저: ESM은 더 나은 성능과 모듈식 코드 로딩을 ​​제공하는 브라우저의 기본 지원이 늘어나면서 인기를 얻고 있습니다.

결론

CommonJS와 ECMAScript 모듈 중에서 선택하는 것은 프로젝트 환경과 요구 사항에 따라 다릅니다. CommonJS는 Node.js 백엔드 개발에 강력하지만 ESM은 브라우저와 최신 Node.js 애플리케이션 전반에 걸쳐 상호 운용성을 제공합니다. 이러한 모듈 시스템을 이해하면 개발자는 JavaScript의 모듈 기능을 효과적으로 활용할 수 있습니다.

CommonJS 또는 ESM을 활용하여 개발자는 코드 구성을 강화하고, 프로젝트 확장성을 향상시키며, JavaScript 프로젝트에서 협업을 촉진할 수 있습니다.