[typescript] 웹팩으로 타입스크립트와 그래픽스 연동하기

11 Dec 2023

typescript

웹팩(Webpack)은 모듈 번들러로서, 웹 애플리케이션을 위한 자원(이미지, HTML, CSS, JavaScript 등)을 하나 이상의 번들로 묶는 역할을 합니다. 이제 타입스크립트(TypeScript)와 그래픽스(Graphics)를 웹팩을 사용하여 연동하는 방법을 알아보겠습니다.

웹팩 설정

먼저, 웹팩 설정 파일(webpack.config.js)을 생성합니다.

// webpack.config.js
const path = require('path');

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

위 설정은 타입스크립트 파일(.ts)을 번들링하기 위한 기본적인 웹팩 설정입니다.

타입스크립트 설정

타입스크립트 설정 파일(tsconfig.json)을 만들어야 합니다.

// tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true
  }
}

위 설정은 ES5로 컴파일하고, CommonJS 모듈 시스템을 사용하며, 엄격한 타입 검사를 수행하도록 합니다.

그래픽스 설정

마지막으로, 그래픽스를 사용하기 위한 라이브러리를 설치합니다.

npm install graphics-library

이제 위의 설정과 라이브러리를 사용하여 코드를 작성할 수 있습니다.

이제 모든 설정이 완료되었고, 타입스크립트와 그래픽스를 웹팩을 이용하여 연동할 수 있습니다.

위의 설정 및 라이브러리를 사용하여 코드를 작성하고, 빌드하여 실행하면, 타입스크립트와 그래픽스가 웹팩을 통해 연동된 환경에서 작동할 것입니다.

목차

웹팩 설정

타입스크립트 설정

그래픽스 설정

참고 자료