P4Ch7. 모듈

모듈

모듈: 특정 데이터들의 집합(파일), 가져오기(Import), 내보내기(Export)가 된 Javascript 파일.

예시

1

export const hello = "Hello world!";

module.js

1
2

import { hello } from "./module.js";
console.log(hello);

main.js

가져오기와 내보내기

export를 통해 다른 파일로 내보내기가 가능하고, import를 통해 다른 파일의 내용을 가져와 사용할 수 있다. → 모듈화

내보내기에는 두 가지의 패턴이 있다.

  • 기본 내보내기: default키워드를 사용해 export 하는 것
    • default 를 중복사용할 수 없다.
  • 이름 내보내기: 이름을 명시해 export하는 것
    • 한번에 여러개를 내보낼 수 있다.
    • import할때 중괄호를 사용해서 해당 이름으로 가져와야 한다.
    • import 할 때 as를 사용해 이름을 변경할 수 있다.
1
2
3
4
5
6

//기본 내보내기
export default 123;
//이름 내보내기
export const str = "ABC";
export const arr = [];
export const hello = () => {};

module.js

1
2
3
4

import number, { str as xyz, arr, hello } from "./module.js";
console.log(number); //123
console.log(xyz); //ABC
console.log(hello); //hello() {}

main.js

  • 모든 데이터를 하나의 변수에 할당해 가져올 수 있다.
    • 이때 *를 와일드카드라고 한다.
    • 와일드카드: 여러개의 개념을 한 번에 지정함
1
2
3
4
5

import * as abc from "./module.js";
console.log(abc); //arr: Array(0)
//defualt: 123
//hello: f hello()
//str: 'ABC'

main.js

동적인 모듈 사용

동적으로 모듈 가져오기

❓
코드 중간에서 바로 모듈을 가져오기
import를 키워드를 사용한 가져오기는 코드 최상단에서밖에 사용할 수 없다.
코드 중간에서 모듈을 동적으로 import하기 위해 import() 함수를 사용할 수 있다. 


1
2
3
4
5
6

//기본 내보내기
export default 123;
//이름 내보내기
export const str = "ABC";
export const arr = [];
export const hello = () => {};

module.js

import() 함수는 비동기적으로 동작한다!

모듈이 모두 import 됐는지 기다릴 필요가 있다.

  1. then을 사용한 import()
1
2
3
4
5

setTimeout(() => {
  import("./module.js").then((abc) => {
    console.log(abc);
  });
}, 1000);

main.js import()를 사용해 모듈을 가져오고, 모듈을 다 가져왔다면 **then**을 통해 콜백을 실행한다.

  1. await과 async를 사용한 import()
1
2
3
4

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

main.js import()를 사용해 모듈을 가져오고, await을 사용해 모듈을 다 가져올때까지 기다린다.

이때 await 키워드를 사용하기 위해서는 콜백 함수 앞에 async 키워드를 추가해야한다.

동적으로 모듈 내보내기

1
2
3
4
5

import { a } from "./a.js";
import { b } from "./b.js";

console.log(a());
console.log(b());

main.js a와 b를 사용하기 위해선 각 모듈에서 따로 함수를 들고와야한다.

⇒ utils.js를 사용해 한번에 import한다.

1
2

export { a } from "./a.js";
export { b } from "./b.js";

utils.js

1
2
3
4

import { a, b } from "./utils.js";

console.log(a());
console.log(b());

main.js