✨ pnpm dev일 때 로컬 서버 연결, pnpm mock일 때 msw에 연결될 수 있도록 설정 (#45)

Author: Yeonu-Kim

.env.mock

@@ -0,0 +1 @@
+VITE_USE_MOCK=true

package.json

@@ -6,6 +6,7 @@
   "packageManager": "pnpm@10.28.0",
   "scripts": {
     "dev": "vite",
+    "mock": "vite --mode mock",
     "build": "tsc -b && vite build",
     "lint": "biome lint .",
     "check:types": "tsc",

src/main.tsx

@@ -9,7 +9,7 @@ if (rootElement === null) {
 }
 
 const enableMocking = async () => {
-  if (import.meta.env.DEV) {
+  if (import.meta.env.VITE_USE_MOCK === 'true') {
     const { worker } = await import('./mocks');
     return worker.start({ onUnhandledRequest: 'bypass' });
   }

vite.config.ts

@@ -5,7 +5,7 @@ import path from 'path';
 import { defineConfig } from 'vite';
 
 // https://vite.dev/config/
-export default defineConfig({
+export default defineConfig(({ mode }) => ({
   plugins: [
     tailwindcss(),
     react(),
@@ -16,4 +16,12 @@ export default defineConfig({
       '@': path.resolve(__dirname, './src'),
     },
   },
-});
+  server:
+    mode !== 'mock'
+      ? {
+          proxy: {
+            '/api': 'http://localhost:8000',
+          },
+        }
+      : undefined,
+}));