리액트에서 MSW(Mock Service Worker)를 활용한 API 모킹 전략

F-Lab : 상위 1% 개발자들의 멘토링

2024-03-19

AI가 제공하는 얕고 넓은 지식을 위한 짤막한 글입니다!

API 모킹의 중요성

현대 웹 개발에서 API 모킹은 개발 초기 단계에서 백엔드 서비스가 준비되지 않았을 때, 혹은 통합 테스트를 수행할 때 매우 중요한 역할을 합니다.

왜냐하면 API 모킹을 통해 실제 백엔드 서비스 없이도 프론트엔드 애플리케이션의 동작을 시뮬레이션할 수 있기 때문입니다.

이는 개발 속도를 높이고, 백엔드와의 통합 부분에서 발생할 수 있는 문제를 사전에 발견하고 해결하는 데 도움을 줍니다.

리액트 애플리케이션에서는 MSW(Mock Service Worker)를 사용하여 API 모킹을 쉽게 구현할 수 있습니다.

이 글에서는 리액트에서 MSW를 활용한 API 모킹 전략에 대해 소개하겠습니다.

MSW(Mock Service Worker) 소개

MSW는 브라우저와 Node.js 환경에서 네트워크 요청을 가로채고 모킹할 수 있는 라이브러리입니다.

왜냐하면 MSW는 Service Worker API를 사용하여 실제 네트워크 요청을 가로채고, 개발자가 정의한 응답으로 대체하기 때문입니다.

이를 통해 실제 백엔드 서버 없이도 API 요청과 응답을 시뮬레이션할 수 있습니다.

MSW는 설정이 간단하고, 실제 서버와 유사한 환경을 제공하기 때문에 개발자들 사이에서 인기가 높습니다.

다음은 MSW를 설치하고 기본적인 설정을 하는 방법입니다.

npm install msw

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

export const handlers = [
    rest.get('/user', (req, res, ctx) => {
        return res(
            ctx.status(200),
            ctx.json({ username: 'admin' })
        )
    }),
]

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

export const worker = setupWorker(...handlers)

리액트에서 MSW 활용하기

리액트 애플리케이션에서 MSW를 활용하기 위해서는 먼저 MSW를 설치하고, 요청 핸들러를 정의해야 합니다.

왜냐하면 요청 핸들러는 실제 API 요청을 모킹할 때 어떤 응답을 반환할지 결정하기 때문입니다.

이후, 애플리케이션의 진입점에서 MSW를 초기화하여 네트워크 요청을 가로챌 수 있도록 설정합니다.

MSW는 개발 모드에서만 활성화되도록 설정하는 것이 일반적입니다.

다음은 리액트 애플리케이션에서 MSW를 활용하는 예시입니다.

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import { worker } from './mocks/browser'

if (process.env.NODE_ENV === 'development') {
    worker.start()
}

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