모듈

모듈의 정의

• 여러 기능들에 관한 코드가 모여있는 하나의 파일을 의미한다.

모듈 사용 이유

• 유지 보수성 : 의존성을 줄일 수 있어서 기능을 수정할 때 편하게 할 수 있다.
• 네임스페이스화 : 모듈만의 네임스페이스를 가지기에 중복되는 네임스페이스를 줄일 수 있다.
• 재사용성 : 모듈로 분리시켜 필요할 때마다 사용할 수 있다.

모듈 종류

• CommonJS, AMD, UMD, ES6..

서버사이드 JS의 핵심 문제

• 호환되는 표준 라이브러리가 없다.
• DB에 연결할 수 있는 표준 인터페이스가 없다.
• 다른 모듈을 삽입하는 표준이 되는 방법이 없다.
• 의존성 문제를 해결하는 공통 패키지 모듈 저장소가 필요하다.

CommonJS (ServerJS => CommonJS)

CommonJS 배경

• JS를 브라우저에서 뿐만 아니라, 서버사이드 App이나 데스크톱 App에서도 사용하려고 조직한 워킹 그룹.
• 공동으로 표준을 정하고 표준을 지켜나가는 활동이 필요하다고 보면서 시작됨.
• 모듈 정의 : exports 객체를 사용한다. (두 모듈 사이에 정보 교환이 필요할 경우)
• 모듈 사용 : require 함수를 사용한다. (공개된 함수를 다른 모듈에서 사용할 경우)

  // fileA.js
  let a = 1; b = 3;
  exports.sum = function (c, d) {
    return a + b + c + d;
  }
  // fileB.js
  let a = 3; b = 5;
  let test = require("fileA");
  test.sum(a,b); // 1 + 3 + 3 + 5 = 12

module.exports vs exports

• exports는 단순히 module.exports를 참조할 뿐이다. 단순히 짧은 alias.

• module.exports와 exports는 같은 객체를 바라보고 있다.

• 하단 공식 문서에 나온 차에 대한 설명.

  exports
  A reference to the module.exports that is shorter to type. See the section about the exports shortcut for details on when to use exports and when to use module.exports.
  출처: Node.js v10.6.0 Documentation

• 사용 예시

  ------------------- 가능한 예시 --------------------------

  1. module.exports.foo = "bar"
  2. exports.foo = "bar"
  3. module.exports.foo = function() {console.log("foo")}
  4. exports.foo = function() {console.log("foo")}
     ------------------- 불가능한 예시 --------------------------
     // module.exports에 빈 객체만 있게 된다.
  5. exports = {foo : "bar"}
  6. exports = function() {console.log("foo")}

AMD (Asynchronous Module Definition)

AMD 특징

• CommonJS 그룹과의 의견이 맞지 않는 사람들이 만든 그룹으로 비동기 모듈에 대한 표준안을 다룬다.
• 브라우저에서는 모든 모듈이 로딩될 때까지 기다릴 수 없기에 비동기 모듈 로딩방식으로 구현하였다.
• define(), require() 함수를 사용한다.
• AMD 스펙을 가장 잘 구현한 모듈로더는 RequireJS이다.

---

• index.js

  require.config({   // 기본 경로와 각 모듈에 해당하는 경로 설정. 
    baseUrl: '/',
    paths: {
      a: 'a',
      b: 'b',
    }
  });
  // 의존성 모듈 지정. 
  require(['a'], (a) => {  // 첫 번째 인자에 해당하는 모듈 로드 될 경우 printA() 함수를 호출하는 콜백함수 실행.   
    a.printA();   //
  });

• a.js

  // define()을 통해 정의된다. 
  define(() => {
    return {
      printA: () => console.log('a')
    }
  });

UMD (Universal Module Definition)

• CommonJS와 AMD를 통합하기 위한 패턴이다.
• 자세한 내용은 아래 링크를 참조하면 된다.
  공식 UMD 소스코드

ES6 (ES2015) 방식

ES6 특징

• import, export 구문을 사용한다.
• 모든 브라우저에서 지원하는 것이 아니기에 Babel의 @babel/plugin-transform-modules-commonjs를 통해 변환시켜 사용한다.

---

• moduleA.js

  const A = () => {};
  export default A;

• moduleB.js

  export const B = () => {};

• index.js

  import A from 'moduleA';
  import {B} from 'moduleB';

named export vs default export

named export

• 모듈 내에서 여러 번 사용할 수 있다.
• named export로 내보내면 {}로 묶어서 불러와야 한다.

default export

• 모듈 내에서 한 번만 사용할 수 있다.
• deault export로 내보내면 이름 그대로 사용 가능하다.