[react web] mocking 모킹 방법 (msw로 데이터 가져오기)

 react 모킹 방법을 검색해보면, 블로그들은 크게 2가지 특징을 가진다. 너무 설명이 없거나, 너무 설명이 많다. 그래서 hanpy는 쉽고 간단하게 설명을 적어보려한다. nodejs에 관한 기본 셋팅이나 개념은 아래의 url로 대체한다.

 

[Web/nodejs] - nodejs 기초 총 정리

 

---

 

https://mswjs.io/

Mock Service Worker

 

모킹을 위해 msw 라이브러리를 사용할 것이다. 위는 공식문서다. 핵심은 front단에서 API를 보낼 곳이 없는 경우, 가상으로 데이터를 불러올 수 있는 곳을 만들어 준 것이다. 간단히 사용법을 적어보겠다.

 

npx create-react-app test

 

 

헷갈림 방지를 위해 app을 하나 처음 만들어서 시작한다. 위 사진을 보면 알 수 있듯 딱 처음 시작했다. 혹여나 서버 시작방법은 아래의 블로그를 보자.

 

[Web/React] - [react web] 시작하기

 

1. msw

1.1 설치

공식문서를 참고해서 둘 중 하나를 설치하자.

$ npm install msw --save-dev
# or
$ yarn add msw --dev

 

필자는 npm으로 설치를 했다. 

--save-dev : 이 부분의 의미는 개발단계에서만 라이브러리를 사용한다는 의미이다. 당연히 가상 API를 만드는 것이기 때문에 실제 서비스 시에는 msw가 필요가 없다. 설치를 하고 package.json에들어가서 확인해보자.

 

 

 

이런식으로 devDependencies에 msw가 포함되어 있는 것을 확인 할 수 있다. (개발 모드에서만 사용한다는 말이다.)

 

 

위 내용이 헷갈리면 그냥 npm install msw로 설치하자. 

 

 

1.2 적용 및 설정

src 밑에 mocks 파일을 만들고 mocks 안에 browser.js를 넣어준다.

 

 

browser.js 안에는 아래의 코드를 넣어준다.

 

// src/mocks/browser.js
import { setupWorker } from 'msw'
import { handlers } from './handlers'
// This configures a Service Worker with the given request handlers.
export const worker = setupWorker(...handlers)

 

 

이제 cmd창에 다음 명령어를 처준다.

 

$ npx msw init public/ --save

 

 

그러면 아래와 같이 public 폴더에 mockServiceWorker.js 파일이 생긴 것을 알 수 있다. 내부 내용은 해석할 필요없다.

 

 

 

그러면 package.json에 워킹디렉토리가 자동 추가된 것도 확인 가능하다.

 

 

 

index.js설정

 

위의 내용과 같이 아래의 코드를 index.js에 추가해 준다.

 

if (process.env.NODE_ENV === 'development') {
  const { worker } = require('./mocks/browser')
  worker.start()
}

 

개발환경인 경우에는 mocks 내부의 browser에서 worker를 가져와서 실행한다는 말이다. 쉽게말해서, mock를 사용하지 않고 일반적인 API을 사용하려면 위의 3줄만 지우면 mock가 작동하지 않는다.

 

 

mocks폴더에 handlers.js 파일을 만든다. 아래와 같이 우리는 총 2개의 파일을 만들었다.

 

 

 

handlers.js 안에는 아래의 코드를 넣어준다. 이 부분이 가짜 데이터를 넣어주는 곳이다. 아래의 실습을 참고하자.

 

// src/mocks/handlers.js
import { rest } from 'msw'
export const handlers = [
  // Handles a POST /login request
  rest.post('/login', null),
  // Handles a GET /user request
  rest.get('/user', null),
]

 

 

여기까지가 설정이다.

 

react 서버를 열고 콘솔을 확인해 보자. 아래와 같이 빨강 글씨로 Mocking enabled 라고 적혀 있다면, 설정을 성공한 것이다!!!!!!!!!

 

 

 

 

여기까지가 setting 까지다. 

---

2. 실습

 mock를 사용하는 핵심은 데이터를 백엔드에서 가져올 때, 백엔드가 없어도 원하는 데이터를 주게 만드는 것이다. 실제 가져온 것처럼 보이면된다. 따라서 실제 API를 통해 데이터를 확인 한 후에, mock를 적용해서 같은 url을 내가 원하는 데이터를 가져오도록 만들어 보자.

 

