[Feature/#80] MSW 적용

.vscode/launch.json

@@ -0,0 +1,29 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Next.js: debug server-side",
+      "type": "node-terminal",
+      "request": "launch",
+      "command": "npm run dev"
+    },
+    {
+      "name": "Next.js: debug client-side",
+      "type": "pwa-chrome",
+      "request": "launch",
+      "url": "http://localhost:3000"
+    },
+    {
+      "name": "Next.js: debug full stack",
+      "type": "node-terminal",
+      "request": "launch",
+      "command": "npm run dev",
+      "console": "integratedTerminal",
+      "serverReadyAction": {
+        "pattern": "started server on .+, url: (https?://.+)",
+        "uriFormat": "%s",
+        "action": "debugWithChrome"
+      }
+    }
+  ]
+}

next.config.js

@@ -14,6 +14,9 @@ const nextConfig = {
   // Docker를 위한 설정
   // https://nextjs.org/docs/advanced-features/output-file-tracing
   output: 'standalone',
+  experimental: {
+    esmExternals: false,
+  },
 };
 
 module.exports = nextConfig;

package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "NODE_OPTIONS=' --no-experimental-fetch' next dev",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
@@ -34,6 +34,10 @@
     "babel-plugin-styled-components": "^2.0.6",
     "eslint": "8.12.0",
     "eslint-config-next": "12.1.1",
+    "msw": "^0.47.4",
     "typescript": "4.6.3"
+  },
+  "msw": {
+    "workerDirectory": "public"
   }
 }

pages/_app.tsx

@@ -16,6 +16,10 @@ import { userSessionState } from 'src/stores/user';
 import axios from 'axios';
 import { ROUTE } from 'src/route';
 
+import { setUpMocks } from '../src/api/mock/index';
+
+setUpMocks();
+
 initAxiosConfig();
 
 interface Props extends AppProps {
@@ -61,7 +65,7 @@ MyApp.getInitialProps = async (appContext: AppContext) => {
   const { ctx } = appContext;
 
   const cookie = ctx.req ? ctx.req.headers.cookie : null;
-  console.log('success');
+
   let user;
   if (cookie) {
     axios.defaults.headers.common['cookie'] = cookie;