프론트엔드‐Webpack 기반의 React & TypeScript 환경 세팅

webpack.config.js

import { CleanWebpackPlugin } from "clean-webpack-plugin";
import HtmlWebpackPlugin from "html-webpack-plugin";
import path from "path";
import webpack from "webpack";

export default (env, argv) => {
  const prod = argv.mode === "production";

  return {
    mode: prod ? "production" : "development",
    devtool: prod ? "hidden-source-map" : "eval",
    entry: "./src/index.tsx",
    output: {
      path: path.join(__dirname, "/dist"),
      filename: "index.js",
      publicPath: "/",
    },
    devServer: {
      historyApiFallback: true,
      port: 3000,
      hot: true,
    },
    resolve: {
      extensions: [".js", ".jsx", ".ts", ".tsx"],
      alias: {
        "@": path.resolve(__dirname, "./src/"),
      },
    },
    devtool: prod ? false : "source-map",
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          use: ["ts-loader"],
        },
      ],
    },
    plugins: [
      new webpack.ProvidePlugin({
        React: "react",
      }),
      new HtmlWebpackPlugin({
        template: "./public/index.html",
        minify:
          process.env.NODE_ENV === "production"
            ? {
                collapseWhitespace: true, // 빈칸 제거
                removeComments: true, // 주석 제거
              }
            : false,
      }),
      new CleanWebpackPlugin(),
    ],
  };
};

tsconfig.json

{
  "compilerOptions": {
    "lib": [
      "DOM",
      "DOM.Iterable",
      "ESNext"
    ]                                        /* Document, window 등의 라이브러리 타입 추가 */,
    "target": "ESNext"                       /* Typescript 가 변환할 JavaScript의 ECMAScript 버전 */,
    "jsx": "react-jsx"                       /* react 의 jsx 사용하도록 설정 */,
    "module": "ESNext"                       /* TypeScript 컴파일러가 생성하는 JavaScript 모듈 코드의 형식 */,
    "moduleResolution": "Node"               /* 패키지를 node_modules 에서 찾도록 설정 */,
    "baseUrl": "./"                          /* 기준이 되는 디렉토리 */,
    "types": ["jest"]                        /* jest 관련 타입 추가 */
    "resolveJsonModule": true                /* json 파일을 모듈로 가져올 수 있다 */,
    "allowJs": false                         /* 자바스크립트를 허용할지 여부 */,
    "esModuleInterop": true                  /* ESM, CJS 모듈 호환 여부 */,
    "forceConsistentCasingInFileNames": true /* import 시 파일 이름 대소문자 구분 여부 */,

    "strict": true                           /* Enable all strict type-checking options. */,
    "noFallthroughCasesInSwitch": true       /* switch case 문에서 case 별 break 넣지 않으면 에러 발생 여부  */,
    "skipLibCheck": true                     /* d.ts 파일을 무시할지 여부 */,
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*"]
}

package.json

"dependencies": {
    "@react-icons/all-files": "^4.1.0",
    "@tanstack/react-query": "^5.51.1",
    "axios": "^1.7.2",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-router-dom": "^6.24.1",
    "styled-components": "^6.1.11"
  },
  "devDependencies": {
    // 스토리북
    "storybook": "^8.1.11",
    "@chromatic-com/storybook": "^1.6.1",
    "@storybook/addon-essentials": "^8.1.11",
    "@storybook/addon-interactions": "^8.1.11",
    "@storybook/addon-links": "^8.1.11",
    "@storybook/addon-onboarding": "^8.1.11",
    "@storybook/addon-webpack5-compiler-swc": "^1.0.4",
    "@storybook/blocks": "^8.1.11",
    "@storybook/react": "^8.1.11",
    "@storybook/react-webpack5": "^8.1.11",
    "@storybook/test": "^8.1.11",
    
    // import 순서 정렬
    "@trivago/prettier-plugin-sort-imports": "^4.3.0",

    // 테스트 라이브러리
    "@testing-library/jest-dom": "^6.4.6",
    "@testing-library/react": "^16.0.0",
    "jest-environment-jsdom": "^29.7.0",
    "msw": "^2.3.1",
    "ts-jest": "^29.2.2",
    
    // 타입 패키지
    "@types/jest": "^29.5.12",
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "@types/react-icons": "^3.0.0",
    "@typescript-eslint/eslint-plugin": "^7.16.0",
    "@typescript-eslint/parser": "^7.16.0",
    
    // build 시 이전 빌드 결과 제거
    "clean-webpack-plugin": "^4.0.0",
    
    // js 문법 확인
    "eslint": "^8.57.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-prettier": "^5.1.3",
    "eslint-plugin-react": "^7.34.3",
    "eslint-plugin-react-hooks": "^4.6.2",
    "eslint-plugin-storybook": "^0.8.0",
    
    // Webpack에서 HTML 파일을 생성하고 관리
    "html-webpack-plugin": "^5.6.0",
    
    // 자동 정렬 포메팅
    "postcss-styled-syntax": "^0.6.4",
    "prettier": "^3.3.2",
    "stylelint": "^16.7.0",
    "stylelint-config-clean-order": "^6.1.0",
    "stylelint-config-standard": "^36.0.1",
    "stylelint-order": "^6.0.4",
    
    // webpack 에서 typescript 파일을 처리하기 위한 로더
    "ts-loader": "^9.5.1",
    
    // 타입스크립트
    "typescript": "^5.5.3",
    
    // webpack 패키지
    "webpack": "^5.92.1",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^5.0.4"
  }