모듈 시스템 : CommonJS, AMD, UMD, ES6

모듈 module 이란?

모듈은 여러기능들에 관한 코드가 모여있는 하나의 파일로 다음과 같은 것들을 위해 사용한다.

• 유지 보수성 
  기능들이 모듈화가 잘 되어있다면, 의존성을 그만큼 줄일수 있기 때문에
  어떤 기능을 개선한다던가 수정할 때 훨씬 편하게 할 수 있다.
• 네임스페이스화
  JS에서 전역 변수는 전역 공간을 갖기에 코드가 만을수록 곂치는 네임스페이스가 많아질 수 있다.
  그러나 모듈로 분리하면 모듈만의 네임 스페이스를 갖기에 문제가 해결된다.
• 재사용성
  똑같은 코드를 반복하지 않고 모듈로 분리시켜 필요할 때마다 사용가능하다.

 

CommonJS

JS 공식 스펙이 브라우저만 지원했기에 SSR 및 데스크탑 어플리케이션을 지원하기위해
범용적인 언어로 쓰이기 위한 스펙을 모듈방식으로 정의한 것이 CommonJS 방식의 모듈화이다.

• 다른 모듈을 사용할 때는 require를 사용
  모듈을 해당 스코프 밖으로 보낼때는 module.exports를 사용
• exports와 module.exports의 관계
  module.exports는 빈 객체를 참고, exports는 module.exports를 참조
  (require는 항상 module.exports를 리턴 받는다)
  구분한 이유 : exports를 사용하면 module.exports를 수정하지 않고 객체의 맴버를 만들거나 수정하는 방식을 사용
  ➡ exports에 어떤 값을 할당해도 결국 require는 module.exports를 리턴받기에 잠제적 버그를 예방할 수 있다.

 

 

ES6(ES2015)

import와 export 구문을 사용하는 방식 (내가 가장 많이 사용하는 방식)

ES6는 모든 브라우저가 지원하지 않아서 CommonJS로 변환시켜 적용해야한다.

이때 사용하는게 Babel을 사용해 변환시켜 적용시킨다.

 

ES6에서의 export방식

• named export
  모듈내에서 여러번 가능
  import 할 때 {}로 감싸 불러와 사용
  as를 이용해 다른 이름으로 사용가능
  * 와일드카드를 이용해 한번에 내보내기/불러오기 가능
• export default
  모듈내에서 한번만 사용
  import 할 때 이름을 바로 사용 가능

 

 

AMD(Asynchronous Module Definition)

비동기 모듈에 표준을 다루는 그룹

브라우저에서 모든 모듈이 전부 로딩될 때까지 기다릴수 없기에 비동기 방식으로 모듈 로딩 방식으로 구현

사용하는 함수는 define()과 require()이며 AMD스펙을 가장 잘 구현한 모듈러는 RequireJS이다.

 

 

UMD(Universal Module Definition)

CommonJS와 AMD를 통합하기 위한 하나의 페턴이라 할 수 있다.

• AMD : define()이 함수이고, defin.amd 속성이 객체를 갖는다.
• CommonJS : module이 객체이고, module.exports 속성의 객체를 갖는다.
• Browser : 특이사항이 없다.

통합 방식은 2개의 인자를 받는 함수를 실행하는 것이다.

1. 1번째 인자는 Browser 쪽을 구현할 root에 넘길 값이며 undefined이면 this로, 아니라면 self
   즉, window로 설정한다.
2. 2번째 인자는 빈객체 리터럴을 리턴하는 함수를 보낸다.