[jQuery] $.getScript

$.getScript()는 jQuery에서 제공하는 함수로, 외부 JavaScript 파일을 동적으로 불러와서 실행하는 기능을 말해.

아주 쉽게 정리해줄게!

---

✅ 1. $.getScript() 기본 개념

📌 외부 JS 파일을 “AJAX 요청처럼 다운로드해서 실행”

HTML에 <script src="..."> 넣는 것과 똑같은 효과.

---

📘 기본 문법

 

$.getScript("경로/파일명.js");

이렇게만 써도 해당 JS 파일이 다운로드되고, 즉시 실행돼.

---

✅ 2. 실제 사용 예시

 

$.getScript("/js/src/partnerKeyman.js");

이러면 /js/src/partnerKeyman.js 파일을 불러와서 실행함.

---

✅ 3. 콜백 추가 가능

파일 로딩 후 해야 할 작업이 있을 때:

$.getScript("/js/src/myFile.js", function() {
    console.log("myFile.js 로딩 완료!");
});

 

---

✅ 4. Promise(then) 활용 가능

jQuery 1.5+ 부터는 jqXHR 객체를 리턴해서 then 사용도 가능.

$.getScript("/js/src/partner.js").then(() => {
    console.log("partner.js loaded!");
});

 

---

✅ 5. 언제 쓰냐?

✔ (1) 필요한 순간에만 JS 파일을 불러올 때

SPA처럼 페이지가 부분적으로 바뀔 때

✔ (2) 처음부터 모든 JS를 불러와서 무겁게 하지 않기 위해

— 성능 최적화

✔ (3) 파일 중복 로딩을 방지할 때

보통 아래와 같이 사용함:

if (!window.isLoadedPartnerJs) {
    $.getScript("/js/src/partner.js", () => {
        window.isLoadedPartnerJs = true;
    });
}

 

---

✅ 6. 일반 script 태그와의 차이점

구분	<script src="">	$.getScript()
로딩 시점	HTML 렌더링 중	JS에서 원하는 시점
중복 로딩 방지	어려움	if 문으로 쉽게 가능
콜백	없음	있음
조건부 실행	어려움	매우 쉬움

---

🧩 요약

✔ $.getScript() = 외부 JS 파일을 동적으로 불러와 실행하는 함수
✔ 콜백 지원 → 로딩 후 작업 가능
✔ 조건문과 함께 쓰면 파일 중복 로딩 방지 가능
✔ 성능 최적화 및 페이지별 기능 분리에 매우 유용