JavaScript

import와 export - ES6

파란배개 2020. 11. 23. 10:40

#ES6에서는 내장 모듈 시스템이 생겼다(import, export)

 

commonJS의 require과 exports와 동일한 기능이다.

 

모듈을 내보낼 때(export)

//파일 마지막에
export default getMsg;

 

모듈을 가져올 때(import)

//파일 처음에
import getMsg from './getMsg';

 

default는 사실 안 써도 된다.

default를 쓰는 이유는 여러개의 함수를 내보낼 때가 아니라 하나의 함수만 내보낼 때 default를 쓰면 다른 파일에서 함수를 가져와서 사용할 때 객체에서 함수를 꺼내 쓰는게 아니라 같은 파일에서 만든 함수를 사용하듯이 사용할 수 있다.

 

Bundler

의존성이 있는 여러개의 파일들을 하나의 파일로 만들어주는 것. 번들러를 사용하면 html에서도 스크립트로 불러와 사용할 수 있다.

번들러를 사용하면 모듈을 사용할 수록 가져와야 할 파일들이 줄어든다(서버-클라이언트간 요청, 응답 과정이 줄어듦).