Colin's Blog
[typescript] 타입스크립트 모듈 번들러를 사용하여 외부 라이브러리 연동하기

타입스크립트 프로젝트에서 외부 라이브러리를 사용할 때에는 타입 정의가 없는 경우가 많습니다. 때때로 타입스크립트 모듈 번들러를 사용하여 이러한 외부 라이브러리를 프로젝트에 연동할 수 있습니다. 이 글에서는 타입스크립트 프로젝트에서 모듈 번들러를 사용하여 외부 라이브러리를 연동하는 방법에 대해 알아보겠습니다.

1. 모듈 번들러 선택

가장 많이 사용되는 타입스크립트 모듈 번들러로는 Webpack, Parcel, Rollup 등이 있습니다. 이 중에서 프로젝트에 가장 적합한 번들러를 선택합니다.

2. 외부 라이브러리 설치

먼저 외부 라이브러리를 설치합니다. 예를 들어, axios 라이브러리를 사용한다면 다음과 같이 설치합니다.

npm install axios

또는

yarn add axios

3. 타입스크립트 정의 설치

가능한 경우, 외부 라이브러리에 대한 타입 정의를 설치합니다. 대부분의 라이브러리는 @types 스코프에서 제공됩니다.

npm install @types/axios

또는

yarn add @types/axios

만약 @types 스코프에서 해당 라이브러리의 타입 정의가 제공되지 않는다면, DefinitelyTyped에서 직접 확인할 수 있습니다.

4. 모듈 번들러 구성

선택한 모듈 번들러에 따라 설정 파일을 작성하여 외부 라이브러리를 번들에 포함시킬 수 있습니다.

예를 들어, Webpack을 사용하는 경우 webpack.config.js 파일에 다음과 같이 추가합니다.

module.exports = {
  // ... 다른 설정
  module: {
    rules: [
      // ... 다른 규칙
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
};

5. 외부 라이브러리 사용

이제 외부 라이브러리를 타입스크립트 프로젝트에서 사용할 수 있습니다.

import axios from 'axios';

axios.get('https://api.example.com/data')
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

위와 같이 모듈 번들러를 사용하여 외부 라이브러리를 타입스크립트 프로젝트에 연동할 수 있습니다.

마치며

이번 글에서는 타입스크립트 모듈 번들러를 사용하여 외부 라이브러리를 연동하는 방법에 대해 알아보았습니다. 각종 모듈 번들러는 상이한 설정이 필요할 수 있으니 해당 번들러의 공식 문서를 참고하는 것이 좋습니다. 외부 라이브러리의 타입 정의 또한 가능한 확인하여 사용하는 것이 좋습니다.

참고 문헌:

내용을 보완하고 싶거나 추가하고 싶은 부분이 있으면 자유롭게 이야기해 주세요.

Keywords

© 2018 Colin. All rights reserved.