[typescript] 웹팩으로 타입스크립트와 데이터 시각화 연동하기

11 Dec 2023

typescript

이번 포스트에서는 웹팩을 사용하여 타입스크립트와 데이터 시각화 라이브러리를 연동하는 방법에 대해 알아보겠습니다. 데이터 시각화를 위한 라이브러리로는 D3.js를 사용할 것이며, 타입스크립트와 함께 사용하기 위해 필요한 설정과 구현 방법을 다룰 것입니다.

웹팩 및 타입스크립트 설정

먼저, 웹팩 및 타입스크립트를 연동하기 위해 프로젝트를 설정합니다. 프로젝트 폴더 내에서 다음 명령을 실행하여 npm 프로젝트를 초기화합니다.

npm init -y

그런 다음 webpack, webpack-cli, typescript 및 ts-loader를 설치합니다.

npm install webpack webpack-cli typescript ts-loader --save-dev

웹팩의 설정 파일 webpack.config.js를 생성하고, 타입스크립트를 컴파일하기 위한 설정을 추가합니다.

const path = require('path');

module.exports = {
  entry: './src/index.ts',
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.ts', '.js'],
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

타입스크립트 설정 파일 tsconfig.json을 생성하여 다음과 같이 설정합니다.

{
  "compilerOptions": {
    "module": "es6",
    "target": "es5",
    "strict": true
  }
}

D3.js 라이브러리 추가

이제 D3.js를 프로젝트에 추가합니다. 다음 명령을 실행하여 D3.js를 설치합니다.

npm install d3 --save

타입스크립트와 D3.js 함께 사용하기

타입스크립트 파일 (src/index.ts)을 만들고, D3.js를 가져와서 간단한 차트를 생성해 봅시다.

import * as d3 from 'd3';

const dataset: number[] = [10, 20, 30, 40, 50];

const svg = d3.select('body').append('svg');
svg.attr('width', 500).attr('height', 500);

const circles = svg.selectAll('circle').data(dataset).enter().append('circle');

circles.attr('cx', (d, i) => i * 50 + 25)
  .attr('cy', 250)
  .attr('r', (d) => d);

타입스크립트 파일을 생성한 후, 웹팩을 사용하여 빌드하고 웹 애플리케이션에서 결과를 확인할 수 있습니다.

이제 타입스크립트와 D3.js를 함께 사용하기 위한 설정이 완료되었습니다. 새로운 데이터 시각화 프로젝트를 시작할 때 참고해 보시기 바랍니다.

참고 자료

이상으로 웹팩을 사용하여 타입스크립트와 데이터 시각화 라이브러리를 연동하는 방법에 대해 알아보았습니다. 부디 도움이 되었기를 바랍니다.

목차

웹팩 및 타입스크립트 설정

D3.js 라이브러리 추가

타입스크립트와 D3.js 함께 사용하기

참고 자료