웹 페이지의 성능을 최적화하거나 특정 조건에서만 스크립트를 실행하고 싶을 때, JavaScript 파일을 동적으로 로드하는 기술이 매우 유용합니다. 이 글에서는 버튼 클릭 시 외부 JavaScript 파일을 불러오는 실전 예제를 통해 그 원리를 쉽게 설명해 드리겠습니다.
동적 로딩이란 무엇인가?
일반적으로 스크립트는 HTML 문서가 로드될 때 함께 읽히지만, 동적 로딩은 사용자의 행동(예: 버튼 클릭)이나 특정 조건에 따라 필요한 순간에 스크립트 파일을 추가로 불러오는 방식입니다. 이를 통해 초기 페이지 로딩 속도를 개선하고 리소스를 효율적으로 관리할 수 있습니다.
예제 코드
다음은 버튼을 클릭하면 외부 JavaScript 파일(sample.js)을 동적으로 로드하는 전체 코드입니다.
<!DOCTYPE html>
<html lang="en">
<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: 20px;
font-weight: 500;
}
</style>
</head>
<body>
<h1>Load a JavaScript file Dynamically</h1>
<div style="color: green;" class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>
Click the above button to load external JavaScript
</h3>
<script>
let resEle = document.querySelector(".result");
document.querySelector(".Btn").addEventListener("click", () => {
var jsRef = document.createElement("script");
jsRef.setAttribute("src", "sample.js");
document.getElementsByTagName("head")[0].appendChild(jsRef);
});
</script>
</body>
</html>코드 동작 원리
위 코드의 핵심 로직은 다음과 같습니다.
1. createElement("script"): 새로운 <script> 요소를 생성합니다.
2. setAttribute("src", "sample.js"): 생성한 요소에 로드할 파일 경로를 지정합니다.
3. appendChild(jsRef): 완성된 스크립트 요소를 <head> 태그에 추가하여 브라우저가 해당 파일을 다운로드하고 실행하도록 합니다.
외부 스크립트 파일 (sample.js)
동적으로 로드되는 sample.js 파일의 내용은 아래와 같습니다. 로드가 완료되면 화면에 결과 메시지를 출력합니다.
resEle.innerHTML='JavaScript has been loaded';
실행 결과
위 코드를 실행하면 다음과 같은 초기 화면이 나타납니다.
'CLICK HERE' 버튼을 클릭하면 sample.js 파일이 동적으로 로드되고, 아래와 같이 초록색 메시지가 화면에 표시됩니다.
마무리
이처럼 document.createElement() 메서드를 활용하면 별도의 라이브러리 없이도 간단하게 JavaScript 파일을 동적으로 로드할 수 있습니다. 대용량 라이브러리나 사용 빈도가 낮은 기능의 스크립트를 지연 로딩(Lazy Loading)할 때 이 기법을 활용하면 웹 애플리케이션의 초기 로딩 성능을 크게 향상시킬 수 있습니다.