[TIL] module import / export

모듈이란?
개별적 존재로서 애플리케이션과 분리되어 존재하고, 하나의 파일이 하나의 모듈을 형성한다.
독립적인 스코프를 가지며, 모듈 내에서 선언한 변수, 함수, 클래스 등은 기본적으로 외부에서 접근할 수 없다.
export 와 import를 사용하여 특정 부분을 내보내고 가져와서 다른 모듈에서 사용할 수 있게끔 하는 것이다.

 

 

ES6부터 추가된 자바스크립트 모듈 기능

//html에 추가하기
<script type="module" src="script.js"></script>

 

모듈은 HTML 문서가 완전히 준비될 때까지 대기 상태에 있다가 HTML 문서가 완전히 만들어진 이후에 실행된다.

 

 

 

다른 모듈들이 재사용할 수 있게 하려면 export 키워드를 사용한다.

다른 페이지에 함수 내보내기

// script.js
const config = {
	api: /* my api key 입력 */
}

export default apiKey

// 선언문 앞에도 사용 가능
export const name = 'Kim'

 

//getmovie.js
export let getMoives = () => [1, 2, 3];

 

내보낸 함수 불러오기

// app.js
import { getMoives } from './getMovie.js';

import config from './config.js';

//async 함수 안에서도 사용 가능
let module = await import(modulePath)

 

// Default exports 로 객체, 함수, 클래스 등이 될 수 있다.
// 모듈 당 딱 한개의 default export만 있어야한다.

let config = function config(a){
	return a * a;
}

export default config;

 

파이어베이스를 배울 때 처음 module을 써봤는데, 처음 보는 문장이여서 생소했다. 

깃허브 페이지를 만들려고 모듈을 적용했더니 호스팅이 안되서 너무 난감했다..