[FE] MSW(Mock Service Worker)로 프론트 개발 시간 단축하기!

 

개요

출처 : https://tech.kakao.com/2021/09/29/mocking-fe/

 

프로젝트를 하면, 항상 프론트만 플젝 제일 마지막 순간까지 개발을 하고 있다..

기획, 디자인이 완료되면 백엔드가 먼저 개발을 시작하고, API 개발이 끝난 뒤 프론트엔드 개발이 들어가면 좋겠지만, 현실은 백엔드와 프론트엔드가 동시에 시작하는 게 대부분이다.

 

그래서 프론트에서는 백엔드가 준 API 명세서를 보고 Mock Data를 만들어서 데이터를 띄울 준비를 해놓는다. 하지만 이런 식으로 하면, API 개발이 끝난 뒤, 또 마지막까지 외롭게 개발을 해야한다..ㅠㅠ

 

이번에 방학 UMC 프로젝트를 시작하면서 프론트엔드에서 MSW를 사용해보자는 얘기가 나왔다. MSW만 제대로 구축해놓으면, API 연결을 미리 해놓는 것과 똑같아서 나중에 또 개발을 하지 않아도 된다고 한다. 이번 플젝에서는 백엔드보다 개발을 더 빨리 끝내보자~><

 

1.  MSW(Mock Service Worker)란?

MSW란 API Mocking 라이브러리로, Service Worker를 사용해서 서버 요청을 중간에서 가로채서 mock response를 돌려준다. 

출처 : https://tech.kakao.com/2021/09/29/mocking-fe/

 

Service Worker는 네트워크 사이의 프록시 서버 역할을 해주는데, 네트워크 요청을 가로채서 네트워크 사용 가능 여부에 따라 적절한 행동을 취하고, 서버 데이터를 업데이트할 수 있다.

 

 

위와 같이 기본 세팅을 해주고, API 명세서를 보면서 mockData랑 엔드포인트를 설정해주고, API 요청을 해주면 된다. 

 

MSW를 사용했을 떄의 장점은 아래와 같다.

1. mock data, mock server를 따로 만들고, 구축하지 않아도 된다.

2. 추후 API 연결 과정이 생략된다.

 

2.  Install

npm install msw --save-dev

 

3. 사용법

저희 리포지토리를 참고하세요~ㅎㅎ

https://github.com/Here-You/FrontEnd

GitHub - Here-You/FrontEnd: 여행의 이유 FE

1. constants/path.js에서 API_PATH 추가

const API_PATH = {
  FAVORITE_TRAVELS: `${BASE_PATH.TRAVELS}/favorite`,
  SIGNATURE_PREVIEW: `${BASE_PATH.SIGNATURE}/preview`,
};

 

 

2. api/request 가서 파일 만들고 아까 만든 경로 넣어주기

import { axios, axiosWithToken } from '../api';
import { API_PATH } from '@/constants/path';

// 토큰이 필요없는 경우 axios를 쓰면됩니다.
const getSignaturePreview = () => {
  return axios.get(API_PATH.SIGNATURE_PREVIEW);
};

// 토큰이 필요한 경우 axios대신, axiosWithToken을 사용하면 됩니다.

export { getSignaturePreview };

 

3. handler 만들어서 mockData 넣어주기

import { HttpResponse, http } from 'msw';

import { baseURL } from '@/apis/api';
import { API_PATH } from '@/constants/path';

export const PreveiewHandlers = [
  http.get(`${baseURL}${API_PATH.SIGNATURE_PREVIEW}`, (req, res, ctx) => {
    const previewData = [
      {
        id: 1,
        userImgUrl: '<https://i.ibb.co/JdGMYqf/Group-1000000912.png>',
        date: '23 / 10 / 11',
        previewUrl:
          '<https://i.ibb.co/D1bwz3j/Kakao-Talk-20231203-204945606.png>" alt="Kakao-Talk-20231203-204945606',
        title: '우리 동글이와 함꼐한, 강릉 1박 2일',
        heart: 3012,
      },
      {
        id: 2,
        userImgUrl: '<https://i.ibb.co/JdGMYqf/Group-1000000912.png>',
        date: '23 / 10 / 11',
        previewUrl:
          '<https://i.ibb.co/D1bwz3j/Kakao-Talk-20231203-204945606.png>" alt="Kakao-Talk-20231203-204945606',
        title: '우리 동글이와 함꼐한, 강릉 1박 2일',
        heart: 3012,
      },
      {
        id: 3,
        userImgUrl: '<https://i.ibb.co/JdGMYqf/Group-1000000912.png>',
        date: '23 / 10 / 11',
        previewUrl:
          '<https://i.ibb.co/D1bwz3j/Kakao-Talk-20231203-204945606.png>" alt="Kakao-Talk-20231203-204945606',
        title: '우리 동글이와 함꼐한, 강릉 1박 2일',
        heart: 3012,
      },
      {
        id: 4,
        userImgUrl: '<https://i.ibb.co/JdGMYqf/Group-1000000912.png>',
        date: '23 / 10 / 11',
        previewUrl:
          '<https://i.ibb.co/D1bwz3j/Kakao-Talk-20231203-204945606.png>" alt="Kakao-Talk-20231203-204945606',
        title: '우리 동글이와 함꼐한, 강릉 1박 2일',
        heart: 3012,
      },
    ];
    return HttpResponse.json(previewData);
  }),
];

 

4. mocks>index.js 에서 아까 만든 핸들러 import 해주고 뒤에 스프레드 연산자로 이어주기

import { PreveiewHandlers } from './previewHandler';
import { travelHandlers } from './travel-place';

export const handlers = [...travelHandlers, ...PreveiewHandlers];

 

< 데이터 가져오기 >

사용할 컴포넌트 가서 만든 api/request import 해주고 데이터 쓰면 됨

import { getSignaturePreview } from '@/apis/request/preview';

const [data, setData] = useState([]);
  const getData = async () => {
    try {
      const res = await getSignaturePreview();
      const mockData = res.data;
      setData(mockData);
      console.log(data);
    } catch (e) {
      console.log(e);
    }
  };

  useEffect(() => {
    getData();
  }, []);

 

EX)

import React, { useEffect, useState } from 'react';
import styled from 'styled-components';

import SignaturePreview from '../components/SignaturePreview';
import { getSignaturePreview } from '@/apis/request/preview';

export default function MySignature() {
  const [data, setData] = useState([]);
  const getData = async () => {
    try {
      const res = await getSignaturePreview();
      const mockData = res.data;
      setData(mockData);
      console.log(data);
    } catch (e) {
      console.log(e);
    }
  };

  useEffect(() => {
    getData();
  }, []);

  return (
    <Wrap>
      <SignaturePreview {...data[0]} />
      <SignaturePreview {...data[1]} />
    </Wrap>
  );
}

const Wrap = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
`;

https://tech.kakao.com/2021/09/29/mocking-fe/

Mocking으로 생산성까지 챙기는 FE 개발

 

https://velog.io/@khy226/msw%EB%A1%9C-%EB%AA%A8%EC%9D%98-%EC%84%9C%EB%B2%84-%EB%A7%8C%EB%93%A4%EA%B8%B0

MSW(Mock Service Worker)로 더욱 생산적인 FE 개발하기