JavaScript 모듈화 기술의 주요 표준인 CommonJS, AMD, CMD, UMD, ESM의 개념과 차이점을 정리합니다. 이들 표준은 클라이언트/서버 환경에서 코드 관리 효율성을 높이기 위한 목적으로 개발되었습니다.

1. CommonJS - 서버 환경용 동기 모듈 시스템

Node.js 환경에서 주로 사용되는 표준으로, 파일 시스템 접근이 빠른 서버 환경에서 동기 방식으로 모듈을 로드합니다.

핵심 특징

• 동기적 불러오기: require() 호출 시 다음 코드 실행이 일시 중단됨
• 값 복사 전달: 모듈 내부 상태 변경이 외부 영향을 주지 않음
• 파일 단위 모듈: 각 파일이 독립적인 스코프를 갖음

구문 예시

// 수출 모듈
function calculateSum(a, b) {
  return a + b;
}
module.exports = {
  sum: calculateSum
};

// 불러오기
const calculator = require('./calculator');
console.log(calculator.sum(2, 3)); // 5

2. AMD - 브라우저 최적화 비동기 모듈

RequireJS와 같은 라이브러리에서 구현된 표준으로, 네트워크 지연을 고려한 비동기 로딩 방식을 채택했습니다.

구현 특징

• 명시적 의존성 선언: define()로 의존 모듈을 사전에 등록
• 즉시 실행: 모듈 로딩 후 바로 실행 가능

구문 예시

// 모듈 정의
define(['jquery'], function($) {
  function showContent() {
    $('#target').html('AMD 모듈 작동');
  }
  return { display: showContent };
});

// 모듈 사용
require(['moduleA'], function(moduleA) {
  moduleA.display();
});

3. CMD - 유연한 브라우저 모듈 프레임워크

Sea.js에서 개발된 표준으로, CommonJS와 AMD의 장점을 결합한 방식입니다.

구현 특징

• 지연 로딩: 필요 시점에 require() 호출
• 동적 의존 처리: require.async()로 비동기 로딩 가능

구문 예시

define(function(require, exports, module) {
  const $ = require('jquery');
  require.async('./utils', function(utils) {
    utils.processData();
  });
  
  exports.show = function() {
    $('#container').html('CMD 모듈 실행');
  };
});

4. UMD - 다중 환경 호환 패턴

모듈을 다양한 환경에서 실행할 수 있도록 설계된 패턴으로, CommonJS, AMD, 글로벌 변수 지원 모두 가능합니다.

구현 원리

(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    define(['jquery'], factory);
  } else if (typeof module === 'object' && module.exports) {
    module.exports = factory(require('jquery'));
  } else {
    root.myLib = factory(root.jQuery);
  }
}(this, function ($) {
  function init() {
    $('body').append('<p>UMD 모듈 로드 성공</p>');
  }
  return { initialize: init };
}));

5. ESM - 표준화된 모듈 시스템

ECMAScript 2015 이후 도입된 언어 자체 모듈 시스템으로, 현대 브라우저 및 Node.js에서 널리 사용됩니다.

주요 특징

• 정적 분석 가능: 컴파일 시 의존성 결정
• 참조 전달: 모듈 내부 변화가 외부 영향을 줌
• 타입스크립트 호환: 기본값, 이름별 수출 지원

구문 예시

// 모듈 수출
export const PI = 3.14159;
export default function() {
  console.log('ESM 모듈 실행');
}

// 모듈 불러오기
import { PI } from './math';
import myDefault from './lib';

console.log(PI); // 3.14159
myDefault();

비교 요약표

발전 추세

• ESM: 웹팩, Vite 등의 도구 발전으로 현대 프로젝트에서 필수
• CommonJS: Node.js에서 여전히 사용되지만 ESM로 전환 중
• AMD/CMD: 옛 프로젝트에서만 유지됨
• UMD: 크로스 플랫폼 라이브러리에 적합

현대 개발에서는 라이브러리 분배 시 UMD 또는 ESM 사용, 애플리케이션 개발 시 ESM 직접 활용이 권장됩니다.