서비스워커로 fetch를 감지해서 respondWith로 응답을 직접 주는¹ 방식으로 mock 을 구현한다는 내용. 개인적으로는 mock은 간단하게 구현 가능할 것 같은데 이미 같은 기능의 잘 만들어진 라이브러리들이 있으니까 아이디어 정도로 생각하면 될 것 같다.

addEventListener('fetch', e => { 
  // e.request
  // e.respondWith
})

• How To Run a Proxy Server Inside Your Browser | by Danny Moerkerke | Better Programming
• MSW – Seamless API mocking library for browser and Node | Mock Service Worker

서비스워커는 브라우저에서 나가는 요청만 본다². SSR(getServerSideProps)처럼 서버에서 나가는 요청은 Node 쪽에서 가로챈다.

• Mock Network When Using Next.js getServerSideProps Call | Gleb Bahmutov
• nock

---

Footnotes

1. FetchEvent.respondWith() | MDN: “prevents the browser’s default fetch handling, and allows you to provide a promise for a Response yourself.” ↩

2. Service Worker API | MDN: “Service workers essentially act as proxy servers that sit between web applications, the browser, and the network (when available).” ↩