🚀 React 개발에서 모킹 서버 사용하기

프론트엔드 개발을 하다 보면 실제 백엔드 API가 완성되기 전에 화면을 개발하거나,
다양한 서버 응답을 테스트해야 하는 상황이 발생한다.

이때 필요한 것이 바로 모킹 서버다.

모킹 서버를 이용하면 실제 API가 없어도 프론트엔드 개발을 계속 진행할 수 있다.

---

🧐 모킹 서버란 무엇인가

모킹(Mock)은 '흉내 내다'라는 의미를 가진다.

모킹 서버는 실제 서버가 제공해야 하는 API를 임시로 구현하여,
개발자가 요청을 보내면 가짜 응답을 돌려주는 서버다.

이를 통해 서버 개발이 끝나지 않았거나 테스트용 데이터가 필요한 경우에도
프론트엔드 개발을 진행할 수 있다.

모킹 서버는 다음과 같은 상황에서 유용하다.

• 백엔드가 아직 준비되지 않은 경우
• 에러 응답, 예외 상황을 테스트하고 싶은 경우
• 특정 조건 하에서 서버 응답을 조작하고 싶은 경우
• 외부 API에 과도하게 의존하고 싶지 않은 경우

---

⚙️ React에서 모킹 서버를 사용하는 방법

React 프로젝트에서 모킹 서버를 사용하려면 여러 가지 방법이 있다.
대표적으로 다음과 같은 라이브러리가 있다.

• MSW(Mock Service Worker)
• json-server
• Mirage JS

각각 장단점이 있지만, 최근에는 MSW를 많이 사용하는 추세다.

MSW는 Service Worker를 이용해 네트워크 요청을 가로채기 때문에,
실제 브라우저 환경과 가장 유사하게 테스트할 수 있다.

🔧 MSW 설치 및 설정 방법

1. 설치하기

   npm install msw --save-dev

2. 핸들러 작성하기

   // src/mocks/handlers.js
   import { rest } from 'msw'
   
   export const handlers = [
     rest.get('/api/user', (req, res, ctx) => {
       return res(
         ctx.status(200),
         ctx.json({
           id: 1,
           username: 'mock_user',
         })
       )
     }),
   ]

3. Service Worker 설정하기

   // src/mocks/browser.js
   import { setupWorker } from 'msw'
   import { handlers } from './handlers'
   
   export const worker = setupWorker(...handlers)

4. 앱에서 워커 실행하기

   // src/index.js
   import React from 'react'
   import ReactDOM from 'react-dom'
   import App from './App'
   
   if (process.env.NODE_ENV === 'development') {
     const { worker } = require('./mocks/browser')
     worker.start()
   }
   
   ReactDOM.render(<App />, document.getElementById('root'))

개발 환경에서만 모킹 서버가 작동하도록 NODE_ENV 조건을 걸어주는 것이 중요하다.

🛠️ json-server 간단 사용법

json-server는 로컬에서 빠르게 REST API 서버를 만들어주는 툴이다.

1. 설치하기

   npm install -g json-server

2. db.json 파일 만들기

   {
     "users": [
       { "id": 1, "name": "John" },
       { "id": 2, "name": "Jane" }
     ]
   }

3. 서버 실행하기

   json-server --watch db.json --port 4000

이제 http://localhost:4000/users로 접근할 수 있다.

json-server는 매우 간단하지만, 복잡한 비즈니스 로직이나 다양한 에러 케이스를 다루기에는 한계가 있다.

---

⚠️ 모킹 서버를 사용할 때 주의할 점

• 실제 API 스펙과 항상 일치하는지 확인해야 한다.
  시간이 지나면서 백엔드 API 스펙이 변경될 수 있으므로, 모킹 서버도 꾸준히 업데이트해야 한다.

• 모킹 데이터와 실제 데이터 간 차이에 주의해야 한다.
  실제 환경에서 발생할 수 있는 예외 상황들을 미리 모킹 데이터로 준비해두는 것이 좋다.

• 배포 시 모킹 서버가 끄도록 설정해야 한다.
  모킹 서버는 개발 환경에서만 사용하고, 실제 서비스에서는 반드시 비활성화되어야 한다.

---

🔨 TIL

• 모킹 서버는 개발 생산성을 크게 향상시킨다.
• MSW는 네트워크를 실제처럼 흉내 내서 테스트 신뢰도를 높일 수 있다.
• 모킹 서버와 실제 서버 스펙의 동기화가 매우 중요하다.
• 개발 편의성은 높지만, 항상 실제 데이터와 환경을 염두에 두고 개발해야 한다.