HTML에 CDN 방식으로 선언하여 axios 와 chart.js 라이브러리들을 불러올 수 있었습니다.
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>하지만 라이브러리들이 점점 많아지다 보면, HTML 파일 내부에 선언해야 할 CDN의 양은 방대해지면서 관리하기 어려워질 것입니다.
그리고 TypeScript에서는 해당 라이브러리들을 인식하지 못하기 때문에 더욱이 빌드방식으로 해당 라이브러리들을 불러와야 합니다.
이번 포스팅에서는 axios 와 chart.js 라이브러리들을 모듈화 하는 방법을 설명하고자 합니다.
라이브러리 import 문법
- 라이브러리 로딩 : import 변수명 from '라이브러리 이름'
axios 모듈화하기
*axios 란?
Promise based HTTP Client for the browser and node.js(server)
-
axios라이브러리 설치하기npm i axios -
dependencies에 들어왔는지 확인
package.json파일로 이동하여 axios가 잘 설치됐는지 확인합니다.
app.ts에 설치된axios모듈 import 해주기import axios from 'axios';
chart.js 모듈화하기
(*참고: Chart.js 3버전 이상부턴 별도로 타입 선언 라이브러리 설치 할 필요 없음)
chart.js라이브러리 설치npm install chart.js- dependencies에 들어왔는지 확인
3.app.ts 에 설치된 chart.js 모듈 import 해주기
import { Chart } from 'chart.js'; 이때 3번 항목에서 주목해야 될 점이, 기존에 chart.js의 버전이 3이상일 경우에만 위와 같이 코드 작성이 가능합니다.
왜 가능하냐, chart.js 에서 대대적인 버전업이 발생했었고 그 중 하나가 타입 선언 라이브러리 설치를 별도로 하지 않아도 이제 npm 명령어로 설치만 해도 알아서 type을 정의한 파일이 생성이 됩니다.
index.d.ts ?
자바스크립트 라이브러리는 다양하게 있습니다. 이때 index.d.ts 는 자바스크립트 라이브러리를 타입스크립트에서 인식 할 수 있도록 타입을 재정의 및 지정 해줍니다.
이 파일이 있어야 타입스크립트에서 모듈로서 import 할 수 있습니다.
node_modules 폴더를 자세히 들여다 보면,
axios 폴더 아래 index.d.ts 라는 파일이 존재합니다. 따라서 axios는 바로 import할 수 있습니다.
chart.js 기존 버전 3미만에는 없었지만, 3이상 부터는 index.d.ts 파일을 제공하면서 import를 바로 진행할 수 있게 됐습니다.
Definitely Typed
자바스크립트 라이브러리를 타입스크립트에서 인식할 수 있도록 도움을 주는 오픈소스
Syntax : @types/(라이브러리명)
+) 타입 선언 라이브러리가 제공되지 않는 외부 라이브러리 대체 방법 (=@types 라이브러리로 제공이 안될때)
tsconfig.json 이동 후
//...아래 설정 추가
"typeRoots" : ["./node_modules/@types", "types"] @types에 없다면 내가 정의한 types를 참고해서 라이브러리 제공한다는 의미를 지님
