Intro

• 1개 파일에 모든 코드가 들어간 것 보다 코드들이 잘개 쪼개져 있는게 더 좋다.
• 모듈은 변수와 함수를 구성하는 더 좋은 방법을 제공한다.
• 모듈을 잘 알아두면 코드를 깔끔하게 정리할 수 있다.
• 모듈 덕분에 코드들을 작은 파일로 나눌 수 있고, import / export 할 수 있다.
• 모듈은 함수와 변수를 모듈 스코프에 넣고, 모듈 스코프를 통해 모듈 함수 사이에서 변수를 공유할 수 있다.
• 다이나믹 모듈을 이용하면 어플리케이션 로딩을 더 빠르게 할 수 있다.

Named Export

import { name } from "file";

• 파일 혹은 모듈이 원하는 만큼의 named exports를 가질 수 있다
• import 하려는 이름은 export 했던 함수(변수) 이름과 같아야 한다

// math.js
export const plus = (a, b) => a + b;
export const minus = (a, b) => a - b;
export const divide = (a, b) => a / b;

// main.js
import { plus } from './math';

as 키워드를 이용해 다른 이름으로 import 할 수 있다

import { plus as add } from './math';

* as name 키워드로 export한 모든 내용을 import 할 수 있다. * 키워드로 math.js 파일에 있는 모든 내용을 import한 후 myMath 객체에 넣는 예시. 이 방식은 default export가 없는 파일에서만 가능하다

// math.js
export const plus = (a, b) => a + b;
export const minus = (a, b) => a - b;
export const divide = (a, b) => a / b;

// main.js
import * as myMath from './math';
myMath.plus(2, 2);

Default Export