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