프론트엔드 개발을 진행할 때, 많은 경우 서버 API 개발이 우선시 되어야 하는 경우가 많은 것 같다.
아무래도, 데이터를 받아와 웹 페이지를 구성해야 하는 경우가 많다보니 그런데 API 개발이 선행되지 않았을 때 프론트엔드 개발자는 무엇을 해야할까?
다양한 케이스가 있을 수 있지만, mock(소프트웨어 개발을 위해 사용하는 가짜 객체)을 가지고 API 연결을 하기 전에 미리 페이지를 개발할 수 있다.
이때, mock 객체를 하드코딩하여 사용하면 실제 API 통신 환경과는 다소 동떨어진 개발을 하게 되는데 API 환경을 유사하게 구현하여 mocking 개발을 도와주는 라이브러리가 있다.
👻 axios-mock-adapter
https://www.npmjs.com/package/axios-mock-adapter
axios-mock-adapter
Axios adapter that allows to easily mock requests. Latest version: 1.22.0, last published: 8 months ago. Start using axios-mock-adapter in your project by running `npm i axios-mock-adapter`. There are 462 other projects in the npm registry using axios-mock
www.npmjs.com
axios-mock-adapter는 axios에 연결하여 사용할 수 있는 라이브러리이다.
공식 깃허브에서 제공하는 예제를 살펴보면 다음과 같다.
var axios = require("axios");
var MockAdapter = require("axios-mock-adapter");
// This sets the mock adapter on the default instance
var mock = new MockAdapter(axios);
// Mock any GET request to /users
// arguments for reply are (status, data, headers)
mock.onGet("/users").reply(200, {
users: [{ id: 1, name: "John Smith" }],
});
axios.get("/users").then(function (response) {
console.log(response.data);
});
코드를 살펴보면, axios 객체를 래핑한 mock 객체를 만들어 테스트 환경을 구축한다.
이 경우, 미리 URL path에 따른 mock 데이터 반환값을 설정해두면 axios로 해당 path에 API 호출을 했을 때 mock 데이터를 수신할 수 있다.
mock.onGet("/users").networkError(); // "/users" 경로에 대한 GET 요청 시 네트워크 오류를 시뮬레이션합니다.
mock.onGet("/users").timeout(); // "/users" 경로에 대한 GET 요청 시 타임아웃을 시뮬레이션합니다.
mock.resetHistory(); // 모든 요청 기록을 초기화합니다.
mock.restore(); // 원래 axios 동작으로 복원합니다.
mock.resetHandlers(); // 설정된 모든 모의 핸들러를 제거합니다.
mock.reset(); // 모의 어댑터의 모든 상태를 초기화합니다.
그 외에도 다양한 내장 메서드를 지원하여 테스트를 더 용이하게 해준다.
🎶 MSW
MSW(Mock Service Worker)는 최근 많이 사용되는 모킹 라이브러리이다.
Mock Service Worker
API mocking library for browser and Node.js
mswjs.io
서비스 워커를 사용하는 라이브러리로, 서비스 워커를 사용하기 때문에 브라우저 환경에서 자바스크립트 엔진 스레드가 아닌 브라우저 web api가 api 통신 처리를 하는 것 처럼,
자바스크립트 엔진 스레드가 아닌 서비스 워커 스레드가 mocking API 통신을 처리하게 한다.
이를 통해 실제 네트워크 통신과 유사하게 비동기적으로 요청을 가로채고 응답을 반환할 수 있다.
(msw는 서비스 워커가 fetch 요청을 가로채어 대신 응답하는 방식으로 작동한다)
// src/mocks/handlers.js
import { http, HttpResponse } from 'msw'
export const handlers = [
// Intercept "GET https://example.com/user" requests...
http.get('https://example.com/user', () => {
// ...and respond to them using this JSON response.
return HttpResponse.json({
id: 'c7b3d8e0-5e0b-4b0f-8b3a-3b9f4b3d3b3d',
firstName: 'John',
lastName: 'Maverick',
})
}),
]
공식 문서에서 제공하는 예제를 살펴보면, msw는 handler에 http 응답값을 미리 설정한다.
그리고 브라우저 혹은 노드 환경에서 msw가 작동하도록 설정해야 한다.
노드 환경에서는 모킹 서버를 구축한다.
// src/mocks/node.js
import { setupServer } from 'msw/node'
import { handlers } from './handlers'
export const server = setupServer(...handlers)
그리고 해당 서버를 실행시켜 mocking 서버를 구현할 수 있다.
// src/index.js
import { server } from './mocks/node'
server.listen()
브라우저 환경에서는 worker를 생성한뒤, 서비스 워커가 실행되도록 설정해둔다.
// src/mocks/browser.js
import { setupWorker } from 'msw/browser'
import { handlers } from './handlers'
export const worker = setupWorker(...handlers)
React를 사용할 때 다음과 같이 서비스워커가 실행되도록 코드를 작성해준다.
// src/index.jsx
import React from 'react'
import ReactDOM from 'react-dom'
import { App } from './App'
async function enableMocking() {
if (process.env.NODE_ENV !== 'development') {
return
}
const { worker } = await import('./mocks/browser')
// `worker.start()` returns a Promise that resolves
// once the Service Worker is up and ready to intercept requests.
return worker.start()
}
enableMocking().then(() => {
ReactDOM.render(<App />, rootElement)
})
혹은, useEffect를 사용하여 서비스 워커가 실행되도록 설정한다.
msw를 사용하면, 실제 네트워크 환경. 특히 서비스 워커를 사용하여 다른 스레드에서 API 요청이 처리되는 테스팅 환경을 구현할 수 있기 때문에 실제와 가장 비슷하게 mocking할 수 있는 장점이 있다.
'기타' 카테고리의 다른 글
웹 성능 최적화를 위한 Critical CSS with 예제 (0) | 2024.05.01 |
---|---|
Etag를 활용한 브라우저 리소스 캐싱 (0) | 2024.04.15 |
har 파일 생성 및 뷰어로 확인하기 (0) | 2023.11.19 |
HTML tabindex로 키보드 탭 선택순서 조정하기 (0) | 2023.11.03 |
HTML 작성 시 안티패턴들 (0) | 2023.10.09 |