[4주차] Module

JIY00N·2023년 6월 19일
0
post-thumbnail

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';
  1. module-name 내에 export 된 모든 것을 모두 가져옴, as 이후 이름은 중복되지만 않으면 자유롭게 정의 가능
import * as allItems from 'module-name';
  1. module-name 내에서 export 된 것 중에 특정 값만 가져옴
import { loadItem } from 'module-name';
  1. module-name 내에서 export 된 것 중에 특정 값만 이름을 바꿔서 가져옴
import { 
  loadItem as loadSomething
} from 'module-name';
  1. export defaul 된 것과 개별 export 된 것을 한번에 가져 옴
import defaultFunction, { 
  loadItem
} from 'module-name';
  1. 별도의 모듈 바인딩 없이 불러오기만 함
    불러오는 것만으로 효과가 있는 스크립트의 경우 사용
import 'module-name';

3. 장점

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

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

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

4. import를 사용하려면?

  1. 웹 서버가 필요 -> serve 모듈로 로컬 웹 서버를 띄워서 진행하기 때문에 상관이 없음
  2. 잘 안된다면? -> from 이후 모듈 이름 맨 뒤에 .js 확인
profile
블로그 이전 했습니다. https://yoon-log.vercel.app/

0개의 댓글