[카카오테크캠퍼스 7주차] JavaScript 마스터: 모듈

⏳ 2023. 5. 22. - 2023. 5. 28.

 

개요

모듈(Module)이란 특정 데이터들의 집합(파일)이다.

html에서 script 연결할 때 type="module" 값을 주고, import(가져오기)와 export(내보내기)를 사용할 수 있다.

// 기본 내보내기 -> default 키워드는 하나의 모듈에서 한 번만 사용할 수 있다.
export default 123;

// 가져오기
// 기본 내보내기로 가져온 데이터는 이름을 마음대로 바꿔 사용할 수 있다.
import number from "파일경로";
console.log(number); // 123


// 이름 내보내기
export const name = "iam454";

// 가져오기
// 이름 내보내기로 가져온 데이터는 기본적으로 이름을 바꿀 수 없다.
import { name } from "파일경로";
console.log(name); // "iam454"

// 그러나, as를 통해 원하는 이름으로 바꿀 수 있다.
import { name as changed } from "./module.js";
console.log(changed); // "iam454"

export ... from

하나의 파일로 내보내기/가져오기를 관리할 수도 있다.

import()

동적으로 모듈을 가지고 오고 싶을 때, 사용한다.

// import * as abc from "./module.js";
// console.log(abc);

// 3초 후 실행. 위와 같은 코드.
setTimeout(() => {
  import("./module.js").then((abc) => {
    console.log(abc);
  });
}, 3000);

// async, await 사용
setTimeout(async () => {
  const abc = await import("./module.js");
  console.log(abc);
}, 3000);