[typescript] 웹팩으로 타입스크립트와 라우팅 연동하기

11 Dec 2023

typescript

웹팩은 모듈 번들러로서, 프로젝트에서 여러 모듈을 번들링하여 하나의 파일로 만들어줍니다. 여기에 타입스크립트와 라우팅을 연동하여 사용하면, 프론트엔드 웹 애플리케이션의 개발 및 유지보수를 효율적으로 할 수 있습니다.

1. 타입스크립트 설정하기

먼저, package.json 파일에 typescript, ts-loader, ts-node, @types/react, @types/react-dom 등의 의존성 패키지를 설치합니다.

"devDependencies": {
  "typescript": "^4.1.2",
  "ts-loader": "^9.2.6",
  "ts-node": "^9.1.1",
  "@types/react": "^17.0.3",
  "@types/react-dom": "^17.0.3"
}

그 다음, 타입스크립트 설정 파일 tsconfig.json을 프로젝트 루트 디렉토리에 생성합니다.

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "jsx": "react",
    "strict": true
  }
}

2. 웹팩 설정하기

타입스크립트 파일을 번들링하기 위해 웹팩 설정 파일 webpack.config.js를 생성하고, ts-loader를 사용하여 타입스크립트 파일을 로드하도록 구성합니다.

const path = require('path');

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

3. 라우팅 설정하기

라우팅 라이브러리로는 react-router-dom을 예로 들어 설명합니다. 이를 위해 react-router-dom, @types/react-router-dom 패키지를 설치합니다.

npm install react-router-dom @types/react-router-dom

그리고 라우팅을 구현하는 컴포넌트를 작성하고, 라우터 컴포넌트를 사용하여 라우팅을 설정합니다.

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const App = () => {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </Router>
  );
};

이렇게 웹팩으로 타입스크립트와 라우팅을 연동하면, 타입 안정성을 확보하면서 모듈 번들링 및 라우팅을 손쉽게 구현할 수 있습니다.

참고: