[FE] fix : webpack관련 script 오류 수정 (#574)

* fix: webpack-dev-server 삭제, webpack에 내장된 development 사용

* ci: 불필요한 start 명령어 삭제

- webpack의 mode를 설정하지 않아서 기본값이 development가 들어가는데 이 부분이 기존에 있는 dev와 일치해서 역할이 겹침
- dev라는 명령어가 development 모드 실행이라는 의미를 명시적으로 보여줘서 start를 삭제함

* ci: dist 폴더를 실행하는 명령어 변경 (serve-> serve-dist)

* ci: 빌드 하지 않고 production 모드를 여는 명령어 추가

* reactor: system 상수 삭제 및 이를 NODE_ENV 환경 변수로 대체

- webpack mode에 따른 sentry. msw 실행 여부 판단을, NODE_ENV 환경 변수 사용하는 것으로 변경

* fix: webpack-dev-server 패키지 복구

- 명령어만 webpack-dev-server가 필요 없어졌고, 패키지는 여전히 필요함

frontend/package.json

@@ -4,10 +4,10 @@
   "main": "index.js",
   "license": "MIT",
   "scripts": {
-    "dev": "webpack-dev-server --mode=development --open --hot --progress",
-    "start": "webpack serve --open --config webpack.config.js",
-    "build": "webpack --config webpack.config.js",
-    "serve": "http-server ./dist",
+    "dev": "webpack serve --mode=development --open --hot --progress",
+    "build": "webpack --mode=production --node-env=production",
+    "serve-dist": "http-server ./dist",
+    "serve-prod": " webpack serve --mode=production --node-env=production --open",
     "lint:styles": "stylelint \"src/**/styles.ts\" --fix",
     "test": "jest"
   },
@@ -71,7 +71,7 @@
     "undici": "5.0.0",
     "webpack": "^5.92.1",
     "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^5.0.4"
+    "webpack-dev-server": "^5.1.0"
   },
   "msw": {
     "workerDirectory": [

frontend/src/constants/index.ts

@@ -2,5 +2,4 @@ export * from './page';
 export * from './errorMessage';
 export * from './review';
 export * from './queryKey';
-export * from './system';
 export * from './routerParam';

frontend/src/index.tsx

@@ -18,18 +18,17 @@ import {
 } from '@/pages';
 
 import { ErrorSuspenseContainer } from './components';
-import { API_ERROR_MESSAGE, DEV_ENVIRONMENT, ROUTE_PARAM } from './constants';
+import { API_ERROR_MESSAGE, ROUTE_PARAM } from './constants';
 import { ROUTE } from './constants/route';
 import globalStyles from './styles/globalStyles';
 import theme from './styles/theme';
 
-const { hostname, port } = DEV_ENVIRONMENT;
-const isDev = window?.location.hostname === hostname && window.location.port === port;
+const isProduction = process.env.NODE_ENV === 'production';
 const baseUrlPattern = new RegExp(`^${process.env.API_BASE_URL?.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&')}`);
 
 Sentry.init({
   dsn: `${process.env.SENTRY_DSN}`,
-  enabled: !isDev,
+  enabled: isProduction,
   integrations: [Sentry.browserTracingIntegration()],
   environment: 'production',
   tracesSampleRate: 1.0,
@@ -100,7 +99,7 @@ const router = createBrowserRouter([
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
 
 async function enableMocking() {
-  if (isDev) {
+  if (!isProduction) {
     const { worker } = await import('./mocks/browser');
     return worker.start();
   }