React mini Project (2) - 밑재료 손질(환경 설정)

지난 글에서 웹팩 설치까지 끝냈으니 이제 나머지 TypeScript,jest 그리고 React-Testing-Library를 설치하고 설정해보겠다.

---

타입스크립트부터 하자.

npm i typescript -D

여기서 타입스크립트란?
간단하게 말하면 자바스크립트의 정적 타입을 입혀 타입을 부여하는 자바스크립트 확장 문법이라 할 수 있다.

• 컴파일 언어, 정적 타입 언어
• 자바스크립트 슈퍼셋(Superset)
• 높은 수준의 코드 탐색과 디버깅
• 자바스크립트 호환
• 점진적 전환 가능

등의 특징이 있다.
그리고 type 정의 패키지를 설치한다.

npm i @types/react @types/react-dom -D

그리고 tsconfig.json을 만들고 설정해주자.

npm typescirpt --init

{
  "compilerOptions": {
    "target": "es2016",
    "lib": [
      "DOM",
      "ES2015",
      "ES2016",
      "ES2017",
      "ES2018",
      "ES2019",
      "ES2020",
      "ES2021"
    ],
    "jsx": "preserve",
    "module": "esnext",
    "sourceMap": true,
    "esModuleInterop": true,
    "moduleResolution": "node",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "alwaysStrict": true,
    "baseUrl": "./",
    "outDir": "./dist",
    "typeRoots": [
      "./@types",
      "./node_modules/@types"
    ],
    "types": [
      "react/next",
      "react-dom/next"
    ] ,
    "skipLibCheck": true 

  },
  "exclude": ["node_modules/**/*"],
  "include": ["**/*.ts", "**/*.tsx"]
}

warnning: 혹시라도 이글을 보고 그대로 붙여넣기 하지 마시길 이 설정은 각자 상황에 맞게 설정해야한다. 그저 예시다.

이렇게 설정을 해주고 다음 jest와 React-Testing-Library를 설치하자.

npm i jest @testing-library/jest-dom @testing-library/react -D

jest의 타입 정의 패키지도 설치하고

npm i @types/jest -D

이렇게 환결설정 패키지 설치가 끝났으니 마지막으로 webpack을 마저 설정해준다.
일단 webpack에서 웹 애플리케이션을 해석할 때 자바스크립트 파일이 아닌 웹 자원(HTML, CSS, Images, 폰트 등)들을 변환할 수 있도록 도와주는 속성을 설정하기 위해 아래의 로더를 설치한다.

npm i css-loader babel-loader file-loader style-loader ts-loader

HtmlWebpackPlugin을 설치

• html 파일을 템플릿으로 생성할 수 있게 도와주는 플러그인이다.

npm i html-webpack-plugin -D

CleanWebpackPlugin을 설치

• 빌드 이전 결과물을 제거하는 플러그인으로 빌드 결과물은 웹팩에서 아웃풋 경로에 설장한 곳으로 폴더 및 파일들이 모이는데 빌드 했을시 이전 빌드내용이 삭제되지 않고 그대로 남아있는 경우도 있어 이것을 해결해주는 플러그인이다.

npm i clean-webpack-plugin -D

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const webpack = require('webpack');

module.exports = {
  mode: 'development',
  devtool: 'eval-cheap-source-map',
  entry: {
    'js/app': ['./src/index.tsx'],
  },
  resolve: {
    extensions: ['.js', '.jsx', '.ts', '.tsx'],
  },
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        exclude: '/node_modules/',
        use: [
          'babel-loader',
          {
            loader: 'ts-loader',
          },
        ],
      },
      {
        test: /\.css$/,
        use: [{ loader: 'style-loader' }, { loader: 'css-loader' }],
      },
    ],
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, '/dist'),
  },
  devServer: {
    compress: true,
    port: 9000,
    historyApiFallback: true,
  },

  plugins: [
    new CleanWebpackPlugin(),
    new webpack.ProvidePlugin({
      React: 'react',
    }),
    new webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
};

plugin 을 const 에 로드하고, 밑에 plugins 라는 옵션으로 불러오고자 하는 플러그인의 객체를 생성한다.

이상으로 React, Prettier, ESLint, Babel, Webpack, TypeScript, Jest, React-Testing-Library 초기 설정을 마치겠다.

후.. 중간중간 빠진 내용이 존재하는데 블로그 리팩토링 하겠다. 할게 너무 많다.