[ 🌈 Notice ] MSW 사용법

[Happhee]

✨ Mocks Service Worker

MSW는 Mock Service Worker로 서비스 워커를 이용하여 API를 모킹하는 라이브러리이다.
네트워크 요청을 가로채도록 설계된 Service Worker API를 활용하기 때문에 목 사용 여부 관계 없이 동일한 애플리케이션 동작을 보장한다.
또한, 모킹을 위해 애플리케이션 코드를 변경할 필요가 없다는 것이 가장 큰 장점이다❗️

TypeScript + MSW

서버 API가 만들어지기 전에 테스트를 위한 API 라이브러리를 사용하였습니다 ✨

✅ 폴더 및 파일 설명

• types 👉 플레이어, 메이커 기능을 구현하기 위해 필요한 타입들을 정의해놓은 폴더 , mocks에서 사용됩니다!
• mocks 👉 데이터, API 통신 핸들러 , browers에 제공, server 핸들러 를 모아둔 폴더

📁 mocks/data

• mocking 할 데이터 만들어 놓은 폴더 입니다.

📁 mocks/handlers

• 가짜 API를 구현하려면 요청이 들어왔을 때 임의의 응답을 해주는 핸들러(handler) 코드를 작성한 폴더입니다

📄 mocks/browsers.ts (브라우저 환경) or server.ts (노드 환경)

• setupWorker() 함수를 사용해서 서비스 워커를 생성한다.
• handlers에서 작성한 요청 핸들러 코드를 불러와서 그대로 setupWorker() 함수의 인자로 넘겨준다.

✨ MSW 실행하기

_app.tsx에 하단의 코드를 실행하여 mocking을 활성화한다.

if (process.env.NODE_ENV === 'development') {
  worker.start();
}

👇 yarn start 로 실행하면 Devtools > Console에 Mocking enabled가 나타난다.

---

✅ 사용법

👇 mocks/handlers/voting.ts

 import { rest } from 'msw';

import { votingData } from '../data/votingData';
// 서버 연결전 임시 get 통신 생성
export const getVoting = rest.get('/vote', (req, res, ctx) => {
  const search_vote_id = Number(req.url.searchParams.get('vote_id'));
  const voting_list = votingData.filter(({ vote_id }) => search_vote_id === vote_id);
  return res(ctx.json(voting_list[0]));
});

👇 lib/hooks/voting.ts

import { AxiosResponse } from 'axios';
import useSWR from 'swr';

import { client } from '../axios';
import { VotingInfo } from './../../types/voting';

// useSWR을 사용한 커스텀 훅 생성
export const useGetVotingInfo = (vote_id: number) => {
 // 데이터 타입까지 사용자 지정
  const { data, error } = useSWR<AxiosResponse<VotingInfo>>(`/vote?vote_id=${vote_id}`, client.get, {
    // 실패시 재요청 3번
    errorRetryCount: 3,
  });
  return {
    votingInfo: data,
    isLoading: !error && !data,
    isError: error,
  };
};

❤️‍🔥❤️‍🔥 커스텀 훅이랑 lib/api안에서 만드는 서버 통신 구조가 다르니 확인부탁드려요 ❤️‍🔥❤️‍🔥

👇 pages/Voting.tsx

import React, { useEffect } from 'react';
import { useRecoilState } from 'recoil';

import { Error, Loading } from '../components/common';
import { Header } from '../components/Voting';
import { useGetVotingInfo } from '../lib/hooks/voting';
import { votingStateSelector } from '../recoil/player/selector';

const Voting = () => {
// 커스텀훅으로 투표 정보를 가져오고, 이를 클라이언트의 전역상태로 넘겨주기 
  const { votingInfo, isLoading, isError } = useGetVotingInfo(1);
  const [newVotingInfo, setNewVotingInfo] = useRecoilState(votingStateSelector);
  useEffect(() => {
    if (votingInfo) {
      setNewVotingInfo(votingInfo.data);
    }
  }, []);
// 데이터 반환에 따른 컴포넌트 렌더링 
  if (isLoading) return <Loading />;
  if (isError) return <Error />;

  return (
    <div>
      <p>{newVotingInfo.vote_title}</p>
      <Header />
    </div>
  );
};
export default Voting;

---

🌼 저는 언제나 대기 중이니 모르는 부분이나 궁금한 부분이 있다면 언제든지 서히를 불러주세요 🌼