1. 모듈의 개념, 등장 이유

모듈은 프로그램을 구성하는 구성요소의 일부를 말한다.

쉽게 말하자면 큰 애플리케이션을 작게 파일로 분리해서 관리할때 이 파일 각각을 말한다.

보통 클래스 하나 + 특정한 목적을 가지는 복수의 함수로 구성된 라이브러리 하나 정도로 구성.

JS에서 모듈의 등장

스크립트의 크기가 점차 커지고 기능이 복잡해지자 자바스크립트 커뮤니티는 라이브러리를 만들어서 필요한 모듈을 언제든지 불러올 수 있도록 하거나 모듈로 쉽게 분리 할 수 있는 방법들을 제시했다.

대표적으로 AMD, CommonJS, UMD 와 같은 모듈 시스템이 있다.

• AMD : 가장 오래된 모듈 시스템 중 하나. require.js라는 라이브러리를 통해 처음 개발.
• CommonJS : Node.js 서버를 위해 만들어짐
• UMD : AMD와 CommonJS와 같은 모듈 시스템을 함께 사용하기 위해 등장

위의 모든 모듈 시스템은 2015의 JS 표준으로 등재가 되었고, 대부분의 브라우저와 Node.js가 모듈 시스템을 지원한다.

CommonJS

서버사이드 및 데스크탑 어플리케이션에서 JS를 지원하기 위해서 탄생함.

다른 모듈을 사용할때 require을, 모듈을 해당 스코프 밖으로 보낼 때에는 module.exports를 사용한다.

→ node.js에서 사용한다.

• a.js 파일

const printHelloWorld = () => {
  console.log('Hello Wolrd');
};

module.exports = {
  printHelloWorld
};

• b.js

const func = require('./a.js'); // 같은 디렉토리에 있다고 가정
func.printHelloWorld();

여기서 module.exports는 현재 모듈에 대한 정보를 갖고 있는 객체이다.

id, path, parent 등의 속성이 있고 exports 객체를 가짐.

• module.exports 대신에 exports를 사용할 수도 있음

exports.printHelloWorld = printHelloWorld;

→ exports 의 속성으로 넣는 방법은 module.exports를 참조해서 사용하므로 직접 module.exports를 수정하지 않고 객체의 멤버를 만들어서 수정하는 방식을 사용한다.

두가지 방법의 차이점

코드를 살펴볼때 두가지 방법의 차이가 드러난다.

• module.exports={} 사용하는 방법

function add(a, b) {
  return a + b;
}

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

function multiply(a, b) {
  return a * b;
}

function divide(a, b) {
  return a / b;
}

module.exports = {
  add: add,
  substract: substract,
  multiply: multiply,
  divide: divide,
};

→ 여러개의 함수를 한번에 넣기에 용이하다.

• exports 의 속성을 사용하는 방법

exports.add = function(a, b) {
  return a + b;
};

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

exports.multiply = function(a, b) {
  return a * b;
};

exports.divide = function(a, b) {
  return a / b;
};

→ 하나하나씩 따로 추가하는 느낌이 강하다.

주의!!! exports = divide;이렇게 넣지 않도록 주의하자

exports 가 module.exports를 참조하고 있기 때문이다.

→ 여러개의 객체를 따로 export 할때 사용한다.

AMD(Asynchoronous Module Definition)

비동기 모듈에 대한 표준안을 다룬다.

CommonJS가 서버쪽에서 장점이 많은 반면 AMD는 브라우저 쪽에서 더 장점이 많다.

(생략)참고하기

UMD (Universal Module Definition)

위 두개의 모듈을 통합하기 위한 하나의 패턴