📚 Part 13 리뷰

---

📁 모킹 서버 작성 (MSW)

프론트엔드 환경에서 두루 사용할 수 있는 라이브러리. Moking response를 사용할 것임.
모킹 : 실제로 존재하지 않는 것을 가상으로 존재하도록 만들어서 응답을 받는...
실제로 백엔드에 존재하지 않는 node 서버를 가상으로 띄워서 실제로 API 응답을 모킹함

📌 MSW

1. Mock Service Worker
2. 존재하지 않는 API에 대한 응답을 모킹 (실제로 백엔드에 존재하지 않는 API에 대한 응답)
3. service worker에서 요청을 처리
4. chrome 기준 devTool의 Application/Service workers의 "Bypass for network"로 일시 정지

MSW를 사용하는 이유 : 프로젝트에서 기존의 백엔드 과정에서 작성한 모든 API에 대한 응답을 다 처리함 > 여기서 더 나아가기 위해

📌 리뷰 추가

npm i msw --save-dev
npx msw init public/ --save

위 명령어를 터미널에 작성하여 설치함.

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

async function mountApp() {
  if (process.env.NODE_ENV === "development") {
    const { worker } = require('./mock/browser');
    await worker.start(); // MSW 시작 
  }

  const root = ReactDOM.createRoot(
    document.getElementById('root') as HTMLElement
  );
  
  root.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );
}

mountApp();

개발 환경에서 모킹 서비스 워커 추가함. 개발 모드에서만 모킹 서비스 워커를 로드하도록 process.env.NODE_ENV 조건 추가. 이 변경 사항은 개발 중에만 모킹 API를 사용하여 제어된 테스트 환경을 제공함. 개발 환경에서 MSW(worker) 비동기 시작을 위한 앱 마운트 로직 작성.

import { setupWorker } from "msw/browser";
import { reviewsById } from "./review";

const handlers = [reviewsById];

export const worker = setupWorker(...handlers);

모킹 서비스 워커 설정 파일 추가

📌 더미 데이터 생성

faker(더미 데이터를 생성해주는 역할)을 이용하여 더미 데이터를 생성할 것임.

npm install @faker-js/faker --save-dev

위의 명령어를 사용하여 설치해줌.

import { BookReviewItem } from "@/models/book.model";
import { http, HttpResponse } from "msw";
import { fakerKO as faker } from "@faker-js/faker";

const mockReviewData: BookReviewItem[] = Array.from({length: 8}).map((_, index) => ({
    id: index,
    userName: `${faker.person.lastName()}${faker.person.firstName()}`,
    content: faker.lorem.paragraph(),
    createdAt: faker.date.past().toISOString(),
    score: faker.helpers.rangeToNumber({min: 1, max: 5})
}));

export const reviewsById = http.get("http://localhost:6250/reviews/:bookId", () => {
    return HttpResponse.json (mockReviewData, {
        status: 200
    });
});

📌 리뷰 목록

📌 리뷰 작성