28. 모듈 시스템(Module System) - 1

CommonJS, AMD, UMD, ES6 모듈 등의 모듈 시스템 비교

자바스크립트에서 모듈 시스템은 코드를 모듈 단위로 구성하여 관리하고 재사용 가능한 코드를 만들기 위한 중요한 도구입니다. 이번 글에서는 CommonJS, AMD, UMD, ES6 등의 주요 모듈 시스템을 비교하고 각각의 특징을 알아보겠습니다.

CommonJS

CommonJS는 서버 사이드 자바스크립트 환경(Node.js)에서 모듈을 정의하고 사용하는 데에 주로 사용됩니다. CommonJS는 모듈이 로드되는 것을 동기적으로 처리하며 require() 함수를 사용하여 모듈을 로드하고 module.exports를 사용하여 모듈을 내보냅니다.

// 모듈 내보내기
module.exports = {
  foo: function() {
    return 'foo';
  },
  bar: function() {
    return 'bar';
  }
};

// 모듈 가져오기
const myModule = require('./myModule');
console.log(myModule.foo()); // 'foo'

AMD (Asynchronous Module Definition)

AMD는 클라이언트 사이드 자바스크립트에서 모듈을 비동기적으로 로드하기 위한 형식입니다. 주로 브라우저 환경에서 사용되며, RequireJS와 함께 주로 사용됩니다.

// 모듈 정의
define('myModule', ['dep1', 'dep2'], function(dep1, dep2) {
  return {
    foo: function() {
      return 'foo';
    },
    bar: function() {
      return 'bar';
    }
  };
});

// 모듈 사용
require(['myModule'], function(myModule) {
  console.log(myModule.foo()); // 'foo'
});

UMD (Universal Module Definition)

UMD는 CommonJS와 AMD를 모두 지원하는 유니버설 모듈 형식입니다. 이는 브라우저 및 Node.js 환경에서 모두 사용할 수 있도록 모듈을 정의합니다.

(function(root, factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD 환경
    define(['dep1', 'dep2'], factory);
  } else if (typeof module === 'object' && module.exports) {
    // CommonJS 환경
    module.exports = factory(require('dep1'), require('dep2'));
  } else {
    // 브라우저 전역 객체에 직접 할당
    root.myModule = factory(root.dep1, root.dep2);
  }
}(typeof self !== 'undefined' ? self : this, function(dep1, dep2) {
  return {
    foo: function() {
      return 'foo';
    },
    bar: function() {
      return 'bar';
    }
  };
}));

ES6 모듈

ES6 모듈은 자바스크립트의 표준 모듈 시스템으로, 브라우저 및 Node.js 환경에서 사용됩니다. import 및 export 키워드를 사용하여 모듈을 정의하고 내보냅니다.

// 모듈 내보내기
export function foo() {
  return 'foo';
}

export function bar() {
  return 'bar';
}

// 모듈 가져오기
import { foo, bar } from './myModule';
console.log(foo()); // 'foo'

모듈 시스템 비교 요약

• CommonJS: 서버 사이드(Node.js)에서 주로 사용되며 동기적 로딩 방식입니다.
• AMD: 클라이언트 사이드에서 비동기적 로딩을 지원하며 RequireJS와 함께 주로 사용됩니다.
• UMD: CommonJS 및 AMD를 모두 지원하며 브라우저 및 Node.js 환경에서 사용됩니다.
• ES6 모듈: 표준 모듈 시스템으로 브라우저 및 Node.js 환경에서 널리 사용되고 있으며 정적 분석이 가능합니다.

각각의 모듈 시스템은 환경 및 요구 사항에 따라 선택되어야 합니다. 개발하는 프로젝트의 특징과 요구사항에 맞춰 적절한 모듈 시스템을 선택하여 사용하는 것이 중요합니다.