서비스 워커로 네트워크 요청 가로채 Mock Response 구현하기

서비스 워커는 브라우저와 네트워크 사이에 위치하여 요청을 가로채고 리소스를 캐싱할 수 있는 스크립트다. 이 글은 서비스 워커의 생명주기와 이벤트 기반 구조를 설명하고, 이를 활용해 Mock Response를 생성하는 방법을 다룬다.

서비스 워커와 통신 채널

서비스 워커는 페이지와 독립적으로 실행되므로 직접 통신이 불가능하다. 이를 해결하기 위해 MessageChannel 객체를 사용하여 양방향 통신 채널을 만든다. port1과 port2를 통해 서비스 워커와 웹 앱 간에 메시지를 주고받을 수 있으며, 이는 종이컵 전화기 원리와 유사하다.

Mock Response 구현 로직

네트워크 요청을 가로채 가짜 응답을 내려주는 과정은 다음과 같다.

• 웹 앱이 fetch 요청을 보내면 서비스 워커가 fetch 이벤트를 수신한다.
• 서비스 워커는 MessageChannel을 통해 원본 요청 정보를 웹 앱으로 전달한다.
• 웹 앱은 정의된 핸들러(handlers.js)를 참조하여 매칭되는 URL이 있으면 Mock 응답 데이터를 생성한다.
• 생성된 응답은 채널을 통해 서비스 워커로 반환되며, 서비스 워커는 이를 원본 요청의 응답으로 대체한다.

활용 및 확장

이 방식은 개발 단계에서 백엔드 API 없이 프론트엔드를 테스트하거나, 특정 네트워크 오류 상황을 시뮬레이션하는 데 유용하다. 핸들러 객체를 동적으로 수정하거나 로컬 스토리지와 연동하면 앱 실행 중에도 응답을 유연하게 조절할 수 있다.