Webpack 배포 설정, AWS 배포 체크

frontend/.eslintrc.json

@@ -14,7 +14,7 @@
     "plugin:react/jsx-runtime",
     "plugin:storybook/recommended"
   ],
-  "ignorePatterns": ["dist", "*.cjs", "*.config.ts", "*.polyfills.js"],
+  "ignorePatterns": ["dist", "*.config.ts", "*.common.js", "*.prod.js", "*.dev.js", "*.polyfills.js"],
   "parser": "@typescript-eslint/parser",
   "plugins": ["react-refresh", "react", "import"],
   "settings": {

frontend/.gitignore

@@ -5,3 +5,5 @@ node_modules
 dist
 
 .env
+.env.development
+.env.production

frontend/package.json

@@ -5,9 +5,9 @@
   "main": "index.js",
   "scripts": {
     "test": "jest",
-    "dev": "webpack serve --mode development",
+    "dev": "webpack-dev-server --config webpack.dev.js --open",
     "tsc": "npx tsc --noEmit",
-    "build": "webpack --mode production",
+    "build": "webpack --mode production --config webpack.prod.js",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "lint:style": "stylelint '**/style.ts' --fix"
@@ -40,13 +40,15 @@
     "@storybook/test": "^8.2.1",
     "@testing-library/dom": "^10.3.2",
     "@testing-library/react": "^16.0.0",
+    "@types/dotenv-webpack": "^7.0.7",
     "@types/jest": "^29.5.12",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@types/react-syntax-highlighter": "^15.5.13",
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",
     "dotenv": "^16.4.5",
+    "dotenv-webpack": "^8.1.0",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-typescript": "^3.6.1",
@@ -56,7 +58,6 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
     "eslint-plugin-storybook": "^0.8.0",
-    "file-loader": "^6.2.0",
     "html-webpack-plugin": "^5.6.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",

frontend/src/api/templates.ts

@@ -1,9 +1,9 @@
 import { Template, TemplateListResponse, TemplateUploadRequest } from '@/types/template';
 import { customFetch } from './customFetch';
 
-const BASE_URL = process.env.REACT_APP_API_URL;
+const API_URL = process.env.REACT_APP_API_URL;
 
-export const TEMPLATE_API_URL = `${BASE_URL}/templates`;
+export const TEMPLATE_API_URL = `${API_URL}/templates`;
 
 export const getTemplateList = async (): Promise<TemplateListResponse> =>
   await customFetch({

frontend/src/routes/router.tsx

@@ -4,27 +4,24 @@ import Template from '@/pages/Template';
 import TemplateList from '@/pages/TemplateList';
 import TemplateUpload from '@/pages/TemplateUpload';
 
-const router = createBrowserRouter(
-  [
-    {
-      element: <Layout />,
-      children: [
-        {
-          path: '/',
-          element: <TemplateList />,
-        },
-        {
-          path: 'templates/:id',
-          element: <Template />,
-        },
-        {
-          path: 'templates/uploads',
-          element: <TemplateUpload />,
-        },
-      ],
-    },
-  ],
-  { basename: process.env.NODE_ENV === 'development' ? '/' : process.env.REACT_APP_BASE_URL },
-);
+const router = createBrowserRouter([
+  {
+    element: <Layout />,
+    children: [
+      {
+        path: '/',
+        element: <TemplateList />,
+      },
+      {
+        path: 'templates/:id',
+        element: <Template />,
+      },
+      {
+        path: 'templates/uploads',
+        element: <TemplateUpload />,
+      },
+    ],
+  },
+]);
 
 export default router;

frontend/webpack.config.cjs → frontend/webpack.common.js

@@ -1,28 +1,16 @@
-const webpack = require('webpack');
-const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-const dotenv = require('dotenv');
-
-const dotenvPath = path.join(__dirname, '.env');
-const fileEnv = dotenv.config({ path: dotenvPath }).parsed;
-
-const envKeys = Object.keys(fileEnv).reduce((prev, next) => {
-  prev[`process.env.${next}`] = JSON.stringify(fileEnv[next]);
-  return prev;
-}, {});
+const path = require('path');
 
 module.exports = {
   entry: './src/index.tsx',
   output: {
     path: path.resolve(__dirname, 'dist'),
     filename: 'bundle.js',
-    publicPath: '/',
+    clean: true,
   },
-  resolve: {
-    alias: {
-      '@': path.resolve(__dirname, 'src/'),
-    },
-    extensions: ['.tsx', '.ts', '.js'],
+  devServer: {
+    port: 3000,
+    historyApiFallback: true,
   },
   module: {
     rules: [
@@ -32,16 +20,13 @@ module.exports = {
         exclude: /node_modules/,
       },
       {
-        test: /\.(png|jpe?g|gif|svg)$/i,
-        use: [
-          {
-            loader: 'file-loader',
-            options: {
-              name: '[path][name].[ext]',
-              outputPath: 'assets/images',
-            },
+        test: /\.(png|svg|jpe?g|gif|webp)$/i,
+        type: 'asset',
+        parser: {
+          dataUrlCondition: {
+            maxSize: 4 * 1024, // 4kb
           },
-        ],
+        },
       },
     ],
   },
@@ -50,10 +35,11 @@ module.exports = {
       template: './public/index.html',
       filename: 'index.html',
     }),
-    new webpack.DefinePlugin(envKeys),
   ],
-  devServer: {
-    port: 3000,
-    historyApiFallback: true,
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, 'src/'),
+    },
+    extensions: ['.tsx', '.ts', '.js'],
   },
 };

frontend/webpack.dev.js

@@ -0,0 +1,29 @@
+const { HotModuleReplacementPlugin } = require('webpack');
+const { merge } = require('webpack-merge');
+const Dotenv = require('dotenv-webpack');
+
+const common = require('./webpack.common.js');
+
+module.exports = () => {
+  return merge(common, {
+    mode: 'development',
+    devtool: 'cheap-module-source-map',
+    output: {
+      publicPath: '/',
+    },
+    plugins: [
+      new HotModuleReplacementPlugin(),
+      new Dotenv({
+        path: './.env.development',
+      }),
+    ],
+    module: {
+      rules: [
+        {
+          test: /\.(jpe?g|png|gif)$/i,
+          type: 'asset/inline',
+        },
+      ],
+    },
+  });
+};

frontend/webpack.prod.js

@@ -0,0 +1,19 @@
+const { merge } = require('webpack-merge');
+const Dotenv = require('dotenv-webpack');
+
+const common = require('./webpack.common.js');
+
+module.exports = () => {
+  return merge(common, {
+    mode: 'production',
+    devtool: 'hidden-source-map',
+    plugins: [
+      new Dotenv({
+        path: './.env.production',
+        systemvars: true,
+        safe: true,
+        ignoreStub: true,
+      }),
+    ],
+  });
+};