웹 애플리케이션을 개발할 때, 타입스크립트로 작성한 코드와 애니메이션을 함께 사용해야 하는 경우가 있습니다. 이를 위해 웹팩을 사용하여 타입스크립트와 애니메이션을 연동하는 방법을 살펴보겠습니다.

웹팩 설정

우선, 타입스크립트와 애니메이션을 함께 사용할 수 있도록 웹팩 설정을 해야 합니다. 웹팩은 모듈 번들러로, 여러 모듈을 하나로 묶어서 웹 애플리케이션을 구성할 수 있게 도와줍니다. 타입스크립트와 애니메이션을 함께 사용하기 위해 다음과 같이 웹팩 설정을 할 수 있습니다.

// webpack.config.js

const path = require('path');

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

위의 웹팩 설정에서는 타입스크립트 파일(.ts)을 번들링하기 위해 ts-loader를 사용하고, CSS 파일을 번들링하기 위해 style-loader와 css-loader를 사용합니다.

애니메이션 라이브러리 추가

웹 애플리케이션에 애니메이션을 추가하려면 애니메이션 라이브러리를 설치해야 합니다. 여기서는 GSAP를 사용하는 예제를 보여드리겠습니다.

GSAP를 설치하려면 다음 명령어를 사용합니다:

npm install gsap

타입스크립트 파일 작성

이제 타입스크립트 파일에서 GSAP를 사용하여 애니메이션을 만들어보겠습니다.

// app.ts

import { gsap } from 'gsap';

const box = document.querySelector('.box');

gsap.to(box, { x: 100, duration: 1, repeat: -1, yoyo: true });

위의 예제에서는 GSAP의 to 메서드를 사용하여 .box 요소를 100픽셀 이동시키는 애니메이션을 만들었습니다. 이제 웹팩을 사용하여 이 파일을 번들링할 수 있습니다.

번들링 및 실행

웹팩을 실행하여 타입스크립트 파일과 애니메이션을 번들링합니다.

npx webpack

그러면 dist 폴더에 bundle.js 파일이 생성됩니다. 이 파일을 HTML 파일에 연결하여 웹 애플리케이션을 실행시킬 수 있습니다.

이제 웹팩을 사용하여 타입스크립트와 애니메이션을 함께 사용하는 방법을 알아보았습니다.

마무리

이 글에서는 웹팩을 사용하여 타입스크립트와 GSAP 애니메이션을 함께 사용하는 방법을 살펴보았습니다. 웹팩을 이용하면 다양한 모듈을 함께 사용할 수 있어 개발 효율성을 높일 수 있습니다. 애니메이션을 활용하여 웹 애플리케이션을 더욱 풍부하게 만들어보세요!