Angular 에서 외부JS파일 사용하기 (Angular9에서 적용 성공 예)

업무 중에 앵귤러9을 계속하여 사용하게 되었는데, 개발을 위해서 외부JS를 그대로 import하여 사용하여야 하는 때가 있었다.

 

기존에는 ASP클래식 기반 환경에서 개발하고 있었기 때문에 아무 생각 없이 각 ASP페이지 별로 외부JS를 import했었는데,

앵귤러에서는 SPA기반이고 구조가 다르다 보니, 외부JS를 기존에 개발하던 방식처럼 import할 수 없었다.

 

헤매던 와중에 역시나 구글링을 통하여,  몇 가지 방법을 사용하여 테스트해볼 수 있었고

삽질을 거듭한 끝에 완벽하지는 않을지 모르나, 결과적으로 개발을 완료할 수 있었다. (아래 소개한 방법 중 세 번째 방법으로 진행하였다.)

---

구글링을 해보면 선구자분들에 의해서 여러 방법들이 소개되고 있었는데 눈에 띄고 중복되는 방법을

약 세 가지 정도로 요약해 볼 수 있었다.

 

첫 번째, 

npm에서 해당 JS라이브러리를 검색하여 설치.

(예: 사용하려는 외부JS가 jquery 라면 npm을 통하여 jquery를 설치하는 것. 자세한 내용은 아래 참조 블로그를 참고하자)

참조: https://charlie-choi.tistory.com/15

 

두 번째,

참조한 블로그의 내용을 빌려서 적으면 angular.json에 포함하고 싶은 자바스크립트를 추가하고 component단에서 사용한다고 한다.

(역시 자세한 내용은 아래 참조 블로그를 참고하자)

참조: https://m.blog.naver.com/neem693/221648400818

 

세 번째,

위에서 언급한 것과 같이 세 번째 방법을 통해 개발을 완료하였는데

앵귤러로 구현한 프런트엔드단에 있을 index.html  내부에 기존처럼 외부JS를 import해준다.

이후 import한 외부JS내부에 정의된 기능을 활용하기 위해서 한 가지 작업을 더 해주었다.

 

예를 들어, 아래와 같이 외부라이브러리를 import 한 뒤에

이 라이브러리를 여러 타입스크립트에서도 사용할 수 있도록 약간의 지저분(?) 한 작업을 더 해주었다.

    <script type="text/javascript" src="/assets/web/exp_js/ad__script.js"></script>

위와 같이 ad__script.js 라는 js를 추가하였다. 이 js의 내부에는 아래와 같은 예시의 내용을 담았다.

위의 GTAG_Code는 실제 외부JS라이브러리를 사용하려는 각 ts소스내에서 호출하려고 구현한 것이며,

아래와 같이 각 ts소스의 내부에서 호출하게 된다.

declare var GTAG_Code: any;

위와 같이 ts 내부에 선언해주고,

GTAG_Code.callScript(전달파라메터);

위와 같이 GTAG_Code.callScript(value);  처럼  호출하여 외부라이브러리의 기능을 사용하였다.

 

정리해보면 ,,, 굉장히 비효율적인 방법일 수 있는데.... ^-^;;;

개발 당시에는 이 방법이 그나마 가장 확실하게 테스트 시에 잘 작동하는 것으로 보여서

세 번째 방법으로 테스트 후에 개발 적용하였다.

 

프런트엔드에서 앵귤러9을 사용 중이라

외부라이브러리를 사용할 때에 이 방법을 아무래도 종종 사용하게 될 것 같다.

 

심플하지도 않은 것 같고 SPA구조에 제대로 맞는 방법도 아닌 것 같지만,

일단 잘 작동하고 있다는 것에 의의를 두어야 할 것 같다.