angular4에서 외부 js파일 import 하기

안녕하세요. 남산돈가스입니다.

angular 기반의 웹을 구축하면서, 외부의 js 소스를 import하여 사용해야하는 경우가 생기는데요.

기존의 웹 개발 방식은 각각의 페이지 별로 <script src= "외부 js 주소">를 이용하여 손쉽게 외부 js파일을 import 해올 수 있었는데요.

angular와 같이 spa(Single Page Application) 기반의 단일 페이지 어플리케이션에서는 각 컴포넌트에 대한 html 소스와 로직이 모두 분리되어 있기 때문에 외부 js 파일을 위와 같은 <script>태그로 인식하지 못한다는 문제점이 있었습니다.

angular 프로젝트를 진행 중, 카카오, 페이스북과 같은 오픈 API를 이용하기 위해서는 각각 제공하는 외부 js파일을 import하여 사용해야하는 경우가 이에 해당했습니다.

이를 해결하기 위해 다음과 같은 방법을 이용했습니다.

import {
    Component,
    Input,
    ElementRef,
    OnInit,
    ChangeDetectionStrategy,
    Output,
    EventEmitter
} from '@angular/core';
 
(2)declare var daum: any;
(1)const url = "https://ssl.daumcdn.net/dmaps/map_js_init/postcode.v2.js?autoload=false";
 
 
@Component({
    selector: 'daumAddress',
    templateUrl: 'daumAddress.html',
    changeDetection: ChangeDetectionStrategy.Default
})
export class DaumAddressPage implements OnInit {
 
    (3)private el: ElementRef;
 
    constructor(el: ElementRef) {
        (4)this.el = el;
    }
 
 
    ngOnInit(){
        (6)this.loadDaumApi().then(()=>{
            this.print('Daum api has been loaded.');
        });
 
    }
 
    (5)loadDaumApi(){
        return new Promise((resolve, reject)=> {
            let script = document.createElement('script');
            script.src = url;
            script.type = 'text/javascript';
            script.async = true;
            this.el.nativeElement.appendChild(script);
            resolve(true);
        });
    }
 
}


간단하게 설명을 돕기위해서, 중요 부분에 붉은색으로 번호를 남겨놨습니다. 번호 순서대로 설명하자면,

(1) - 외부 js를 로드하기 위한 url를 설정해주는 부분입니다. 저는 예제로 다음주소찾기 서비스를 이용하기 위해서 url를 입력했습니다.

(2) - 다음주소찾기 외부 js파일이 로드 된 뒤 해당 컴포넌트에 임포트가 되면 declare해놓은 daum이란 변수에 할당이 되게 됩니다.

(3) - 해당 컴포넌트 요소 접근을 위해 로직에서 dom element에 접근하게하는 ElementRef 객체를 선언합니다.

(4) - 생성자에 해당 ElementRef 객체를 할당합니다.

(5) - 이번 블로그의 핵심입니다.

일단 첫번째로, Promise 패턴을 통한 비동기 방식 처리를 선언합니다.

다음으로, script라는 변수를 생성한 뒤, document.createElement('script')를 통해 script 요소를 생성합니다. 이 부분은 html소스에 비어있는 <script></script>태그가 만들어졌다고 이해하시면 됩니다.

그리고 script태그의 src에 접근하여 (1)의 url를 할당하고, type에 접근하여 'text/javascript' 타입을 지정한 뒤, async를 통해 비동기 처리 여부를 설정합니다. 

여기까지 설정한 내용은 html의 <script src="경로" async=true type="text/javascript ></script>와 동일한 내용입니다.

마지막으로 요소에 접근할 수 있는 ElementRef의 el객체의 자식노드로 해당 script를 append 해줌으로서 컴포넌트 내 html에서 외부 js소스가 import되게 됩니다.

(6) - 마지막으로, (5)에서 생성한 loadDaumApi 메서드를 Angular의 생명주기 중 가장 최초에 해당하는 ngOnInit안에서 실행시켜 주게되면, 해당 컴포넌트가 최초 로드되는 시점에 스크립트가 생성되어 외부js의 메서드들을 사용할 수 있게 됩니다.

Angular내에서 이렇게 외부 js파일을 import하는 방식이 일반적이지는 않지만, 자주 쓰이지 않는 만큼, 만약 사용하게 되는 경우엔 위와 같은 방식을 통해 활용해 볼 수 있지 않을까 싶어 이번 포스트를 작성해보았습니다.

다른 분들이 이 방법을 통해서 고민하지 않고 외부 js파일을 로드할 수 있는 방법을 알아가셨으면 좋겠습니다. 감사합니다.