프로젝트 세팅

• 은아: react, ts, next

• 건열: react, ts

• 건오: react, ts, (next하면 공부할 예정)

• 은지: react, ts, next

• 언어
• TS

• 프레임워크
• react

• 상태 관리 라이브러리
• recoil, react-query
• reqct-query
• suspense + error boundary

• css 라이브러리
• https://vanilla-extract.style/ → 멘토님

• API
• axios

• lint
• eslint, prettier, husky? lint-stage?
• recommeded

• 배포
• vercel

• 노드 버전 맞추기 : nvm
• 18.13

• mock데이터를 사용해볼 수 있는 msw

MSW로 백앤드 API 모킹하기

이번 포스팅에서는 MSW(Mock Service Worker) 라이브러리를 이용하여 백앤드 API를 모킹(mocking)하는 방법에 대해서 알아보겠습니다. MSW(Mock Service Worker)는 서비스 워커(Service Worker)를 사용하여 네트워크 호출을 가로채는 API 모킹(mocking) 라이브러리입니다. 쉽게 말해, 브라우저에 기생(?)해서 마치 백앤드 API인 척하면서 프런트앤드의 요청에 가짜 데이터를 응답해주는 녀석이라고 볼 수 있겠네요.

https://www.daleseo.com/mock-service-worker/

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "plugins": ["react", "@typescript-eslint"],
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ],
  "overrides": [],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "rules": {
    "react/react-in-jsx-scope": "off"
  },
  "ignorePatterns": ["build", "dist", "public"]
}

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: [{ find: '@', replacement: '/src' }],
  },
});