[4주차] Module

2023.06.19 day13

ES6 Module 사용하기

1. impot - export 키워드로 내보내진 변수, 함수 등등을 불러올 수 있는 키워드

1. 특징

1. 엔트리 js에 작성 type="module"
2. 쓰지 않을 module을 import 하지 말자
3. import를 사용하면 스크립트 의존성을 훨씬 간편하게 관리할 수 있음

2. 방식

1. module-name 내에 export default로 내보내진 것을 가져옴

import defaultExport from 'module-name';

2. module-name 내에 export 된 모든 것을 모두 가져옴, as 이후 이름은 중복되지만 않으면 자유롭게 정의 가능

import * as allItems from 'module-name';

3. module-name 내에서 export 된 것 중에 특정 값만 가져옴

import { loadItem } from 'module-name';

4. module-name 내에서 export 된 것 중에 특정 값만 이름을 바꿔서 가져옴

import { 
  loadItem as loadSomething
} from 'module-name';

5. export defaul 된 것과 개별 export 된 것을 한번에 가져 옴

import defaultFunction, { 
  loadItem
} from 'module-name';

6. 별도의 모듈 바인딩 없이 불러오기만 함
   불러오는 것만으로 효과가 있는 스크립트의 경우 사용

import 'module-name';

3. 장점

1. 각 JS별로 사용되는 모듈을 명시적으로 import 해오기 때문에, 사용되거나 사용되지 않는 스크립트를 추적 할 수 있음

2. script 태그로 로딩하는 경우 불러오는 순서가 중요하지만, import로 불러오는 경우 순서는 무관함

3. script src로 불러오는 것과 다르게 전역오염이 일어나지 않음

4. import를 사용하려면?

1. 웹 서버가 필요 -> serve 모듈로 로컬 웹 서버를 띄워서 진행하기 때문에 상관이 없음
2. 잘 안된다면? -> from 이후 모듈 이름 맨 뒤에 .js 확인