[javascript] 자바스크립트 모듈 시스템(CommonJS, AMD, ES6 모듈)

07 Dec 2023

javascript

모듈은 소프트웨어 개발에서 코드를 재사용하고 구조화하는 데 중요한 요소입니다. 자바스크립트의 경우, 모듈 시스템을 사용하여 코드를 모듈화하고 재사용 가능한 컴포넌트로 분리할 수 있습니다. 이번 글에서는 자바스크립트의 주요 모듈 시스템인 CommonJS, AMD, ES6 모듈을 살펴보겠습니다.

1. CommonJS

CommonJS는 서버 사이드 자바스크립트 환경을 위해 개발된 모듈 시스템입니다. Node.js에서 주로 사용되며, 동기적으로 모듈을 불러오는 특징을 가지고 있습니다. CommonJS 모듈은 require 함수로 모듈을 불러오고, module.exports 객체를 통해 모듈을 내보냅니다.

// math.js
const sum = (a, b) => a + b;
const multiply = (a, b) => a * b;

exports.sum = sum;
exports.multiply = multiply;

// main.js
const math = require('./math');

console.log(math.sum(1, 2)); // 3
console.log(math.multiply(3, 4)); // 12

2. AMD (Asynchronous Module Definition)

AMD는 브라우저에서 비동기적으로 모듈을 로드하는데 사용되는 모듈 시스템입니다. 주로 RequireJS와 함께 사용되며, 브라우저 환경에서 모듈화된 코드를 관리하는데 유용합니다. AMD 모듈은 define 함수를 사용하여 모듈을 정의하고, require 함수를 사용하여 모듈을 로드합니다.

// math.js
define(function () {
  const sum = (a, b) => a + b;
  const multiply = (a, b) => a * b;

  return {
    sum,
    multiply
  };
});

// main.js
require(['math'], function (math) {
  console.log(math.sum(1, 2)); // 3
  console.log(math.multiply(3, 4)); // 12
});

3. ES6 모듈

ES6에서 도입된 모듈 시스템은 자바스크립트의 표준 모듈 시스템입니다. 모던 브라우저와 Node.js에서 지원되며, 모듈을 정의하고 사용하기 위해 import와 export 키워드를 사용합니다.

// math.js
export const sum = (a, b) => a + b;
export const multiply = (a, b) => a * b;

// main.js
import { sum, multiply } from './math';

console.log(sum(1, 2)); // 3
console.log(multiply(3, 4)); // 12

결론

CommonJS, AMD, ES6 모듈은 각각 다른 환경에서 자바스크립트 모듈을 사용하기 위한 시스템입니다. CommonJS는 Node.js에서 사용되며 동기적으로 모듈을 로드합니다. AMD는 브라우저에서 비동기적으로 모듈을 로드하는데 사용되는 시스템입니다. ES6 모듈은 모던 브라우저와 Node.js에서 사용되며, import와 export 키워드를 사용하여 모듈을 정의하고 사용합니다. 개발 환경에 따라 적합한 모듈 시스템을 선택하여 코드를 구조화하고 재사용성을 높일 수 있습니다.

1. CommonJS

2. AMD (Asynchronous Module Definition)

3. ES6 모듈

결론

참고 자료