[모던 JavaScript 튜토리얼] - [13.3] 동적으로 모듈 가져오기(modules-dynamic-imports)

IRISH·2024년 2월 9일
0

JS

목록 보기
69/80


학습 내용

  • import/export는 코드 구조의 중심을 잡아주는 역할
    • 코드 구조를 분석해 모듈을 한데 모아 번들링하고, 사용하지 않는 모듈은 제거(가지치기)해야 하는데, 코드 구조가 간단하고 고정되어있을 때만 이런 작업이 가능
      • 하지만… 모듈을 동적으로 불러와야 한다면 어떻게 해야 할까?
  • import() 표현식
let modulePath = prompt("어떤 모듈을 불러오고 싶으세요?");

import(modulePath)
  .then(obj => <모듈 객체>)
  .catch(err => <로딩 에러, e.g. 해당하는 모듈이 없는 경우>)
  • 동적 import는 일반 스크립트에서도 동작함
    • 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를 함으로써 유연하게 처리할 수 있는 방법을 배워서 좋았던 것 같다.

profile
#Software Engineer #IRISH

0개의 댓글