JS 모듈은 코드를 구성하고 재사용하는 방법 중 하나입니다. 모듈을 사용하면 코드를 구조화하고 관리하기 쉬워지며, 다른 파일에서 코드를 재사용할 수 있습니다.

JS 모듈은 변수, 함수, 클래스 및 다른 코드를 내보내기(export) 및 가져오기(import)하는 방법을 제공합니다. 내보내기(export)는 모듈에서 외부로 공개(public)하고자 하는 항목을 지정하는 것이며, 가져오기는 다른 모듈에서 내보낸 항목을 가져와 사용하는 것입니다.

JS 모듈은 CommonJS, AMD, UMD, SystemJS, ES6/ES2015 등의 다양한 모듈 시스템을 제공합니다. 이들 모듈 시스템은 서로 다른 방식으로 내보내기 및 가져오기를 지원하며, 각각의 장단점이 있습니다.

ES6/ES2015에서는 import 및 export 문을 사용하여 내보내기 및 가져오기를 지원하며, 모듈 간의 종속성 관리 및 로드 방식을 개선했습니다. 이러한 개선으로 인해, ES6/ES2015에서 지원하는 JS 모듈이 널리 사용되고 있습니다.

CommonJS - 서버 사이드 자바스크립트(Node.js)에서 모듈을 사용하기 위한 형식으로 개발되었습니다. require() 함수와 module.exports 객체를 사용하여 모듈을 정의하고 내보냅니다.

const fs = require('fs');
module.exports = {
  read: function(file) {
    return fs.readFileSync(file, 'utf8');
  }
};

express등 node를 이용하는 작업을 하면 사용하는 유형입니다.

AMD(Asynchronous Module Definition) - 브라우저에서 동작하는 자바스크립트 애플리케이션 개발에 많이 사용됩니다. define() 함수를 사용하여 모듈을 정의하고, require() 함수를 사용하여 모듈을 로드합니다.

define(['module1', 'module2'], function(module1, module2) {
  // 모듈 내용
});

AMD는 사용해본적 없습니다.

UMD(Universal Module Definition) - AMD와 CommonJS를 함께 지원하여 브라우저에서도 모듈을 사용할 수 있도록 지원합니다. 일종의 패턴입니다.

(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 : global, function () {
  // 모듈 내용
  function hello() {
    console.log('Hello, world!');
  }

  return {
    hello: hello
  };
}));

forgithub00/module_umd1 at master · a3040/forgithub00

사용

// 브라우저에서 사용하는 경우
myModule.hello(); // "Hello, world!" 출력

// Node.js에서 사용하는 경우
const myModule = require('./myModule');
myModule.hello(); // "Hello, world!" 출력

// AMD 환경에서 사용하는 경우
define(['myModule'], function(myModule) {
  myModule.hello(); // "Hello, world!" 출력
});

// CommonJS 환경에서 사용하는 경우
const myModule = require('myModule');
myModule.hello(); // "Hello, world!" 출력

ESM(ECMAScript Modules) - ECMAScript 모듈 시스템으로, 브라우저와 Node.js에서 모두 지원하는 표준입니다. import 문과 export 문을 사용하여 모듈을 정의하고 내보냅니다.

export const name = 'John';
export function sayHello() {
  console.log(`Hello, ${name}!`);
}

forgithub00/module_esm2 at master · a3040/forgithub00

사용

import { name, sayHello } from './myModule.js';


console.log(name); // 'John'
sayHello(); // 'Hello, John!'