서버 api , MSW 껐다 키는 방법

⚙️ 세팅

// vite.config.ts

server: {
    proxy: {
      "/api": {
        target: "http://3.39.156.144:8080",
        changeOrigin: true,
      },
    },
  },

// .env

VITE_BASE_URL = 
VITE_AUTH_JWT_TOKEN_STORAGE_KEY = access
VITE_REFRESH_JWT_TOKEN_STORAGE_KEY = refresh

전체 vite.config.ts 코드

export default defineConfig(({ command }) => ({
  plugins: [react(), tsconfigPaths(), splitVendorChunkPlugin()],
  publicDir: command === "serve" ? "public" : false,
  server: {
    proxy: {
      "/api": {
        target: "http://3.39.156.144:8080",
        changeOrigin: true,
      },
    },
  },
  build: {
    chunkSizeWarningLimit: 1600,
    rollupOptions: {
      plugins: [
        visualizer({
          open: false,
          gzipSize: true,
          brotliSize: true,
        }),
      ],
      output: {
        manualChunks: (id) => {
          if (id.includes("node_modules")) {
            return id
              .toString()
              .split("node_modules/")[1]
              .split("/")[0]
              .toString()
          }
        },
      },
    },
  },
}))

🖱️ MSW 껐다 켜기

1. 브라우저 개발자도구(f12)의 ‘애플리케이션’으로 들어갑니다.

1. Service workers 탭에서 ‘네트워크 우회’(bypass for network)를 클릭!