48장 모듈

48.1 모듈의 일반적인 의미

• 모듈은 앱을 구성하는 개별요소로 재사용할 수 있는 코드 조각을 의미한다.

• 모듈은 자기만의 모듈 스코프를 가져야한다.

• 보통 모듈은 파일 단위로 분리한다.

• 모듈은 선택적으로 자기가 가진 리소스를 공개할 수 있다. (export)

• 모듈의 사용자는 모듈이 공개한 리소스 중 일부 또는 전체를 자신의 스코프 내로 불러들여 사용할 수 있다. (import)

48.2 자바스크립트 모듈

• 기존 자바스크립트는 모듈 시스템을 가지고 있지 않았다.

• script 태그로 불러온 여러 스크립트들은 마치 하나의 파일안에 작성된 코드들처럼 동작한다.

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

• 자바스크립트에서 모듈시스템을 사용하기 위해 CommonJS와 AMD의 방식이 제안되기도 했고, ES6에서는 ESM 방식이 도입되었다.

  // CommonJS
  const $ = require("jquery");

  // AMD
  require(["jquery"], function ($) {
    // ...
  });

  // ESM
  import $ from "jquery";

48.3 ES6 모듈(ESM)

• 특정 스크립트를 ESM으로 취급하기 위해서는 script태그에 type="module" 어트리뷰트를 추가해야한다.

  <script type="module" src="script.js"></script>

• ESM에서는 기본적으로 strict mode가 적용된다.

• ESM은 독자적인 모듈 스코프를 제공한다.

• export 키워드를 통해 특정 식별자를 공개할 수 있다.

  export const a = 1;
  export function f() {}
  export class C {}
  
  // 혹은 하나의 객체로 묶어 공개할 수도 있다.
  const a = 1;
  function f() {}
  class C {}
  
  export { a, f, C };

• 모듈안에서 하나의 값에 한해 default export 값을 정할 수 있다.

  const a = 1;
  
  export default a;
  
  // 혹은 이러한 방식도 가능하다.
  
  export default x => x + 1;

• default 키워드를 사용하는 경우 const, let, var 키워드는 함께 사용할 수 없다.

• import 키워드를 통해 다른 모듈이 공개한 값을 가져올 수 있다.

• 기본적으로 export한 식별자의 이름을 그대로 사용해 import 해야한다.

  import { a, f, C } from "./someModule.js";

• as 키워드를 통해 식별자 이름은 변경하여 import 할 수 있다.

  import { a as A, f as F, C as CC } from "./someModule.js";

• '*'를 통해 모든 리소스를 한 번에 import 할 수도 있다. 이때, 반드시 as 키워드를 통해 네임스페이스를 지정해줘야한다.

  import * as someModule from "./someModule.js";

• default export의 경우 {} 없이 임의의 이름으로 import 한다.

  // someModule.js
  const a = 1;
  
  export default a;
  
  // index.js
  import A from "./someModule.js";