개발하는 자바스크립트 애플리케이션 파일의 크기가 커지면 파일을 여러 개로 분리해서 작업할 수 있다. 이때 분리된 각각의 파일을 module이라고 한다. 모듈은 일반적으로 클래스 하나 또는 복수의 함수로 구성된 라이브러리 하나로 구성된다.
모듈에 export와 import 지시자를 적용하면 다른 모듈을 불러와 해당 모듈에 있는 클래스나 함수를 호출하는 것과 같은 자원 공유가 가능하다.
- 모듈 export : 파일이나 모듈 내의 함수나, 객체를 export 하는데 사용된다.
- 모듈 import : 외부 스크립트나 외부 모듈의 export된 함수, 객체를 가져오는데 사용된다.
import 기술 방법 ------------------------------------------
* 모듈 전체 가져오기
import * as myModule from "my-module.js";
* 하나의 멤버 가져오기
import {myMember} from "my-module.js";
* 여러 개의 멤버 가져오기
import {foo, bar} from"my-module.js";
* 다른 이름으로 멤버 가져오기
export 된 멤버 이름이 길거나, 복잡할 때, 임의의 이름으로 멤버를 지정한다.
import {reallyLongModuleName as shortName} from "my-module.js";
import {reallyLongModuleName as shortName, anotherLongModuleName as short} from "my-module.js";
* 바인딩 없이 모듈만 실행하기
단순히 특정 모듈을 불러와 실행만 할 목적이라면, import만 사용하는 것이 좋다.
import "my-module.js";
* default export 값 가져오기 : 이때는 { } 는 넣지 않는다.
import myModule from "my-module.js";
위에서 설명한 기본 구문과 함께 사용도 가능함. 이 때에는 기본 값(default export 된 값)을 가져오는 부분이 먼저 선언되어야 한다.
import myDefault, * as myModule from "my-module.js";
또는
import myDefault, {foo, bar} from "my-module.js";
이해가 더 필요하면 참조 : https://nuhends.tistory.com/80