“ 매주 목요일마다 당신이 항상 하던대로 신발끈을 묶으면 신발이 폭발한다고 생각해보라.
컴퓨터를 사용할 때는 이런 일이 항상 일어나는데도 아무도 불평할 생각을 안 한다. ”- Jef Raskin
맥의 아버지 - 애플컴퓨터의 매킨토시 프로젝트를 주도
반응형
동적 스크립트 로딩으로 웹 페이지 속도 UP! jQuery $.getScript() 완벽 가이드
jQuery $.getScript()
웹 페이지의 성능을 향상하는 방법 중 하나는 자바스크립트 파일을 동적으로 로딩하는 것입니다. 동적 스크립트 로딩은 필요한 시점에만 자바스크립트 파일을 로드하여 초기 페이지 로딩 시간을 단축하고, 필요하지 않은 스크립트 실행을 방지하여 웹 페이지의 전반적인 성능을 향상할 수 있습니다. jQuery는 $.getScript() 함수를 통해 동적 스크립트 로딩을 간편하게 구현할 수 있도록 지원합니다. 이 글에서는 $.getScript() 함수의 기능과 사용법, 예제 코드, 주의 사항 등을 자세히 살펴보겠습니다.
목차
jQuery $.getScript()
jQuery $.getScript()란?
$.getScript() 함수는 jQuery에서 제공하는 AJAX 메서드 중 하나로, HTTP GET 요청을 사용하여 서버에서 자바스크립트 파일을 로드하고 실행하는 기능을 제공합니다. 이 함수는 $.ajax() 메서드의 shorthand 버전으로, 자바스크립트 파일을 동적으로 로드하고 실행하는 데 필요한 코드를 간결하게 작성할 수 있도록 도와줍니다.
사용방법부터 예시까지
$.getScript(url, success);url : 로드할 자바스크립트 파일의 URL을 지정을 합니다.
success : 스크립트 로딩이 성공적으로 완료된 후 실행될 콜백 함수를 지정합니다. (선택)
<!DOCTYPE html>
<html>
<head>
<title>동적 스크립트 로딩 예제</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$.getScript("test.js", function() {
// 완료 된 후 실행 할 코드
alert("test.js 파일이 로드되었습니다.");
OdinBOXFunc(); // test.js에 정의된 함수 호출
});
});
});
</script>
</head>
<body>
<button>스크립트 로드</button>
</body>
</html>위 코드에서 스크립트 로드라는 버튼을 클릭하면 $.getScript() 함수가 test.js 파일을 호출을 하고 로딩이 완료가 되면 콜백 함수 내부의 코드가 실행됩니다. 콜백 함수에서는 test.js에 정의된 myFunction() 함수를 호출하여 동적으로 로드된 스크립트의 기능을 사용할 수 있습니다.
동적 스크립트 로딩
동적 스크립트 로딩은 웹 페이지가 로드될 때 모든 자바스크립트 파일을 한꺼번에 로드하는 대신, 필요한 시점에 특정 스크립트를 로드하는 방식입니다. 동적 스크립트 로딩을 하려면 먼저 스크립트 요소를 생성하고, src 속성을 설정하여 로드할 파일을 지정한 다음, DOM에 스크립트 요소를 추가해야 합니다
순서
// 1. 스크립트 요소를 생성합니다.
let OdinScript = document.createElement("script");
// 2. src 속성을 설정하여 로드할 파일을 지정합니다.
OdinScript.setAttribute("src", "https://www.odinbox.com/test.js");
// 3. DOM에 스크립트 요소를 추가합니다.
document.body.appendChild(OdinScript);script 태그에는 스크립트 로딩 방식을 제어하는 데 사용할 수 있는 몇 가지 속성이 있습니다.
- async : 스크립트를 비동기적으로 로드하며, 스크립트가 로드되는 동안 페이지 파싱이 차단되지 않습니다.
- defer : 스크립트를 페이지 파싱이 완료된 후 실행합니다. 스크립트 실행 순서는 보장됩니다.
async와 defer 속성을 사용하여 스크립트 로딩 방식을 제어하면 페이지 로딩 속도를 향상하고 스크립트 실행 순서를 관리할 수 있습니다.
그 외 관련 속성 몇 가지 소개
| blocking | 특정 작업이 스크립트 가져오기에서 차단되도록 명시적으로 지정합니다. |
| crossorigin | 스크립트가 다른 도메인에서 로드될 때 오류 로깅을 허용합니다. |
| fetchpriority | 외부 스크립트를 가져올 때 사용할 상대적 우선 순위에 대한 힌트를 제공합니다. |
| integrity | 가져온 스크립트가 조작되지 않았는지 확인하는 데 사용됩니다. |
| nomodule | ES 모듈을 지원하는 브라우저에서 스크립트가 실행되지 않도록 합니다. |
| referrerpolicy | 스크립트 요청과 함께 전송되는 referrer 정보를 제어합니다. |
동적 스크립트 로딩의 장점
| 초기 페이지 로딩 | 초기에 필요하지 않은 스크립트 로딩을 지연시켜 페이지 로딩 속도를 향상시킬 수 있습니다. |
| 자원 효율성 증가 | 사용하지 않는 스크립트 로딩을 방지하여 네트워크 대역폭과 시스템 자원을 절약할 수 있습니다. |
| 유지보수 용이성 | 스크립트를 모듈화하여 관리하고 업데이트하기 용이해집니다. |
| 사용자 경험 향상 | 페이지 로딩 속도가 빨라지고, 필요한 스크립트만 로드되므로 사용자 경험을 향상시킬 수 있습니다. |
| 보안 강화 | API 키 또는 인증이 필요한 타사 스크립트를 동적으로 로드하여 보안을 강화하고 불필요한 API 호출을 방지할 수 있습니다. |
여러 스크립트를 순서대로 로드
여러 개의 스크립트를 동적으로 로드해야 하는 경우, 스크립트 로딩 순서를 제어하는 것이 중요합니다. 특히 스크립트 간에 의존성이 있는 경우, 순서가 잘못되면 스크립트 오류가 발생할 수 있습니다.
스크립트를 순차적으로 로드하려면 Promise와 async/await를 사용할 수 있습니다. Promise는 비동기 작업의 완료 또는 실패를 나타내는 객체입니다. async/await는 Promise를 사용하여 비동기 코드를 동기적으로 작성할 수 있도록 하는 문법입니다
async function loadScripts(scripts) {
for (const script of scripts) {
await new Promise((resolve, reject) => {
$.getScript(script)
.done(resolve)
.fail(reject);
});
}
}
const scriptList = [
"script1.js",
"script2.js",
"script3.js",
];
loadScripts(scriptList)
.then(() => {
console.log("완료!");
})
.catch((error) => {
console.error("스크립트 로딩 중 오류가 발생했습니다.", error);
});loadScripts() 함수는 스크립트 배열을 인자로 받아 각 스크립트를 순차적으로 로드합니다. $.getScript() 함수는 Promise를 반환하며, await 키워드를 사용하여 스크립트 로딩이 완료될 때까지 기다립니다. 모든 스크립트 로딩이 완료되면 then() 메서드가 호출되고, 오류가 발생하면 catch() 메서드가 호출됩니다.
import()를 사용하여 모듈을 동적으로 로딩
ES6에서는 모듈을 동적으로 로드할 수 있는 import() 함수를 제공합니다. import() 함수는 Promise를 반환하며, 모듈 객체를 사용하여 모듈의 export 된 값에 접근할 수 있습니다.
import("myModule.js")
.then((module) => {
// 모듈의 엑스포트된 값에 접근
module.OdinBOX();
})
.catch((error) => {
console.error("모듈 로딩 중 오류가 발생했습니다.", error);
});import() 함수는 $.getScript() 함수와 유사한 기능을 제공하지만, 모듈을 동적으로 로드하는 데 더 적합합니다. $.getScript() 함수는 전역 범위에서 스크립트를 실행하는 반면, import() 함수는 모듈 범위에서 스크립트를 실행합니다. 따라서 import() 함수를 사용하면 스크립트 간의 충돌을 방지하고 코드를 더 모듈화 할 수 있습니다.
주의사항
여러 개의 스크립트를 동적으로 로드할 때, 스크립트 간의 의존성을 고려하여 로딩 순서를 제어해야 합니다. 스크립트 로딩 순서가 잘못되면 스크립트 오류가 발생할 수 있습니다.
캐싱
브라우저는 기본적으로 스크립트 파일을 캐싱합니다. 캐싱은 웹 페이지 성능을 향상하는 데 도움이 되지만, 개발 중에는 최신 스크립트가 로드되지 않을 수 있습니다. 개발 중에는 캐싱을 비활성화하여 최신 스크립트가 로드되도록 해야 합니다. $.getScript() 함수는 기본적으로 cache 설정을 false로 설정하여 캐싱을 비활성화합니다. 캐싱을 활성화하려면 $.ajaxSetup() 함수를 사용하여 전역적으로 cache 속성을 설정할 수 있습니다.
$.ajaxSetup({ cache: true });오류처리
스크립트 로딩 중 오류가 발생할 수 있습니다. 네트워크 오류, 스크립트 파일을 찾을 수 없는 경우, 스크립트 실행 중 오류 등 다양한 원인으로 인해 오류가 발생할 수 있습니다. $.getScript() 함수의 fail() 메서드를 사용하여 오류를 처리하고 적절한 조치를 취해야 합니다.
$.getScript("OdinBOX.js")
.done(function() {
console.log("성공!");
})
.fail(function(jqxhr, settings, exception) {
console.error("스크립트 로딩 중 오류가 발생했습니다.", exception);
});다른 자바스크립트 라이브러리와의 충돌
$.noConflict();
// jQuery를 사용하려면 jQuery 변수를 사용
jQuery.getScript("OdinBOX.js");$.getScript() 함수를 다른 자바스크립트 라이브러리와 함께 사용할 때는 충돌이 발생할 수 있습니다. 특히 jQuery와 다른 라이브러리가 $ 변수를 사용하는 경우 충돌이 발생할 수 있습니다. 이러한 충돌을 방지하려면 jQuery.noConflict() 메서드를 사용할 수 있습니다. jQuery.noConflict() 메서드는 $ 변수에 대한 jQuery의 제어권을 해제하고 다른 라이브러리가 $ 변수를 사용할 수 있도록 합니다.
마무리
jQuery의 $.getScript() 함수는 동적 스크립트 로딩을 간편하게 구현할 수 있는 강력한 도구입니다. 이 함수를 사용하여 웹 페이지의 성능을 향상시키고 사용자 경험을 개선할 수 있습니다. 동적 스크립트 로딩은 초기 페이지 로딩 속도를 향상시키고, 자원 효율성을 높이며, 유지보수를 용이하게 합니다. $.getScript() 함수를 사용할 때는 스크립트 로딩 순서, 캐싱, 오류 처리, 다른 라이브러리와의 충돌 등에 주의해야 합니다.
실무에서도 상황에 맞게 사용을 할 수 있으리라 생각을 하고 정리를 해봤습니다. 궁금한 사항이 있다면 댓글을 통해 남겨주시면 답변드리도록 하겠습니다.