모던 자바스크립트, 모듈 1 - import 와 export 방식

명명된 이름으로 모듈화하기 (named export, named import)

• 이름을 지어 export 하고 그 이름을 받아 import 하는 방식이다.
• 모듈을 만들었을 때 변화에 가장 유연하기에 가장 선호되어야 하는 방식이다.
• 모듈 배포 후 여기저기서 의존한 이후에도 업데이트하는 것이 상대적으로 자유롭다.

네임드 익스포트 혹은 명명된 익스포트 (named export)

• 변수, 함수, 클래스 등을 내보낼 수 있다.
• as 를 이용해 별칭으로 내보내는 것도 가능하다.
  • 이를 이용해 {... as default} 로 기본 익스포트를 만들 수는 있지만 추천되는 방법이 아니다.
• export { a, b } 혹은 import {a, b} from "/abc.js" 는 디스트럭처링 처럼 생겼지만 전혀 아니다.

// 내보내기 (var, let, const, function, class 타입이 가능하다)
export let myVariable = Math.sqrt(2);
export function myFunction() {
  // …
}

// 모듈 스코프에 존재하는 함수와 변수 나중에 내보내기
export { myFunction2, myVariable2 };

// 다른 이름으로 내보내기
const itsMyVariable = 1;
export { itsMyVariable as v };

네임드 임포트 혹은 명명된 임포트 (named import)

• 필요한 변수나 함수를 모듈에서 가져올 수 있다.
• {} 기호를 이용해서 가져올 이름을 입력하면 된다.
• as 를 이용해 이름을 변경해서 가져오는 것도 가능하다.
• default 모듈을 import 할 수도 있지만, 모범 사례가 아니다.

import { myVariable, myFunction } from "/modules/my-module.js";
import {
  myVariable as myVar,
  myFunction as myFunc,
} from "/modules/my-module.js";
import { default as something } from "/my_module.js";

기본 이름으로 모듈화하기 (export default, import default)

• 모듈의 기본 이름을 이용해 모듈로 내보내고 받는 방식이다.
• 신중하게 이용해야 하는 import, export 방식이다.
  • 단 하나만 가능하므로 일단 다른 js가 어떤 모듈의 default export 에 의존한다면, 해당 모듈의 default export 에 해당하는 코드를 수정하기 힘들어진다.

기본 익스포트 (export default)

export default myFunction;

export default function () { /* … */ }
export default class { /* … */ }

export { myFunction as default }; // 맨위의 export default myFunction; 와 같은 의미이다.

기본 임포트 (default import)

• {} 기호 없이 import 기호를 이용하면 된다.
• 원하는 이름으로 불러오면 된다.

import example from "./module.js";

console.log(example);
example();

default 모듈만의 특징

• 식별자나 TDZ 에 영향을 받지 않는 유일한 export 방법이다
  • 식별자가 없다는 것만 제외하면 named export 과 똑같다.
• default 는 모듈의 다른 코드에 접근할 수 없다.
• 익명 혹은 익명 클래스로 모듈을 내보낼 수 있는 유일한 장소이다.
• default 이후의 나머지 코드가 default 를 건들 수 없으니 안전한 export 가 가능하다.
• export default 다음에 식별자를 쓰는 일은 의미가 없다.
• export default 를 export default 만의 목적이 없이 그냥 쓰는 것을 추천하지 않는다.
• export default 는 어떻게 보면 모듈의 큰 부분을 바꿀 수 없는 큰 제약을 거는 것이다.
  • export default 가 바뀌어버리면 import 한 사람들이 전부 소스코드를 바꾸어야 할 수도 있다.

네임 스페이스로 모듈화하기 (Namespace import, Namespace export)

• ES6 이전에 네임스페이스 객체로 모듈화 하는 것의 모듈 버전쯤 된다.
• 모든 named export 등을 한번에 가져올 때 유용하다.
• 단, 네임스페이스 export 와 명명된 export 를 결합할 수는 없다.
  • 기본값은 가능하긴 한데, 기본 값 임포트가 먼저 나와야 한다.
  • 스펙에서 파싱 복잡성을 피하기 위해 지원하지 않는다.

export const doAllAmazingThings = () => {
  console.log("hello world");
};

import * as myModule from "/modules/my-module.js";
myModule.doAllTheAmazingThings();

import def, * as ns from "./mod.js"; // 정상
import * as ns, def from "./mod.js"; // 에러가 난다.
import def, {a, b as bee} from "./mod.js"; // 정상
import * as ns, {a, b as bee} from "./mod.js"; // 에러가 난다.

사이드 이펙트로 모듈화하기

• 전역에 영향을 주는 스크립트를 작성해서 불러와야될 때가 있다.
• 이를테면, polyfill 은 prototype 의 내용을 바꿔서 새로운 함수를 추가해준다.

/**
 * Array.flat() polyfill
 * Adapted from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flat#reduce_concat_isArray_recursivity
 */
