일반적으로 JavaScript로 작성된 프로젝트를 개발할 때, 코드를 관리하고 라이브러리를 번들링하기 위해 Rollup과 같은 도구를 사용합니다. 타입스크립트는 JavaScript에 정적 타입 기능을 추가하여 코드의 안정성을 높이는 데 도움이 되는 인기 있는 언어입니다. 이번 글에서는 타입스크립트와 Rollup을 함께 사용하여 비즈니스 로직을 구현하는 방법을 살펴보겠습니다.

1. 프로젝트 설정

먼저, 타입스크립트로 작성된 프로젝트를 생성하고 Rollup을 이용하여 번들링하는 작업을 시작해보겠습니다. 아래는 프로젝트를 초기화하고 필요한 패키지를 설치하는 명령어입니다.

mkdir typescript-rollup-example
cd typescript-rollup-example
npm init -y
npm install typescript rollup @rollup/plugin-typescript sharp

위 명령어를 통해 프로젝트를 설정하고 필요한 패키지를 설치합니다. typescript 패키지는 타입스크립트 컴파일러를, rollup은 번들링 도구를, @rollup/plugin-typescript는 Rollup에서 타입스크립트를 사용할 수 있게 해주는 플러그인입니다. 또한, 이 예제에서는 이미지 처리를 위해 sharp 패키지도 함께 설치합니다.

2. Rollup 구성

타입스크립트로 작성된 코드를 Rollup을 통해 번들링하려면 Rollup의 설정 파일을 생성해야 합니다. 프로젝트 루트 경로에 rollup.config.js 파일을 다음과 같이 생성합니다.

import typescript from '@rollup/plugin-typescript';

export default {
  input: 'src/index.ts',
  output: {
    file: 'dist/bundle.js',
    format: 'cjs'
  },
  plugins: [
    typescript()
  ]
};

이 구성 파일에서는 @rollup/plugin-typescript 플러그인을 이용하여 타입스크립트 파일을 번들링 대상으로 지정하고, cjs 형식의 파일로 번들링된 결과물을 dist 디렉토리 아래의 bundle.js 파일로 출력하도록 설정합니다.

3. 타입스크립트 코드 작성

이제 src 디렉토리에 index.ts 파일을 생성하고 비즈니스 로직을 작성해봅시다.

interface Product {
  id: number;
  name: string;
  price: number;
}

function calculateDiscount(product: Product, percentage: number): number {
  return product.price * (percentage / 100);
}

위 코드에서는 Product라는 인터페이스를 정의하고, 이를 활용하는 calculateDiscount 함수를 작성했습니다.

4. 번들링 실행

이제 아래 명령어를 사용하여 Rollup을 실행하여 타입스크립트 코드를 번들링할 수 있습니다.

npx rollup -c

위 명령어를 실행하면 Rollup이 설정 파일에 따라 타입스크립트 코드를 번들링하고, dist 디렉토링 아래에 bundle.js 파일이 생성됩니다.

이처럼 타입스크립트와 Rollup을 함께 사용하여 프로젝트를 구성하고 비즈니스 로직을 구현하는 방법에 대해 알아보았습니다.

참고 자료

• Rollup 공식 문서
• 타입스크립트 공식 문서
• Rollup 플러그인 목록

Happy coding!