JavaScript 모듈을 동적으로 로드하는 방법

웹 애플리케이션의 규모가 커질수록 필요한 시점에 모듈만 불러와 사용하는 동적 로딩(Dynamic Loading)이 중요해집니다. 이 글에서는 JavaScript 모듈을 동적으로 로드하는 기본적인 예제 코드를 소개합니다.

참고 − 이 예제는 ES 모듈(ES Module)을 사용하므로, 정상적으로 실행하려면 반드시 localhost 환경의 웹 서버를 통해 페이지를 열어야 합니다. 파일을 직접 더블클릭하여 열면 CORS 정책으로 인해 모듈 로딩이 실패할 수 있습니다.

예제 코드

먼저 화면을 구성하는 HTML 코드입니다. 'IMPORT' 버튼과 결과를 표시할 영역을 포함하고 있습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-size: 18px;
        font-weight: 500;
    }
</style>
</head>
<body>
<h1>JavaScript 모듈 동적 로딩</h1>
<button class="Btn">IMPORT</button>
<div class="result"></div>
<h3>위 버튼을 클릭하면 모듈이 임포트됩니다</h3>
<script src="script.js" type="module"></script>
</body>
</html>

다음은 버튼 클릭 이벤트를 처리하는 script.js 파일입니다.

import test from './sample.js';
document.querySelector('.Btn').addEventListener('click', () => {
    test();
})

마지막으로 실제로 내보내기(export)되는 함수가 담긴 sample.js 파일입니다.

let resultEle = document.querySelector(".result");
export default function testImport(){
    resultEle.innerHTML = 'Module testImport has been imported';
}

코드 설명

script.js: type="module" 속성으로 로드되며, sample.js에서 기본(default)으로 내보낸 test 함수를 가져옵니다. 버튼 클릭 시 해당 함수가 호출됩니다.
sample.js: export default 문법으로 testImport 함수를 외부에 노출합니다. 함수가 실행되면 결과 영역에 모듈 임포트 성공 메시지가 출력됩니다.

출력 결과

페이지가 처음 로드된 상태입니다.

JavaScript 모듈을 동적으로 로드하는 방법

'IMPORT' 버튼을 클릭하면 다음과 같이 모듈이 로드되고 메시지가 표시됩니다 −

JavaScript 모듈을 동적으로 로드하는 방법

참고: 진정한 동적 임포트(import)

위 예제는 페이지 로드 시점에 모듈이 함께 로드되는 정적 임포트 방식입니다. 버튼을 누르는 순간에 모듈을 불러오고 싶다면 import() 연산자를 사용할 수 있습니다.

document.querySelector('.Btn').addEventListener('click', async () => {
    const module = await import('./sample.js');
    module.default();
});

이처럼 import()는 Promise를 반환하므로 await 또는 .then()과 함께 사용하면, 필요한 순간에만 모듈을 네트워크로 가져와 초기 로딩 속도를 개선할 수 있습니다.