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

* config: fork-ts-checker-webpack-plugin 설치

* config: ts-loader 패키지 및 설정 제거

* config: fork-ts-checker-webpack-plugin 적용

* config: browser 타겟을 `last 2 years`로 설정

- South Korea 기준 72.2% 지원
- 참고: https://browsersl.ist/#q=last+2+years&region=KR

* config: fork-ts-checker-webpack-plugin의 issue 설정 변경

* config: browser 타겟을 `last 2 years, not dead`로 변경

- South Korea 기준 83.9% 지원
- 참고: https://browsersl.ist/#q=last+2+years%2C+not+dead&region=KR

frontend/babel.config.js

@@ -3,15 +3,17 @@ module.exports = {
     [
       '@babel/preset-env',
       {
-        targets: {
-          // TODO: 브라우저 지원 범위
-          chrome: '51',
-        },
+        targets: 'last 2 years, not dead',
         useBuiltIns: 'entry',
         corejs: '3.31.1',
       },
     ],
-    ['@babel/preset-react'],
+    [
+      '@babel/preset-react',
+      {
+        runtime: 'automatic',
+      },
+    ],
     ['@babel/preset-typescript'],
   ],
 };

frontend/package.json

@@ -54,6 +54,7 @@
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-storybook": "^0.6.12",
+    "fork-ts-checker-webpack-plugin": "^8.0.0",
     "html-webpack-plugin": "^5.5.3",
     "jest": "^29.6.1",
     "jest-environment-jsdom": "^29.6.1",
@@ -65,7 +66,6 @@
     "stylelint": "^15.10.2",
     "stylelint-config-clean-order": "^5.0.1",
     "ts-jest": "^29.1.1",
-    "ts-loader": "^9.4.4",
     "tsconfig-paths-webpack-plugin": "^4.1.0",
     "webpack": "^5.88.1",
     "webpack-cli": "^5.1.4",

frontend/webpack.common.js

@@ -1,6 +1,7 @@
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 
 module.exports = {
   entry: './src/index.tsx',
@@ -41,6 +42,17 @@ module.exports = {
     new CopyWebpackPlugin({
       patterns: [{ from: './public/assets/og', to: './static/og' }],
     }),
+    new ForkTsCheckerWebpackPlugin({
+      typescript: {
+        diagnosticOptions: {
+          syntactic: true,
+        },
+      },
+      issue: {
+        include: [{ file: '**/src/**/*.{ts,tsx}' }],
+        exclude: [{ file: '**/*.test.{ts,tsx}' }],
+      },
+    }),
   ],
   resolve: {
     extensions: ['.tsx', '.ts', '.jsx', '.js'],

frontend/webpack.dev.js

@@ -25,7 +25,6 @@ module.exports = merge(common, {
               plugins: ['react-refresh/babel'],
             },
           },
-          'ts-loader',
         ],
       },
     ],

frontend/webpack.prod.js

@@ -18,7 +18,7 @@ module.exports = merge(common, {
       {
         test: /\.tsx?$/,
         exclude: /node_modules/,
-        use: ['babel-loader', 'ts-loader'],
+        use: ['babel-loader'],
       },
     ],
   },