CH07. 모듈

🍡모듈

: 가져오기/내보내기 문법이 작성된 특정 데이터들의 집합(파일)

🍡모듈화

: 어떠한 기능이나 데이터들을 각각의 파일로 구분하는 개념

• module.js

export const hello = 'hello world'     //내보내기

• main.js

import { hello } from './module.js'    //가져오기, hello:내보내지는 변수이름

console.log(hello)      // hello world 출력

• index.html

<script type="module"></script>

🍡가져오기/내보내기 패턴

1. 기본 내보내기
   : 하나의 모듈에서는 default 키워드 한번만 사용가능

• module.js

export default 123

• main.js

import num from './module.js'
console.log(num)      //123 출력

2. 이름 내보내기
   : 이름을 가지는 방식으로 내보낼 경우 여러개의 데이터를 내보낼 수 있음, 가져와서 사용할 때 중괄호 안에 해당하는 데이터의 이름을 명시

• module.js

export const str = 'ABC'
export const arr = []
export function hello() {}

• main.js

import { str, arr, hello } from './module.js'

console.log(str)    //ABC 출력

• 가져와서 이름 바꾸기

import { str as tbz, arr, hello } from './module.js'

console.log(tbz)    //ABC 출력

3. 와일드카드(*)
   : 여러개의 개념을 한번에 지정

• main.js

import * as tbz from './module.js'   //전체를 tbz라는 이름으로 현재 main.js에서 활용

console.log(tbz)   //default: 123  arr: Array(0) ...등 모든 내용을 하나의 객체 데이터로 출력

🍡동적으로 모듈 가져오기

: import는 js의 최상단에 작성해야하기 때문에 함수 내부에는 작성할 수 없음
-> import 함수 사용하면 코드의 중간에서 모듈을 동적으로 가져와 사용가능

setTimeout(() => {
  import('./module.js').then(tbz => {    //매개변수로 모듈 넣기
    console.log(tbz)     //default: 123  arr: Array(0) ...등 모든 내용을 하나의 객체 데이터로 출력
  })
},1000)

🍡가져와서 바로 내보내기

• a.js

export const a = () => 123

• b.js

export const b = () => 456

• utils.js

export { a } from './a.js'
export { b } from './b.js'

• main.js

import { a, b } from './utils.js'

console.log(a())     //123
console.log(b())     //456