모듈 시스템

모듈 시스템들은 코드를 더 작은 조각으로 분리하고 조직화하여 가독성과 재사용성을 높이는 데 도움을 준다.
모듈 시스템을 사용하면 코드를 논리적인 단위로 나누어 개발하기 쉬워진다. 각 모듈은 특정 기능 또는 역할을 수행하며, 필요한 경우 재사용할 수 있다. 이는 코드의 유지보수성을 높이고, 팀 작업을 용이하게 만든다.

예시

CommonJS

서버 사이드 JavaScript 환경에서 사용되는 모듈 시스템이다.
require 과 module.exports를 사용하여 모듈을 정의하고 가져올 수 있다.
이를 통해 코드를 더 작은 모듈로 분리하고, 각 모듈은 필요한 부분만을 담당하여 코드를 더 쉽게 관리할 수 있다.

// 모듈 정의
// math.js
module.exports = {
  add: function(a, b) {
    return a + b;
  },
  subtract: function(a, b) {
    return a - b;
  }
};

// 모듈 가져오기
// main.js
const math = require('./math');
console.log(math.add(5, 3)); // 8

---

AMD(Asynchronous Module Definition)

주로 클라이언트 사이드 JavaScript에서 사용되는 비동기적인 모듈 로딩을 지원하는 모듈 시스템이다.
주로 브라우저 환경에서 사용되며 define 함수를 사용하여 모듈을 정의하고, require 함수를 사용하여 모듈을 가져온다.

// 모듈 정의
// math.js
define([], function() {
  return {
    add: function(a, b) {
      return a + b;
    },
    subtract: function(a, b) {
      return a - b;
    }
  };
});

// 모듈 가져오기
// main.js
require(['math'], function(math) {
  console.log(math.add(5, 3)); // 8
});

---

ES6 모듈

ECMAScript 2015(ES6)부터 원래 JavaScript 언어 자체에 모듈 시스템이 도입되었다. import와 export 키워드를 사용하여 모듈을 정의하고 가져올 수 있다. ES6 모듈은 브라우저와 Node.js에서 모두 사용할 수 있다.

// 모듈 정의
// math.js
export function add(a, b) {
  return a + b;
}

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

// 모듈 정의
// math.js
export function add(a, b) {
  return a + b;
}

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