CommonJS, AMD, UMD, ESM

CommonJS (이하 CJS), AMD, UMD, ESM 모두 자바스크립트의 모듈 시스템을 말한다.

 

먼저, 모듈 시스템은 코드의 재사용성과 캡슐화를 위해 서로 관련된 기능들을 하나의 단위(모듈)로 묶어 관리하는 방법을 말한다. 시간이 흐르면서 위와 같이 여러 방식이 등작했으며, 각 방식은 사용 환경과 필요에 따라 발전해 왔다.

---

1. 초기 자바스크립트와 모듈의 필요성

초기 상황:

자바스크립트가 등장했을 때는 모듈 시스템이 존재하지 않아, 모든 함수와 변수가 전역 스코프에 존해앴다. 이로 인해 네임스페이스 충돌, 코드 관리의 어려움이 발생했다.

모듈의 필요성:

코드의 재사용, 유지보수, 독립적인 테스트 등을 위해 모듈화를 도입하게 되었으며, 이를 통해 코드가 명확하게 분리되고 독립적으로 관리될 수 있게 되었다.

 

2. 주요 모듈 시스템

2.1 CommonJS

특징

• 주로 Node.js 환경에서 사용되는 모듈 시스템
• 각 파일은 하나의 모듈로 취급되며, module.export 또는 exports 객체를 통해 모듈의 인터페이스를 정의한다.
• 동기적으로 모듈을 로드하므로, 서버 사이드에서 파일 시스템 I/O가 빠른 경우에 적합하다.

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

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

module.exports = { add, substract };

// main.js

const math = require('./math');
console.log(math.add(2, 3)) // 5

 

2.2 AMD (Asynchronous Module Definition)

특징

• 주로 브라우저 환경에서 사용되도록 설계되었다.
• 모듈을 비동기적으로 로드하여, 페이지 로딩 시 지연을 최소화한다.
• RequireJS가 대표적인 AMD 구현체이다.

// math.js (AMD 방식)
define([], function () {
  return {
    add: function (a, b) {
      return a + b;
    },
    substract: function (a, b) {
      return a - b;
    }
  };
});

// main.js
require(['math'], function (math) {
  console.log(math.add(2, 3)); // 5
});

 

2.3 UMD (Universal Module Definition)

특징

• CommonJS와 AMD 양쪽 환경에서 모두 사용할 수 있도록 고안된 모듈 패턴
• 모듈을 작성할 때, 환경에 따라 자동으로 적절한 방식으로 모듈을 노출할 수 있다.

(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD
    define([], factory);
  } else if (typeof module === 'object' && module.exports) {
    // CommonJS
    module.exports = factory();
  } else {
    // 브라우저 전역 변수
    root.myModule = factory();
  }
}(typeof self !== 'undefined' ? self: this, function () {
  // 모듈 내용
  return {
    greet: function (name) {
      return 'Hello, ' + name + '!';
    }
  };
}));

 

2.4 ESM ( ECMAScript Modules)

특징

• ECMAScript 2015(ES6)부터 표준 모듈 시스템으로 도입됨.
• import와 export 구문을 사용하여 모듈을 정의하고 불러온다.
• 정적 분석이 가능하여 트리 쉐이킹(Tree Shaking) 등 빌드 최적화에 유리함.
• 브라우저와 Node.js 모두에서 사용되며, 최신 환경에서는 기본적으로 지원된다.

// math.mjs
export function add(a, b) {
  return a + b;
}

export function sbstract(a, b) {
  return a - b;
}

// main.js
import { add, substract } from './math.mjs';
console.log(add(2, 3); // 5

 

3. 모듈 시스템의 장단점 비교

CommonJS

장점 : 간단하고 직관적인 문법, Node.js 생태계에서 널리 사용

단점 : 동기적 로딩 방식 때문에 브라우저 환경에서는 부적합

 

AMD

장점 : 비동기적으로 모듈을 로드하여 브라우저 성능 개선에 도움

단점: 문빕이 다소 복잡하여, 코드 가독성이 떨어짐

 

UMD

장점 : 다양한 환경에서 호환성이 높음

단점 : 코드가 다소 장황해지고 복잡해질 수 있음

 

ES Modules

장점 : 표준화된 문법, 정적 분석 및 최적화에ㅐ 유리, 브라우저와 Node.js 모두에서 사용 가능

단점 : 구형 환경이나 일부 라이브러리와의 호환성 이슈가 있을 수 있음(최근에는 대부분 해결)