프론트 개발 Mock Data 활용

Mocking 활용

웹 개발 프로젝트 진행시 백엔드 개발 완료 하기전에 프론트에서 Mock Data를 생성하여 프론트엔드 개발을 진행하도록 사용

활용시 장점으로는 백엔드 API 개발 진행하기 전에 데이터의 형식 및 연동규격서를 공유하게 되면 웹 개발 프로젝트 진행시 

프론트엔드 개발과 백엔드 개발 병행이 가능

Mock Data란?

Mock Data란 실제 API에서 받아오는 데이터가 아닌 프론트엔드 개발자의 필요로 의해서 샘플로 만든 샘플데이터

기존 Mocking 방법

프론트엔드에서 필요한 Mock Data를 내부 로직에서 저장하고 직접 Mocking하여 필요한 화면에서 붙이는 방식을 사용

하지만 이러한 방식은 구현이 쉽고 빠르게 적용이 가능하지만 서비스 로직에서 직접 Mocking 하는 방식으로

서비스를 적용하기전에 서비스 로직을 수정하여 반영해야 하는 불편함이 있음 (불필요한 코드를 삭제 확인)

ex)

public 폴더> data 폴더에 json의 Mock Data를 생성

서비스 로직에서 fetch() 함수를 사용하여 API 주소와 가져올 방식으로 호출하여 then() 함수에서 Response 데이터를 설정가능

https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch

 

MSW(Mock Service Worker) 라이브러리를 이용한 Mocking 방법

MSW는 서비스 워커(Service Worker)를 사용하여 네트워크 요청을 가로채서 Mock Data를 보내주는 Mocking Library

Mock 서버를 따로 구축하지 않고 API를 Mocking 가능함

장점으로는 웹 어플리케이션의 서비스 로직에 Mocking 코드가 필요없으며 백엔드 API 개발이 완료되면 MSW의 handler만 삭제하면 됨

https://mswjs.io/

 

Service Worker란?

웹 어플리케이션의 메인 스레드와 별도로 분리되어 백그라운드 스레드에서 실행가능한 서비스

IE와 같은 일부의 브라우저에서는 지원되지 않으며 로컬 환경이 아니라면 HTTS 보안 프로토콜 환경이 필요

 

MSW 라이브러리 설치 (react 기반)

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

Servcie Worker 코드 생성

src폴더에 mocks폴더를 생성하고 browser.js파일을 생성한다.

$ mkdir src/mocks
$ touch src/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)

public 폴더에 Service Worker를 위한 JS 생성

$ npx msw init public/ --save

public 폴더에 mockServcieWorker.js 파일 생성되며 package.json에 워킹 디렉토리 추가됨

 

index.js파일에 MSW 설정추가

/** src/index.js */
import React from 'react';
import ReactDOM from 'react-dom';

import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

/** 개발환경이 development 경우에 mocks 폴더에 worker를 실행 (일반 API호출할 경우 주석처리) */
if (process.env.NODE_ENV === 'development') {
  const { worker } = require('./mocks/browser')
  worker.start()
}

ReactDOM.render(<App />, document.getElementById('root'));

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();