if (!Array.prototype.flat) {
  Array.prototype.flat = function (depth) {
    "use strict";

    // If no depth is specified, default to 1
    if (depth === undefined) {
      depth = 1;
    }

    // Recursively reduce sub-arrays to the specified depth
    var flatten = function (arr, depth) {
      // If depth is 0, return the array as-is
      if (depth < 1) {
        return arr.slice();
      }

      // Otherwise, concatenate into the parent array
      return arr.reduce(function (acc, val) {
        return acc.concat(Array.isArray(val) ? flatten(val, depth - 1) : val);
      }, []);
    };

    return flatten(this, depth);
  };
}

import "./polyfill.js"; // Array.prototype.flat 이 없다면 추가해줌, 지원하지 않는 브라우저 용도

롤업 모듈과 간접 익스포트 (indirect export)

• 간접 익스포트는 다른 모듈의 일부 혹은 전체를 받아 다시 export 하는 것을 말한다.
• 나에게 필요한 모듈만 모아놓은 또 다른 모듈을 만들 때 유용하다.

가져온 이후에 export 하기

import { example } from "example.js";
export { example };

가져오면서 바로 export 하기

• export 에서 from 을 덧붙여 아래와 같은 것도 가능하다.
  • 그러나 export 는 import 가 아니므로 로깅에서 에러가 난다. 사용할 수 없음에 유의하자.

export { example } from "example.js";
export { example1 as ex1 } from "example.js"; // 이것도 가능
console.log(example); //error

모듈의 모든 내용을 바로 export 하기

• 이 기능은 내가 export 하는 모듈에 새로운 export 가 업데이트 됐을 때 유용하다

export * from "example.js";

export 의 이상적인 방식

• 가장 밑으로 미루는 것이 좋다.
  • 왜냐하면 TDZ의 흐름과 일치하기 때문이다.
  • export 에는 TDZ 가 사용되지 않지만 그것을 따로 인지하면서 코딩하기는 굉장히 어렵기 때문이다.

잘못된 예제

let a = [1, 2, 3];
export { a };
a = [5, 6];

• a 는 변화가 가능하기 때문에 결국 export 이후 결과가 [5, 6] 이 되긴 한다.
  • 이 코드를 보는 모든 사람이 단번에 알기는 어렵다.
• export 모델만 TDZ 를 사용하지 않아서 기존 자바스크립트 코드를 짜다가 봤을 때 굉장히 헷갈린다.

올바른 예제

let a = [1, 2, 3];
a = [5, 6];
export { a };

• 우리가 평소에 JS 코드를 작성할 때 하는 사고에서 위배되지 않는 자연스러운 코드이다.

동적 모듈 임포트

• 필요에 의해 if 와 같은 조건문을 주고 동적으로 모듈을 임포트할 수 있다.
• 동적 모듈 임포트도 정적으로 로드된 모듈과 마찬가지로 캐싱된다.

이전까지의 import 방식의 특징 (정적 모듈 임포트)

• 이전까지의 import 방식은 모듈 지정자 (module specifier) 에 표현식이 아닌 문자열 리터럴을 넣었다.
• 최상위 수준에서만 import 혹은 export 사용이 가능했다.
• if 문 혹은 while 문과 같은 조건문에서 조건에 따라 모듈을 임포트할 수 없었다.
• 정적인 덕분에 코드를 실행하지 않고도 의존성을 확인할 수 있었다.

그러나 일부 사용 사례에서는 런타임에 가져올 모듈의 엔트리나 위치를 결정해야 한다.
이 때문에 ES2020 부터 동적 모듈 임포트가 추가되었다.

동적 모듈 임포트

import(variable /* 런타임에 결정되는 이름 */)
  .then((mod) => {
    // ...
  })
  .catch((err) => {
    console.log(err);
  });

• 위에서 import 는 함수 호출이 아니라서 동적 모듈 임포트 외의 다른 목적으로 사용이 불가능하다.
• 일반 함수 호출이 안되는 이유가 2가지 있다.
  • 일반 함수 호출이 전달하지 않는 컨텍스트 정보를 전달해야 한다.
  • 트리 셰이킹 등을 위해 동적 임포트가 사용되는지 알아야 한다.

플러그인을 로드하는 예시 함수

async function loadPlugins(editor, discoveredPluginFiles) {
  const plugins = [];
  const failed = [];

  await Promise.all(
    discoveredPluginFiles.map(async (pluginFile) => {
      try {
        const plugin = await import(pluginFiles);
        plugin.init(editor);
        plugins.push(plugin);
      } catch (error) {
        failed.push({ error, pluginFile });
      }
    })
  );

  return { plugins, filaed };
}

• 플러그인 배열을 인자로 주어 플러그인을 병렬로 로드한다.
• 로드된 플러그인과 실패한 플러그인이 결과 객체로 반환된다.

모듈의 메타 데이터 정보 확인하기

• import.meta 를 통해 모듈의 메타정보를 확인할 수 있다.

console.log(import.meta.url); // 모듈이 불러진 URL 을 알 수 있다.

웹 워커를 모듈 형태로 로드하기

• 웹 워커를 모듈 형태로 생성할 수 있지만, 브라우저 지원을 잘 확인해야 한다.

const worker = new Worker("./worker.js", { type: "module" });