[Vue.js] 외부 javascript 구문 추가 방법

외부 플러그인이나 제품을 사용하다가 보면 script 추가 안내문을 받을 수 있다.

html을 사용하거나 웹빌드를 사용하면 쉽게 설치할 수 있지만 vue나 react를 사용해 웹 작업을 한다면 제공하는 script문을 추가하기 어렵다.

<script async src="url..."></script>

 

이 구문을 head 태그 다음에 넣기 위해 수많은 구글링을 하였고 마침내 해결방법을 알아내었다

    addScript() {
      let scripts = [
          '필요한 url',
      ];

      for (let i = 0, len = scripts.length; i < len; i++) {
        let script = document.createElement('script');
        script.setAttribute('type', 'text/javascript');
        script.setAttribute('src', scripts[i]);
        script.async = true;
        document
        .getElementsByTagName('head')[0]
        .appendChild(script);
      }
    }

 

Vue는 script 구문에서 data, method, created 등의 방법으로 작성할 수 있는데 이 함수를 method에 추가하고 created에 this.addscript()를 호출하면 Vue 처음 화면이 렌더링될 때 head 태그 뒤에 script 구문을 넣을 수 있다.