Module

• 코드에서 특정기능을 하는 부분을 따로 떼어다가 함수로 만든것. 내부에서 뿐만 아니라 별도의 파일에 보관하고 불러와서 사용 가능하게끔 한다.

• 모듈을 사용하는 이유에는 재사용성, 유지보수, 범용적 사용등이 있다.

• 모듈을 사용할때에는 순서가 중요하다 (파일들간의 의존성 때문)

---

CommonJS

• JavaScript의 범용적 사용을 위한 모듈 시스템 구축의 선두주자

• 모든 모듈은 자신만의 독립적인 실행 영역이 있어야 한다.

• 모듈 정의는 전역객체인 exports 객체를 이용한다.

• 모듈 사용은 require 함수를 이용한다.

//foo.js
exports.foo =() => {...};

//bar.js
exports.bar =() => {...};

<script>
var $ = require('jquery');
var foo = require('./js/foo);
var bar = require('./js/bar);
</script>

---

• ES6부터는 내장된 모듈 시스템을 이용 (Import, Export)

//getMsg.js
function getMsg() {
  /...code.../
}

export default getMsg;

//display.js
import getMsg from './getMsg';

function display() {
  getMsg();
}

export default displasy;

//app.js
import display from './display';

display();

Bundler

• 필요한 파일들을 묶어서 하나의 파일로 만들어 HTML에서 'script' 태그로 로딩될 수 있도록 만들어 준다. 모듈로 묶여있는, 의존성을 가진 파일들을 번들러가 하나로 만들어준다.

  <script src="./bundle.js"></script>