📚 $.getScript() 동적 스크립트 로딩 사용법

제이쿼리 $.getScript()

$.getScript() 메소드는 예전에 ajax통신을 위한 api로 쓰이던 메소드다.

요즘은 fetch() 나 $.ajax() 를 사용하기에 잘 안쓰이는 편이지만, 간단한 코드로 원격지 또는 로컬의 javascript 파일을 동적으로 읽어들여 실행하는 역할로서 가끔 쓰이기도 한다. 다른 도메인의 자바스크립트도 읽어들일 수 있다.

$.getScript(url, callback);
// url : 읽어들이는 페이지의 위치
// callback : 통신 성공시의 콜백 함수

 

예를들어 이런식으로 단축하여 사용할 수 있다. 바닐라 자바스크립트에선 따로 <script> 태그를 선언하고 이벤트 리스너로 받아오는 코드가 길어졌지만,

<script id="devtool"></script>
<script>
 const $devtool = document.querySelector("#devtool");
 $devtool.src="./images/devtools-detector.js"
 $devtool.addEventListener("load", function(){
 	alert("스크립트 로딩");
 }
</script>

제이쿼리에서는 하나의 메소드만 사용하면 되는 걸 알 수 있다. (콜백 뿐만 아니라 프로미스도 지원한다.)

$.getScript("./images/devtools-detector.js", function(){
	alert("스크립트 로딩");
});

---

콜백 인자 종류

$.getScript() 메소드의 콜백 함수의 각 매개변수 종류는 다음과 같다.

$.getScript( "ajax/test.js", function( data, textStatus, jqxhr ) {
  console.log( data ); // 반환 된 데이터
  console.log( textStatus ); // Success
  console.log( jqxhr.status ); // 200
  console.log( "Load was performed." );
});

---

오류 처리 하기

만일 콜백 방식이 아닌 프로미스 객체 방식을 이용하면 메서드 체이닝으로 심플하게 오류 처리 구성이 가능하다.

$.getScript( "ajax/test.js" )
  .done(function( script, textStatus ) { // 프로미스 done() 지원
    console.log( textStatus );
  })
  .fail(function( jqxhr, settings, exception ) {
    $( "div.log" ).text( "Triggered ajaxError handler." );
});

---

# 참고자료

https://runebook.dev/ko/docs/jquery/jquery.getscript

https://api.jquery.com/jquery.getscript/