모듈

모듈이란 구현 로직을 캡슐화하고 공개 API를 노출해 다른 코드에서 쉽게 로드하고 사용할 수 있도록 재사용 가능한 코드 조각이다.

모듈패턴을 사용하려면 이론적으로 다음 사항을 허용해야 한다.

- 코드 추상화

-코드 캡슐화

-코드 재사용

-의존성 관리

기존 자바스크립트 언어는 모듈을 염두해두고 디자인되지 않았기 때문에, 모듈 비슷한 패턴들을 고안하여 사용하고 있었다.

iife와 노출식 모듈이다.

iife는 즉시실행함수 표현식으로 선언과 동시에 실행되는 익명함수이다.

또한, iife 안에서 정의한 변수는 전역 스코프를 오염시키지 않고 iife 내부 스코프에 머물러 있는다.

하지만, IIFE는 의존성 관리가 되지 않는다.

노출식 모듈패턴은 함수 변수에 반환값을 담아 객체 형태로 return하는 것이다.

// Expose module as global variable
var singleton = function(){

  // Inner logic
  function sayHello(){
    console.log('Hello');
  }

  // Expose API
  return {
    sayHello: sayHello
  }
}()

이 함수를 바로 실행하지는 않고 생성자 함수로 인스턴스를 만든 다음 사용한다.

모듈포맷은 모듈을 정의하기 위해 사용할 수 있는 문법이다. 아래는 잘 알려진 모듈 포맷들이다.

• 비동기 모듈 정의(Asynchronous Module Definition)
• CommonJS
• 만능 모듈 정의(Universal Module Definition)
• System.register
• ES6 모듈 포맷

AMD 포맷은 브라우저에서 사용된다.

CommonJS 포맷은 Node.js에서 사용된다. 

UMD 포맷은 브라우저, node.js 다 가능

System.register 포맷은 es5에서 es6 모듈 문법을 지원하기 위해 디자인

es6는 자바스크립트 내장 모듈 포맷

모듈 로더는 주요 모듈 포맷으로 작성된 모듈을 해석하고 로드한다. 실행이 런타임

ex) RequireJS(AMD 포맷 모듈을 위한 로더), SystemJS(AMD, CommonJS, UMD 또는 System.register 포맷 모듈을 위한 로더)

모듈 번들러는 빌드 타임에 실행되는 점이 다름

ex) Browserify(CommonJS모듈을 위한 번들러), Webpack(AMD, CommonJS, ES6모듈을 위한 번들러)

요약

모듈은 구현 세부 사항을 캡슐화하고 공개 API를 노출해 다른 코드에서 쉽게 로드하고 사용할 수 있도록 재사용 가능한 코드 조각이다.

모듈 포맷은 모듈을 정의하기 위해 사용하는 문법이다. AMD, CommonJS, UMD, System.register와 같은 여러 모듈 포맷이 과거 등장했으며 ES6부터 내장된 모듈 포맷을 사용할 수 있다.

모듈 로더는 주요 모듈 포맷으로 작성된 모듈을 런타임 때 로드하고 해석한다.

모듈 번들러는 모듈 로더를 대체하고 빌드 타임에 모든 코드의 번들을 생성한다.