JavaScript로 동적으로 JS 파일 로딩하기: 완전한 가이드
안녕하세요! 프로그래밍과 웹 개발에 대한 열정이 가득한 여러분, 오늘은 JavaScript를 사용하여 외부 JS 파일을 동적으로 로딩하는 방법에 대해 알아보려 합니다. 웹 개발을 하면서 외부의 스크립트를 비동기적으로 로딩해야 할 일이 종종 생기는데, 이 글에서는 그 과정과 주요 문제점, 그리고 해결방법을 다뤄볼 예정입니다.
들어가며
종종 고객사와의 프로젝트에서, 여러 상황에서 외부 스크립트를 로딩해야 하는 경우가 발생합니다. 예를 들어, 특정 고객사의 홈페이지에 여러 기능을 추가하기 위해 외부 JavaScript 파일을 로드하는 것이 필요할 수 있습니다. 이런 경우 스크립트를 정적으로 포함시키면 사용자 경험에 악영향을 미칠 수 있으므로, 비동기 방식으로 동적으로 로딩하는 것이 더욱 효과적입니다.
자, 그럼 본격적으로 시작해보겠습니다!
기본적인 스크립트 삽입
먼저, 기본적인 HTML 구조를 만들어 보고, 외부 스크립트를 삽입해 보겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="https://example.com/example.js" charset="utf-8"></script>
</head>
<body>
<script type="text/javascript">
init();
</script>
</body>
</html>
위와 같이 작성하면, <head>에 스크립트를 삽입하고, <body>에서 해당 스크립트 내의 함수를 호출하는 간단한 구조가 됩니다.
문제점 발생
고객사에서 스크립트 로딩 지연으로 인해 홈페이지에 불필요한 대기 시간이 발생한다는 피드백을 주셨습니다. 예를 들어, 만약 외부 자원이 느리게 로딩되면 웹사이트는 15초 이상 아무 동작도 하지 않아 사용자가 불편을 겪을 수 있습니다. 이 상황을 해결하기 위해 비동기 방식으로 변경해 보았습니다.
<head>
<script async type="text/javascript" src="https://example.com/example.js"></script>
</head>
이렇게 수정하면 비동기 방식으로 스크립트를 호출하게 되지만, 때로는 스크립트가 로드되기 전에 해당 함수가 호출될 수 있습니다. 그래서, 다음과 같은 오류를 만나게 됩니다.
Uncaught ReferenceError: init is not defined
이러한 문제를 해결하기 위해 setTimeout을 활용하여 일정 시간 후에 함수를 호출하도록 변경할 수 있습니다.
코드 개선하기
직관적인 방법으로 해결한 후, 다음과 같은 코드를 작성했습니다.
<script type="text/javascript">
function init_call() {
if (typeof init === "function") { init(); }
}
setTimeout(init_call, 100);
</script>
이 코드는 init 함수가 로드되었는지 확인한 후 호출하게 됩니다. 하지만, 이 접근 방식은 항상 100ms의 대기 시간이 발생하게 되며, 로딩 시간이 길어질 경우 호출에 실패할 수도 있습니다.
최적의 해결책 찾기
이를 해결하기 위해, 스크립트의 onload 이벤트를 활용하여 로딩이 완료된 이후에 함수를 호출하는 방법으로 개선하였습니다.
<head>
<script async type="text/javascript" src="https://example.com/example.js" onload='if(typeof init === "function"){ init(); }'></script>
</head>
이제, 스크립트가 로드되면 init 함수가 바로 호출되도록 하여, 불필요한 대기 시간을 없애는 최적화 과정을 마쳤습니다.
동적 로딩 기능 추가하기
마지막으로, 고객사에서 요청한 모든 페이지에 동적으로 스크립트를 호출할 수 있는 구조로 발전시켰습니다. 스크립트의 중복 실행과 이로 인한 충돌을 방지하기 위해 아래와 같이 작성했습니다.
(function(id, js_src, callback) {
if (document.getElementById(id)) { return; }
var my_head = document.getElementsByTagName('head')[0];
var my_js = document.createElement('script');
my_js.id = id;
my_js.type = 'text/javascript';
my_js.async = true;
my_js.src = js_src;
my_js.addEventListener("load", function(event) { if(callback && typeof callback === "function"){ callback(); }});
my_head.appendChild(my_js);
})('MY_EXAMPLE_SCRIPT', 'example.js', function () {
if (typeof my_example_init === "function") { my_example_init(); }
});
결론 및 마무리
오늘은 JavaScript를 사용하여 동적으로 JS 파일을 로드하고, 이를 통해 발생하는 여러 문제점과 해결 방법을 알아보았습니다. 비동기 처리와 이벤트 핸들러를 적절히 활용하면 웹 페이지의 사용자 경험을 한층 더 향상시킬 수 있습니다.
웹 개발은 다소 어렵게 느껴질 수 있지만 자신감을 가지고 계속해서 도전해 보세요! 질문이 있으시면 언제든지 댓글로 남겨주세요. 여러분의 피드백을 기다리고 있습니다.
그럼, 다음 포스트에서 더 유용한 정보와 팁으로 찾아뵙겠습니다!
'개발' 카테고리의 다른 글
| JPA 조회 메서드 비교와 활용 가이드 (0) | 2024.11.12 |
|---|---|
| 웹 애니메이션의 자연스러움을 높이는 이징 함수 활용하기 (2) | 2024.11.12 |
| Trino로 빅데이터 분석의 미래를 열어가자 (0) | 2024.11.12 |
| Spring Boot에서 Springdoc-OpenAPI로 API 문서 자동화하기 (1) | 2024.11.12 |
| 효율적인 팀워크를 위한 Bitbucket에서의 Pull Request 완벽 가이드 (3) | 2024.11.12 |