Refactor/#427 ts-loader를 fork-ts-checker-webpack-plugin으로 대체한다

[cruelladevil]

📝작업 내용

이번 PR에서 작업한 내용을 간략히 설명(이미지 첨부 가능)

타입체킹 담당을 ts-loader에서 fork-ts-checker-webpack-plugin으로 대체하였습니다.

기존에 ts-loader가 타입스크립트 컴파일을 관여하였다면,
현재는 babel-loader의 @babel/preset-typescript이 타입스크립트 컴파일을 담당하고 있습니다.

• 기존에 ts-loader가 있는데 왜 @babel/preset-typescript가 설치되어 있었나?
• 스토리북을 설정하게 되면서 storybook이 타입스크립트를 해석하지 못하고 있어서 설치하게 되었습니다.
• 스토리북이 프로젝트 내 babel 설정은 불러오지만 웹팩 설정은 불러오지 않는다고 결론 지었었습니다.

기존 ts-loader와 다른 부분은 타입체킹이 병렬적인 프로세스로 돌아간다는 점입니다.
이 플러그인은 모듈을 해석할 때 웹팩이 아니라 타입스크립트의 모듈 해석을 사용한다는 것이 중요합니다.

💬리뷰 참고사항

원활한 리뷰를 위해 전달하고 싶은 맥락(특정 파일, 디렉터리 등등)
리뷰어가 특별히 봐주었으면 하는 부분

개선전과 개선후 각각 10번씩 빌드하여 평균을 내었을때,
개선전 평균 6478.9ms, 개선후 평균 3656ms입니다.
소소하지만 쌓이고 쌓이면 클 것이라고 생각합니다 😊

추가된 설정 설명

1. ts-loader의 경우 tsc로 컴파일하기 때문에 tsconfig.json의 "jsx": "react-jsx", 속성이 jsx 변환을 담당해주었습니다.
   이제는 babel-loader를 통해 컴파일하기 때문에 @babel/preset-react가 해당 부분을 담당하면서 runtime: 'automatic' 속성이 추가되었습니다. (모든 파일에 import React from 'react';가 적용되도록 _jsx 문법으로 컴파일하는 것입니다.)

{
  // ...
  [
    '@babel/preset-react',
    {
      runtime: 'automatic',
    },
  ]
  // ...
}

2. fork-ts-checker-webpack-plugin 설정
   diagnosticOptions에 syntactic을 true로 바꾸어 문법 검사를 실시하도록 하였습니다.
   issue - 타입체킹에 포함할 파일과 제외할 파일을 설정하였습니다.

new ForkTsCheckerWebpackPlugin({
  typescript: {
    diagnosticOptions: {
      syntactic: true,
    },
  },
  issue: {
    include: [{ file: '**/src/**/*.{ts,tsx}' }],
    exclude: [{ file: '**/*.test.{ts,tsx}' }],
  },
}),

#️⃣연관된 이슈

연관된 이슈 번호를 모두 작성

close #427

[github-actions]

Unit Test Results

  80 files    80 suites   12s ⏱️
312 tests 312 ✔️ 0 💤 0 ❌
315 runs  315 ✔️ 0 💤 0 ❌

Results for commit a205a85.

♻️ This comment has been updated with latest results.

[ukkodeveloper]

고생많았습니다 코난!!! ts 컴파일과 타입체킹을 병렬적으로 하는 것이 신기하네요. 코난 캠퍼스 오면 한번 더 설명해주세요 ㅎㅎ 너무 궁금해요!

++ 추가 : last 2 years, not dead 어떠신가요?
not dead: 지원이 중단되지 않은 브라우저

[ukkodeveloper]

👍 👍 👍

[cruelladevil]

👍 not dead도 추가하였습니다.