import
/export
는 코드 구조의 중심을 잡아주는 역할let modulePath = prompt("어떤 모듈을 불러오고 싶으세요?");
import(modulePath)
.then(obj => <모듈 객체>)
.catch(err => <로딩 에러, e.g. 해당하는 모듈이 없는 경우>)
script type="module"
가 없어도 됨⇒ index.html
<!doctype html>
<script>
async function load() {
let say = await import('./say.js');
say.hi(); // 안녕하세요.
say.bye(); // 안녕히 가세요.
say.default(); // export default한 모듈을 불러왔습니다!
}
</script>
<button onclick="load()">클릭해주세요,</button>
⇒ say.js
export function hi() {
alert(`안녕하세요.`);
}
export function bye() {
alert(`안녕히 가세요.`);
}
export default function() {
alert("export default한 모듈을 불러왔습니다!");
}
저번 챕터를 공부할 때, 정적이 아닌 동적인 것도 있으면 좋을 것 같다라는 생각을 했었는데, 다행히도 있었다.
동적으로 모듈을 가져오는 것을 통해 내가 원하는 타이밍 때 import를 함으로써 유연하게 처리할 수 있는 방법을 배워서 좋았던 것 같다.