[javascript] 자바스크립트에서 모듈화 작업 및 모듈 종류

22 Dec 2023

javascript

자바스크립트는 모듈화를 위해 여러 가지 방법을 제공합니다. 모듈화는 코드의 재사용성을 높일 뿐만 아니라 유지보수와 개발 효율성에도 도움을 줍니다. 여기에서는 자바스크립트에서의 모듈화 작업과 주요 모듈 종류에 대해 알아보겠습니다.

CommonJS

CommonJS는 Node.js에서 주로 사용되는 모듈화 방식으로, require와 module.exports를 통해 모듈을 정의하고 내보냅니다. 이 방식은 동기적인 로딩을 전제로 하며, 서버 측 자바스크립트 개발에서 많이 사용됩니다.

예시:

// 모듈 가져오기
const moduleA = require('./moduleA');

// 모듈 내보내기
module.exports = {
  // 모듈 내용
};

ES6 모듈

ES6에서는 내장된 모듈화 시스템을 제공합니다. import와 export 구문을 사용하여 모듈을 정의하고 내보냅니다. 이 방식은 동기 및 비동기 모듈 로딩을 모두 지원하며, 브라우저 환경에서도 이용할 수 있습니다.

예시:

// 모듈 가져오기
import moduleA from './moduleA';

// 모듈 내보내기
export default {
  // 모듈 내용
};

AMD

AMD(Asynchronous Module Definition)는 브라우저 환경에서의 비동기 모듈 로딩을 지원하기 위한 모듈화 방식입니다. 주로 RequireJS와 함께 사용되며, 브라우저 환경에서 동적으로 모듈을 로딩할 수 있습니다.

예시:

// 모듈 정의
define('moduleA', ['./moduleA'], function(moduleA) {
  // 모듈 내용
  return {
    // 내보내는 내용
  };
});

UMD

UMD(Universal Module Definition)는 여러 환경(브라우저, Node.js)에서 모듈을 사용할 수 있도록 지원하는 방식입니다. CommonJS와 AMD의 장점을 모두 취하고, 여러 환경에서의 호환성을 보장합니다.

예시:

(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD 환경
    define(['exports', 'moduleA'], factory);
  } else if (typeof module === 'object' && module.exports) {
    // CommonJS 환경
    module.exports = factory(require('moduleA'));
  } else {
    // 브라우저 환경
    root.returnExports = factory(root.moduleA);
  }
}(typeof self !== 'undefined' ? self : this, function (moduleA) {
  // 모듈 내용
  return {
    // 내보내는 내용
  };
}));

각 모듈화 방식마다 장단점이 있으며, 프로젝트에 맞는 적절한 방식을 선택하여 사용해야 합니다. 모듈화를 통해 코드의 가독성과 유지보수성을 높이고, 개발 생산성을 향상시킬 수 있습니다.

이상으로 자바스크립트에서의 모듈화 작업과 주요 모듈 종류에 대해 살펴보았습니다. 부가적으로 ES6 모듈에 관련하여 참고할만한 문헌을 아래에 남겨두었습니다. ECMAScript® 2015 Language Specification - ECMAScript Modules

목차

CommonJS

ES6 모듈

AMD

UMD