프론트엔드 개발을 진행할 때, 많은 경우 서버 API 개발이 우선시 되어야 하는 경우가 많은 것 같다.
아무래도, 데이터를 받아와 웹 페이지를 구성해야 하는 경우가 많다보니 그런데 API 개발이 선행되지 않았을 때 프론트엔드 개발자는 무엇을 해야할까?
다양한 케이스가 있을 수 있지만, mock(소프트웨어 개발을 위해 사용하는 가짜 객체)을 가지고 API 연결을 하기 전에 미리 페이지를 개발할 수 있다.
이때, mock 객체를 하드코딩하여 사용하면 실제 API 통신 환경과는 다소 동떨어진 개발을 하게 되는데 API 환경을 유사하게 구현하여 mocking 개발을 도와주는 라이브러리가 있다.
👻 axios-mock-adapter
https://www.npmjs.com/package/axios-mock-adapter
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)는 최근 많이 사용되는 모킹 라이브러리이다.
서비스 워커를 사용하는 라이브러리로, 서비스 워커를 사용하기 때문에 브라우저 환경에서 자바스크립트 엔진 스레드가 아닌 브라우저 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 |