모듈러 Javascript / ES6+

JS 모듈이란?

• JS 모듈 또는 ES 모듈, ECMAScript 모듈이라고도 함

• 자바스크립트의 중요한 새 기능 또는 새 기능들의 통칭

• 모듈은 프로그램의 일부분이라고 생각하면 됨

• 모듈은 하나 또는 그 이상의 Routine(함수, 메소드 등)으로 구성됨

ES6 Modules(ESM)

• ES6이상부터 브라우저 환경에서 사용이 가능함

• import, export를 이용해서 사용함

*import

• 다른 파일에서 모듈을 불러옴

• default export를 불러오거나 named export를 불러옴

import name from "module-name";

import * as name from "module-name";

import { member } from "module-name";

import { member as alias } from "module-name";

import { member1 , member2 } from "module-name";

import { member1 , member2 as alias2 , [...] } from "module-name";

import defaultMember, { member [ , [...] ] } from "module-name";

import defaultMember, * as alias from "module-name";

import defaultMember from "module-name";

import "module-name";

• name: 가져온 값을 받을 객체 이름

• member, memberN: export된 모듈에서 멤버의 이름만 가져옴

• defaultMember: export된 모듈의 default 이름을 지정함

• alias, alias: 객체의 이름 지정

• module-name: 가져올 모듈이름, 파일명

 

*export

• 자바스크립트 모듈에서 함수, 객체, 원시 값을 내보낼 때 사용함

• 내보낸 값은 다른 프로그램에서 import로 사용 가능

• html내장 스크립트에 사용할 수 없음

• 기본적으로 named export, default export 두 가지 방법 존재

 

*named export

• 선언된 변수명 그대로 export함

• 모듈 내에 여러개 존재할 수 있음

• 변수 선언과 동시에 내보내도록 하거나 먼저 정의된 변수들을 모아서 내보내는 방법이 있음

 

*default export

• 모듈에서 하나만 존재할 수 있음

 

*export - from

• import와 export를 한번에 처리할 수 있음

• 패키지의 다른 모듈들을 한 곳에 모아 일관된 형태로 내보내거나 관리하고자할 때 사용함