ES Modules export&default

import {Module} from './module';
import Module from './module';
import as * Module from './module';
const Module = await import('./module')

이 글은 노마드코더 니꼬쌤의 강의를 보고 정리한 내용입니다.
무심코 지나칠 수 있는 작은 정보들을 기록합니다.

코드를 Import & Export하는 여러가지 방법과 차이

✔️ Named Export하는 경우

import { 함수이름 } from './file명';

// 불러온 함수이름을 다른이름으로 바꾸고 싶다면? 
import { 함수이름 as 다른이름 } from './file명';

✔️ default export

파일마다 단 한개를 가진다. export default {a, b, c}

// 불러온 함수이름을 다른이름으로 바꾸고 싶다면? 
import 다른이름 from './file명'

// Named Export 와 default export를 섞어 사용도 가능하다.
import default명, {named명} from './file명'

✔️ * 모든 함수 불러오기

모든 함수를 한번에 import 한다.
default export가 없는 파일 일 때 가능

import * as from'./file명';

✔️ 성능을 고려한 다이나믹 모듈

로딩의 속도를 빠르게 하는 방법
1. 필요한 것만 import 하도록 한다.
2. 다이나믹 import: 동적으로 모듈가져오기

요청이 있을 때만 모듈을 로딩할 수 있도록 하는 것도 가능하다.
즉, 로딩이 필요할때까지 기다려줍니다.
'import'로 import된 모듈의 모든 함수에 접근할 수 있다.

async function doMath() {
const math = await import("./math");
math.plus(2.2);
}
btn.addEventListener('click', doMath);

✨ 모던 자바스크립트 튜토리얼 문서

import export https://ko.javascript.info/import-export

다이나믹 모듈 https://ko.javascript.info/modules-dynamic-imports