[JavaScript] ES6 Module

Moudle

목적에 따라 코드들을 파일 단위로 나누어 분류한 것

 

 

 

모듈의 규칙은 다음과 같다.

 

 

    - 코드 추상화 : 특수한 라이브러리에 기능을 위임하여 실제 구현의 복잡도를 이해할 필요가 없다.

 

    - 코드 캡슐화 : 코드를 변경하지 않으려면 모듈 내부에 코드를 숨긴다.

 

    - 코드 재사용 : 같은 코드를 반복해서 작성하는 것을 피한다.

 

    - 의존성 관리 : 코드를 다시 작성하지 않고도 쉽게 의존성을 변경한다.

 

비표준 모듈 시스템의 경우 즉시 실행되는 함수인 IIFE와 name space를 활용하여 모듈을 사용해왔고, 이에 대한 문제점을 해결하기 위해 CommonJs, 비동기 모듈 정의가 나오면서 비동기적으로 네트워킹이 가능하다는 점과 비교적 단순하다는 점에서 사용되었으나 ES6 표준이 나오게 되면서 ES6 Moudle Syntax를 주로 따르게 되었다.

 

ES6 Moudle 에서는 'export', 'import' 문의 사용으로 파일 내 단위 영역 기준 최상단 영역에서만 사용이 가능하다.

 

로드할 때 단일 모듈인 경우 import from문이 쓰이고, 여러 모듈을 가져오는 경우에는 중괄호로 묶어 일부를 가져오거나 '*' 으로 모든 모듈을 가져올 수 있다.

 

import main from 'main.js'; // OKAY
while(true) {
	import main from 'main.js'; // Uncaught SyntaxError: Unexpected identifier
}

import {a, b, ...} from 'main.js'
import * from 'main.js'

 

아웃풋 모듈은 default 를 붙여 단일 모듈을 공유할 때와, import와 같이 '*'를 통해 여러 모듈을 추출할 수 있다.

export default 'main'
export default class {}

export * from 'module.js';

 

아래와 같이 as 문을 이용해 외부 모듈명과 다르게 별칭을 설정해줄 수도 있다.

import * as m1 from 'module'

const name = 'leedero';
export { name as n };

const myFavoriteFruitList = ['banana', 'peach']
export { myFavoriteFruitList as myFruits }