HTML Academy · 강의

모듈의 동적 import()

동적 import()로 필요할 때 모듈 로드하기

모듈의 동적 import()은(는) CoddyKit의 무료 HTML Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 HTML Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

import() 표현식

정적 import 선언과 달리 import("./module.js")는 모듈 네임스페이스로 해결되는 프로미스를 반환하는 표현식입니다. 함수, 조건문, 심지어 모듈이 아닌 스크립트 내부에서도 어디서나 사용할 수 있습니다.

코드 분할

동적 가져오기는 코드 분할의 기본 메커니즘입니다. 경로 처리기는 사용자가 해당 경로로 이동할 때까지 경로 코드를 불러오는 작업을 미룰 수 있습니다: const mod = await import("./routes/admin.js"). 경로에 필요한 바이트는 필요할 때까지 다운로드되지 않습니다.

document.getElementById("settings-btn").addEventListener("click", async () => {
  const { renderSettings } = await import("./settings.js");
  renderSettings();
});

반환되는 모듈 네임스페이스

해결된 값은 모듈 네임스페이스이며, 모듈의 내보내기를 속성으로 포함하는 객체입니다. 이름 있는 내보내기는 인라인에서 구조 분해하거나, 기본 내보내기에 module.default로 접근할 수 있습니다.

오류 처리

import()는 프로미스를 반환하므로 실패한 가져오기나 구문 오류에서 발생한 오류가 .catch()로 전파됩니다. 동적 가져오기를 비동기 함수 안의 try/catch 또는 .catch()로 감싸 네트워크 실패를 적절히 처리하십시오.

try {
  const mod = await import("./optional.js");
  mod.run();
} catch (e) {
  console.warn("Optional module failed", e);
}

조건부 로딩

오래된 브라우저에서만 폴리필을 불러오십시오: if (!window.IntersectionObserver) await import("intersection-observer-polyfill"). 최신 브라우저는 해당 바이트를 전혀 다운로드하지 않고, 오래된 브라우저는 필요한 경우에만 비용을 부담합니다.

지정자 확인

지정자는 정적 가져오기와 같은 규칙을 따릅니다. 상대 URL, 절대 URL 또는 가져오기 맵으로 매핑된 이름만 있는 지정자를 사용할 수 있습니다. 동적 문자열도 사용할 수 있습니다: import(`./locales/${lang}.js`). 다만 번들러는 이를 코드 분할하기 어려워할 수 있습니다.

캐싱

각 고유 지정자는 동일한 모듈 인스턴스로 확인됩니다. 두 번째 import("./mod.js")는 네트워크를 다시 왕복하지 않고 이미 로드된 모듈을 반환하므로, 반복 다운로드를 걱정하지 않고 이벤트 처리기에서 동적 가져오기를 안전하게 사용할 수 있습니다.

최상위 동적 가져오기

모듈 내부에서는 동적 가져오기와 함께 최상위 await를 사용하여 비동기로 로드되는 도우미를 사용할 수 있을 때까지 실행을 지연할 수 있습니다. 실행 시점에 플러그인 목록이 정해지는 플러그인 시스템에 유용합니다.

// module.js
const { plugin } = await import(`./plugins/${process.env.PLUGIN}.js`);
plugin.init();

React.lazy 및 프리액트와 함께 사용

React.lazy, 프리액트의 `lazy`(preact/compat에서 제공), 뷰의 defineAsyncComponent는 모두 동적 import()를 감싸 컴포넌트 수준의 코드 분할을 수행합니다. 브라우저의 기본 기능은 import()이고, 프레임워크는 그 위에 서스펜스와 유사한 로딩 경계를 추가합니다.

웹팩과 비트의 분할

번들러는 소스에서 import("...")를 발견하고 가져온 모듈을 위한 별도 청크를 생성합니다. 실행 시 스텁은 첫 호출에서 청크를 가져옵니다. 작성자는 ES 사양의 import()를 작성하고, 번들러가 네트워크 동작을 만들어 냅니다.

흔한 실수

핫 경로(예: 렌더링 반복문 내부)에서 import("X")를 호출하면 호출할 때마다 캐시를 다시 확인합니다. 다시 다운로드하지는 않지만 조회에 비용이 듭니다. 첫 번째 가져오기 후 해결된 네임스페이스를 변수에 저장하십시오.

이해도 확인

import("./mod.js")는 무엇을 반환합니까?

요약

동적 import()는 정적 import 선언을 필요할 때 사용하는 형태입니다. 모듈 네임스페이스로 해결되는 프로미스를 반환하므로 코드 분할, 조건부 폴리필, 플러그인 시스템을 구현할 수 있습니다. 모듈은 첫 번째 가져오기 후 캐시되므로 이후 호출에는 추가 비용이 없습니다. 번들러는 각 동적 가져오기 호출에 대해 별도의 청크를 생성합니다.

자주 묻는 질문

“모듈의 동적 import()” 강의는 무료인가요?

네 — “모듈의 동적 import()” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 HTML Academy 강의 전체를 잠금 해제할 수 있습니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“모듈의 동적 import()”에서 뭘 배우나요?

동적 import()로 필요할 때 모듈 로드하기 브라우저에서 직접 실행하는 실습 코드로 HTML Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

HTML Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 HTML Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.

“모듈의 동적 import()” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 HTML Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 HTML Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← HTML Academy(으)로 돌아가기