React 프로젝트에 Typescript 환경 설정하기(❌CRA)

1. 이전 줄거리

 이전에 우리는 Webpack을 사용해서 CRA를 사용하지 않고 리액트 프로젝트를 만들었다.
이번에는 해당 프로젝트에 Typescript를 사용할 수 있게 설정을 진행할 것이다.
이번에도 마찬가지로 원본 블로그의 흐름을 그대로 따라간다. 하지만 나는 tslint가 아닌 eslint를 사용할 것이여서 약간의 차이가 존재한다. 출처를 보시려면 여기를 클릭해주세요.

이전 글을 아직 보지 않았다면 Webpack으로 React 프로젝트 만들어보기(❌CRA)를 먼저 보고와주세요!

---

2. 타입스크립트 적용하기

2-1. 패키지 설치

npm i -D typescript @babel/preset-typescript ts-loader fork-ts-checker-webpack-plugin

• typescript: Typescript(타입스크립트) 필수 라이브러리
• @babel/preset-typescript: babel(바벨)에서 Typescript(타입스크립트)를 빌드하기 위해 필료한 라이브러리
• ts-loader: Webpack(웹팩)에서 Typescript(타입스크립트)를 컴파일 하기 위해 필요한 라이브러리
• fork-ts-checker-webpack-plugin: ts-loader의 성능을 향상시키기 위한 라이브러리

---

2-2. Webpack 설정하기

webpack.config.js를 열고 아래와 같이 설정합니다.

const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');

// Typescript(타입스크립트)를 빌드할 때 성능을 향상시키기 위한 플러그인를 불러오기
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin'); 

module.exports = {
  entry: {
    // 번들 파일(bundle)의 시작 파일(Entry)을 jsx에서 tsx로 변경
    'js/app': ['./src/App.tsx'],
  },
  output: {
    path: path.resolve(__dirname, 'dist/'),
    publicPath: '/',
  },
  module: {
    rules: [
      // Webpack(웹팩)에서 Typescript(타입스크립트)를 사용하기 위해 js|jsx를 ts|tsx로 수정 후 ts-loader를 추가
      // ts-loader의 옵션은 성능 향상을 위해서
      {
        test: /\.(ts|tsx)$/,
        use: [
          'babel-loader',
          {
            loader: 'ts-loader',
            options: {
              transpileOnly: true,
            },
          },
        ],
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html',
    }),
    // Typescript(타입스크립트)의 컴파일 속도 향상을 위한 플러그인을 설정
    new ForkTsCheckerWebpackPlugin(),
  ],
};

---

2-3. tsconfig.json 파일 설정하기

 루트 디렉토리에tsconfig.json을 만들고 아래와 같이 수정합니다.

{
 "compilerOptions": {
   "target": "es6",
   "module": "esnext",
   "moduleResolution": "node",
   "noResolve": false,
   "noImplicitAny": false,
   "removeComments": false,
   "sourceMap": true,
   "allowJs": true,
   "jsx": "react",
   "allowSyntheticDefaultImports": true,
   "keyofStringsOnly": true
 },
 "typeRoots": ["node_modules/@types", "src/@type"],
 "exclude": [
   "node_modules",
   "build",
   "scripts",
   "acceptance-tests",
   "webpack",
   "jest",
   "src/setupTests.ts",
   "./node_modules/**/*"
 ],
 "include": ["./src/**/*", "@type"]
}

---

2-4. babel 설정하기

  루트 디렉토리의 .babelrc를 아래와 같이 수정합니다.

{
  "presets": [
    [
      "@babel/preset-env",
      { "targets": { "browsers": ["last 2 versions", ">= 5% in KR"] } }
    ],
    "@babel/react",
    "@babel/typescript" // Typescript(타입스크립트)가 컴파일 가능하도록 추가
  ]
}

---

2-5. Typescript 스타일 코딩

 React에서 Typescript를 사용하기 위해 ./src/App.jsx를 ./src/App.tsx로 이름을 변경하고 아래와 같이 수정합니다.

import * as React from 'react';
import * as ReactDOM from 'react-dom';

interface Props {}

const App = ({  }: Props) => {
  return <h1>Hello World!</h1>;
};

ReactDOM.render(<App />, document.getElementById('app'));

---

2-6. 실행해보기

npm start

 위의 명령어를 실행하고 인터넷 브라우저에서 http://localhost:8080/로 들어가면 Hello World!가 보이면 정상적으로 잘 작동하는 것이다.

npm run build

 그리고 빌드를 했을 때 dist 폴더가 생성되는 지 확인해주면 됩니다.

---

3. 마치며

 이전 프로젝트에 바로 진행을 해서 비교적 간단하게 적용을 할 수 있었다.
하지만 찾아보면 더 많은 설정 옵션들이 있으니 다른 옵션들도 적용해봐야할 것 같다.
굿바이~~

💡직접 읽어보면 뼈가 되고 살이 되는 출처
👉https://dev-yakuza.posstree.com/ko/react/typescript/