MSW (Mocking Service Worker)로 죽은 프로젝트 그나마(?) 언데드로 만들기 (1)

이 글을 작성하는 이유

기존에 진행했던 세종피어 프로젝트를 되살려보려고 했지만 백엔드 팀원들의 개인 사정 때문에 더는 이어 나갈 수 없기도 하고 이전에 존재했던 API 역시 사용할 수 없기에 어떻게 할까 고민을 하다가 마침 올리브영 테크블로그의 글을 읽게 되었습니다.

 

여기서 MSW라는 개념에 대해 알게 되어 한 번 사용해 보고 느낀 점을 기술하고자 글을 작성하게 되었습니다.

또, 사실 해커톤에서나 프로젝트에서나 프론트엔드 개발자는 백엔드 API가 나오기 전에 UI를 완성해 놓으면 시간이 붕 뜨기 마련입니다.

 

앞으로는 이런 일을 방지하고자, API를 Mocking하는 MSW를 사용해 보았습니다.

---

 

다음은 기본적인 페이지 구성 및 UI 구현이지만 이 부분은 생략하고 MSW (Mocking Service Worker)의 동작 원리에 대해 설명해보려고 합니다.

MSW (Mocking Service Worker) 이란?

우선 이 기능에 대해 알게된 것은

블로그 | 올리브영 테크블로그

여기서 글을 읽다가 알게 되었는데, 사실 프론트엔드는 해커톤에서나 프로젝트를 진행하면서나 UI를 구현하고 나면 백엔드 측에서 API를 구현해 주기를 기다리는 경우가 많습니다.

그전에는 왜 몰랐을까요... 진작 알았으면 생산성을 더 늘릴 수 있었을 텐데 말이죠

 

아무튼 본론으로 돌아가서 MSW가 도대체 뭐냐! 라고 묻는다면 간단하게 다음과 같이 말할 수 있습니다.

 

백엔드 없이 API 요청을 가짜(Mock)로 처리하는 라이브러리입니다.
즉, 실제 서버 없이도 네트워크 요청을 가로채고(Mock) 원하는 응답을 반환하는 방식으로 동작합니다.

 

때문에 백엔드 팀원이 API를 만들기 전까지 테스트를 해볼 수 있는 시간이 생기는 것이죠 :)

 

MSW의 동작 방식

그렇다면 MSW의 동작 방식에 대해서도 알아봐야겠죠?

 

✅ 1. 네트워크 요청 가로채기

• MSW는 Service Worker API를 활용해서 fetch, XMLHttpRequest 등의 네트워크 요청을 가로챕니다.
• 클라이언트(React/Next.js 앱)에서 fetch("/api/login") 같은 요청을 보내면, MSW가 이를 감지하고 백엔드 없이 가짜 응답을 반환합니다.

✅ 2. 요청 핸들링

• rest.get() 또는 rest.post() 등을 사용해 어떤 URL 요청이 들어오면 어떻게 응답할지 정의할 수 있습니다.
• 예를 들어, /api/login으로 POST 요청이 오면, 성공 응답 또는 실패 응답을 미리 정해서 반환 가능합니다.

✅ 3. 실제 네트워크 요청을 보내지 않는다

• MSW는 요청을 가로채기 때문에, 실제 백엔드 서버가 없어도 실제 API처럼 동작합니다.
• 이는 테스트 환경이나 프론트엔드 개발 중 백엔드가 완성되지 않은 경우 유용합니다.

---

MSW의 내부 동작 흐름

마지막으로 내부 동작 흐름에 대해 간단히 알아보고 이번 글을 마쳐보려고 합니다.

 

 

1. worker.start()가 실행되면, Service Worker(브라우저 API)가 등록됩니다.
   1. 브라우저 콘솔에 [MSW] Mocking enabled. 같은 메시지가 뜨는 걸 볼 수 있습니다.
2. 사용자가 fetch('/api/register', {...}) 또는 Axios 등으로 /api/register에 요청을 보내면,
   1. 브라우저의 Service Worker가 해당 요청을 가로챕니다.
   2. 어떤 경로/HTTP 메서드인지 분석한 뒤, 등록된 핸들러 중 매칭되는 것을 찾습니다.
3. 만약 rest.post('/api/register', handlerFn)가 등록되어 있다면,
   1. 그 handlerFn(핸들러 함수)이 호출되어, “가짜 로직”(ex: 특정 아이디면 에러, 아니면 성공)을 수행합니다.
   2. 그 결과를 ctx.json(...) 형태로 만들어 응답을 돌려줍니다(이 응답은 response.json()으로 읽을 수 있는 형태).
4. 프론트엔드(React)는 “마치 실제 서버에서 응답이 온 것처럼” 응답을 받습니다.
   1. “성공했네?” → 토스트로 성공 메시지
   2. “에러라네?” → 토스트로 에러 메시지
   3. 이 모든 것이 실제 백엔드 서버가 없어도 동작합니다.
5. 개발이 끝나고 진짜 서버를 붙이는 시점에는,
   1. worker.start()를 프로덕션 빌드에서 제거하거나(NODE_ENV=development 조건)
   2. 뒤에서 진짜 서버 URL로 fetch 하도록 바꿔야 합니다.
   3. 그러면 “MSW가 없는 실제 환경”에서 정상 서버와 통신하게 됩니다.

 

다음 글에서는 실제로