ECMAScript 모듈, 다이나믹 임포트, await

ECMAScript 모듈

ECMAScript 모듈(ES모듈)은 공식적인 자바스크립트 모듈 형식입니다. ( import, export... ). 노드에서는 아직까지 CommonJS 모듈(require, exports...) 를 쓰긴 하지만, ES 모듈이 표준으로 정해지면서 브라우저와 노드 모두에 같은 모듈 형식을 사용할 수 있게 되었습니다.

CommonJS

const odd = "홀수입니다";
const even = "작수입니다";

module.exports = {
  odd,
  even,
};

const value = require("./var");

ESmodule

export const odd = "홀수입니다";
export const even = "작수입니다";

import { odd, even } from './var.mjs'

mjs확장자가 아닌 react 할 때 처럼 js확장자로 하면 'SyntaxError: Cannot use import statement outside a module' 오류가 발생한다. 이는 현재 package.json 파일이 없거나, package.json에 type필드가 존재하지 않으므로, default값인 common.js 방식이 적용되어 모듈 처리방식이 require방식이 되기 때문이다.

따라서 ES6의 import, export를 사용하려면 package.json에 "type: "module"를 추가해야 한다.

다이나믹 임포트

무조건 처음부터 불러 오는 것이 아닌 조건부로 모듈을 불러오는 것을 의미합니다.
대신 CommonJS에서만 가능하고, 똑같이 쓰면 ES 모듈에서는 오류가 납니다.

const a = false;

if (a) {
  require('./ESmodule.js')
} else {
  console.log("동적임포트")
}

ESmodule에서도 다이나믹 임포트 하는법

const a = true;

if (a) {
  const m1 = await import("./ESmodule");
  const m2 = await import("./ESmodule");
} else {
  console.log("동적임포트")
}

import는 promise이기 때문에 await를 통해서 받아오면 가능하다