2.1 존재하는 데이터 API 가져오기

 

https://jsonplaceholder.typicode.com/users

 

위의 방식을 get 방식으로 가지고 오면 아래와 같은 더미 데이터 들을 불러온다.

 

 

 

component를 하나 만들어 아래와 같은 코드를 넣었다. 관련 설명은 아래의 링크를 참고하자.

[Web/React] - [react web] 컴포넌트 만들기

[Web/React] - [react web] Hook 기초_useState

 

 

 

import React, {useState} from 'react'

const MockingTest = () => {
    const [studyData, setStudyData] = useState(null);

    const handleClick3 = () => {
        fetch("https://jsonplaceholder.typicode.com/users")
            .then((response) => {
                return response.json()
            })
            .then((json) => {
                setStudyData(json);
            })
            .catch((error) => {
                setError(`Something Wrong: ${error}`);
            })
    }

    return (
        <div>
            <button onClick={handleClick3}> study 데이터 가져오기</button>
            {studyData && (
                <ul>
                    {studyData.map((data) => (
                        <p>
                            {data.name} : {data.email}
                        </p>
                            
                    ))}
                </ul>
            )}
        </div>
    )
}

export default MockingTest;

 

 

서버를 실행하고 버튼을 누른 후 결과 같을 보면, 아래와 같다.

 

 

이쁘게 url에서 api를 잘 받아 온것을 알 수 있다.

 

 

 

2.2 msw로 가짜 데이터 가져오기

위에서 작성한 코드가 변경되는 부분은 없다. 변경한 부분은 handle.js부분만 변경한다.

 

// src/mocks/handlers.js
import { rest } from 'msw'

export const handlers = [
    rest.get('https://jsonplaceholder.typicode.com/users', async(req, res, ctx) => {
        return res(
            ctx.json([
                {
                    id: 1,
                    name: "hanpy",
                    username: "King",
                    email: "hanpy@gmail.com",
                    address: {
                        street: "Kulas Light",
                        suite: "Apt. 556",
                        city: "Gwenborough",
                        zipcode: "92998-3874",
                        geo: {
                            lat: "-37.3159",
                            lng: "81.1496"
                        }
                    },
                    phone: "1-770-736-8031 x56442",
                    website: "hildegard.org",
                    company: {
                        name: "Romaguera-Crona",
                        catchPhrase: "Multi-layered client-server neural-net",
                        bs: "harness real-time e-markets"
                    }
                },
                {
                    id: 2,
                    name: "Ervin Howell",
                    username: "Antonette",
                    email: "Shanna@melissa.tv",
                    address: {
                        street: "Victor Plains",
                        suite: "Suite 879",
                        city: "Wisokyburgh",
                        zipcode: "90566-7771",
                        geo: {
                            lat: "-43.9509",
                            lng: "-34.4618"
                        }
                    },
                    phone: "010-692-6593 x09125",
                    website: "anastasia.net",
                    company: {
                        name: "Deckow-Crist",
                        catchPhrase: "Proactive didactic contingency",
                        bs: "synergize scalable supply-chains"
                    }
                },
                ])
                )
            })]

 

포인트를 캡쳐해서 보면 아래와 같다.

 

 

1번 체크 부분 : 서버로 보내지 않을 url을 적는다. 그러면, get 방식으로 위의 url로 요청하는 모든 API는 아래에 적은 데이터를 받는다.

2번, 3번 체크 부분 : 임의로 바꾼부분을 UI로 보여줄 부분이다. 다른 코드는 변경없이 handle.js만 변경한 상태로 서버를 실행해서 버튼을 클릭해보겠다.

 

 

다음과 같이 원하는 데이터가 잘 나오는 것을 확인 할 수 있다.

 

 

 

추가로 참고 할만한 url은 아래와 같다.

 

[Web/React] - [react web] context API - props 대체하기

[Web/React] - [react web] 상태 관리 기초 정리

[Web/React] - [React Web] AWS EC2 배포 ALL-IN-ONE

[Web/JAVASCRIPT] - [nodejs/express] 프로젝트 시작 총정리

[Web/JAVASCRIPT] - [nodejs/expess] backend에 session 붙여 login하기

[Web/JAVASCRIPT] - [nodeJS] AWS EC2 배포 ALL-IN-ONE