프론트 의존성 업데이트 진행 (#698)

* frontend gitignore에서 package-lock 제거

* 프론트 빌드 도구와 패키지 버전 갱신

* 차트와 코드 하이라이트 연동 갱신

* 홈 팝업과 추천 박스 화면 호환 수정

* 프론트 소규모 패키지 버전 갱신

* 프론트 ESLint 에러 정리

* 프론트 Node 24 Babel 8 ESLint 10 전환

* ECharts 레이더 컴포넌트 등록

Author: Neibce

frontend/.babelrc

@@ -1,22 +1,23 @@
 {
   "presets": [
     [
-      "env",
+      "@babel/preset-env",
       {
         "modules": false,
         "targets": {
           "browsers": ["> 1%", "last 2 versions", "not ie <= 9"]
-        },
-        "useBuiltIns": true
+        }
       }
-    ],
-    "stage-2"
+    ]
   ],
-  "plugins": ["transform-runtime", "syntax-dynamic-import"],
-  "env": {
-    "test": {
-      "presets": ["env", "stage-2"],
-      "plugins": ["istanbul"]
-    }
-  }
+  "plugins": [
+    [
+      "polyfill-corejs3",
+      {
+        "method": "entry-global"
+      }
+    ],
+    "@babel/plugin-transform-object-rest-spread",
+    "@babel/plugin-transform-runtime"
+  ]
 }

frontend/.eslintignore

@@ -1,5 +1,3 @@
-package-lock.json
-
 # Logs
 logs
 *.log
@@ -69,4 +67,4 @@ test.vue
 # build
 vendor-manifest.json
 vendor.dll*.js
-
+vendor.dll*.js.LICENSE.txt

frontend/.eslintrc.js

@@ -0,0 +1 @@
+24.11.0

frontend/.gitignore

@@ -1,6 +1,6 @@
 language: node_js
 node_js:
-  - 8.12.0
+  - 24.11.0
 sudo: required
 services:
   - docker

frontend/.nvmrc

@@ -1,7 +1,7 @@
 ARG SERVER_NAME
 
 # Build stage
-FROM node:16 AS build-stage
+FROM node:24.11.0 AS build-stage
 
 WORKDIR /app
 COPY package*.json ./

frontend/.travis.yml

@@ -10,7 +10,7 @@ const opn = require("opn")
 const path = require("path")
 const express = require("express")
 const webpack = require("webpack")
-const proxyMiddleware = require("http-proxy-middleware")
+const { createProxyMiddleware } = require("http-proxy-middleware")
 const webpackConfig = require("./webpack.dev.conf")
 
 // default port where dev server listens for incoming traffic
@@ -26,7 +26,7 @@ const compiler = webpack(webpackConfig)
 
 const devMiddleware = require("webpack-dev-middleware")(compiler, {
   publicPath: webpackConfig.output.publicPath,
-  quiet: true,
+  stats: "errors-warnings",
 })
 
 const hotMiddleware = require("webpack-hot-middleware")(compiler, {
@@ -53,7 +53,10 @@ Object.keys(proxyTable).forEach(function (context) {
   if (typeof options === "string") {
     options = { target: options }
   }
-  app.use(proxyMiddleware(options.filter || context, options))
+  if (!options.target) {
+    return
+  }
+  app.use(createProxyMiddleware(options.filter || context, options))
 })
 
 // handle fallback for HTML5 history API

frontend/Dockerfile

@@ -1,7 +1,7 @@
 "use strict"
 const path = require("path")
 const config = require("../config")
-const ExtractTextPlugin = require("extract-text-webpack-plugin")
+const MiniCssExtractPlugin = require("mini-css-extract-plugin")
 
 exports.assetsPath = function (_path) {
   const assetsSubDirectory =
@@ -17,7 +17,7 @@ exports.cssLoaders = function (options) {
   const cssLoader = {
     loader: "css-loader",
     options: {
-      minimize: process.env.NODE_ENV === "production",
+      esModule: false,
       sourceMap: options.sourceMap,
     },
   }
@@ -34,13 +34,8 @@ exports.cssLoaders = function (options) {
       })
     }
 
-    // Extract CSS when that option is specified
-    // (which is the case during production build)
     if (options.extract) {
-      return ExtractTextPlugin.extract({
-        use: loaders,
-        fallback: "vue-style-loader",
-      })
+      return [MiniCssExtractPlugin.loader].concat(loaders)
     } else {
       return ["vue-style-loader"].concat(loaders)
     }

frontend/build/dev-server.js

@@ -6,6 +6,7 @@ const utils = require("./utils")
 const config = require("../config")
 const vueLoaderConfig = require("./vue-loader.conf")
 const HtmlWebpackIncludeAssetsPlugin = require("html-webpack-include-assets-plugin")
+const VueLoaderPlugin = require("vue-loader/lib/plugin")
 
 function resolve(dir) {
   return path.join(__dirname, "..", dir)
@@ -70,7 +71,10 @@ module.exports = {
       },
       {
         test: /\.js$/,
-        loader: "babel-loader?cacheDirectory=true",
+        loader: "babel-loader",
+        options: {
+          cacheDirectory: true,
+        },
         // include -> inclue 안에 있는 모듈 '만' babel이 로드 합니다.
         // exclude -> exclude 안에 있는 모듈 '만' babel 로드 시 제외 합니다.
         // 따라서 현재 include 안에 node_modules 가 없으므로, node_modules 안의 파일은 babel이 로드하지 않습니다.
@@ -88,6 +92,7 @@ module.exports = {
         loader: "url-loader",
         options: {
           limit: 10000,
+          esModule: false,
           name: utils.assetsPath("img/[name].[hash:7].[ext]"),
         },
       },
@@ -96,6 +101,7 @@ module.exports = {
         loader: "url-loader",
         options: {
           limit: 10000,
+          esModule: false,
           name: utils.assetsPath("media/[name].[hash:7].[ext]"),
         },
       },
@@ -104,12 +110,14 @@ module.exports = {
         loader: "url-loader",
         options: {
           limit: 10000,
+          esModule: false,
           name: utils.assetsPath("fonts/[name].[hash:7].[ext]"),
         },
       },
     ],
   },
   plugins: [
+    new VueLoaderPlugin(),
     new webpack.DllReferencePlugin({
       context: __dirname,
       manifest: require("./vendor-manifest.json"),