동적으로 자바스크립트를 추가한 후 콜백받는 방법 (How to import the external JS with callback function)

동적으로 스크립트를 추가한 후 콜백받는 방법 (How to import the external JS with callback function)

외부에서 가져온 자바스크립트(Javascript)를 모두 받아온 후 콜백처리를 하고 싶은 경우가 있습니다. 한 예로 비동기로 웹 페이지에 카카오 자바스크립트(Javascript) SDK를 추가한 후, 특정 동작을 실행하는 경우입니다.

사용방법

// 동적으로 자바스크립트를 삽입하는 함수
// 자바스크립트가 모두 로드(load)되었을 때,
// callback 함수 실행
const injectScript = (url, callback) => {
  const s = document.createElement('script')
  s.src = url;
  s.type = 'text/javascript'
  s.addEventListener('load', callback)
  document.head.appendChild(s)
}

injectScript('https://developers.kakao.com/sdk/js/kakao.js', () => {
 // 카카오 자바스크립트 SDK가 모두 로드되었을 때 Kakao init 메서드 실행
  Kakao.init('Kakao API KEY')
})

실제 사용 예시

실제 Nuxt.js 플러그인에 구현한 예시입니다. 해당 예시는 locale이 ko로 설정되어 있는 웹 사이트에 한해 카카오 자바스크립트 SDK를 세팅합니다. 외부 자바스크립트가 모두 로드되었을 때 콜백함수가 실행되고 콜백함수 안에서는 Kakao init 메서드를 실행합니다.

// nuxt.js 플러그인(plugins)
export default ({ store }, inject) => {
  const injectScript = (url, callback) => {
    const s = document.createElement('script')
    s.src = url;
    s.type = 'text/javascript'
    s.addEventListener('load', callback)
    document.head.appendChild(s)
  }
  const lang = store.state.lang.locale
  if (lang === 'ko') {
    injectScript('https://developers.kakao.com/sdk/js/kakao.js', () => {
      Kakao.init('key')
    })
  }
}