2023.06.19 day13
ES6 Module 사용하기
1. impot - export 키워드로 내보내진 변수, 함수 등등을 불러올 수 있는 키워드
1. 특징
- 엔트리 js에 작성
type="module"
- 쓰지 않을 module을 import 하지 말자
- import를 사용하면 스크립트 의존성을 훨씬 간편하게 관리할 수 있음
2. 방식
- module-name 내에 export default로 내보내진 것을 가져옴
import defaultExport from 'module-name';
- module-name 내에 export 된 모든 것을 모두 가져옴, as 이후 이름은 중복되지만 않으면 자유롭게 정의 가능
import * as allItems from 'module-name';
- module-name 내에서 export 된 것 중에 특정 값만 가져옴
import { loadItem } from 'module-name';
- module-name 내에서 export 된 것 중에 특정 값만 이름을 바꿔서 가져옴
import {
loadItem as loadSomething
} from 'module-name';
- export defaul 된 것과 개별 export 된 것을 한번에 가져 옴
import defaultFunction, {
loadItem
} from 'module-name';
- 별도의 모듈 바인딩 없이 불러오기만 함
불러오는 것만으로 효과가 있는 스크립트의 경우 사용
import 'module-name';
3. 장점
-
각 JS별로 사용되는 모듈을 명시적으로 import 해오기 때문에, 사용되거나 사용되지 않는 스크립트를 추적 할 수 있음
-
script 태그로 로딩하는 경우 불러오는 순서가 중요하지만, import로 불러오는 경우 순서는 무관함
-
script src로 불러오는 것과 다르게 전역오염이 일어나지 않음
4. import를 사용하려면?
- 웹 서버가 필요 -> serve 모듈로 로컬 웹 서버를 띄워서 진행하기 때문에 상관이 없음
- 잘 안된다면? -> from 이후 모듈 이름 맨 뒤에
.js
확인