서비스 워커에 대해 알아보고 Mock Response 만들기

간단 소개

서비스 워커의 개념, 생명주기, 페이지와의 통신 방법을 알아보고, 이를 활용하여 네트워크 호출을 가로채 Mock Response를 만드는 방법을 설명합니다.

AI Summary

서비스 워커 소개
- 서비스 워커는 특정 출처의 페이지를 제어하는 이벤트 기반 워커이며, JavaScript로 작성됩니다.
- 네트워크 요청을 가로채 수정하거나, 리소스를 캐싱할 수 있습니다.
- 브라우저와 네트워크 사이의 계층에 위치하여 독립적인 연결을 가집니다.
서비스 워커 생명주기 및 통신
- 생명주기는 설치중, 설치됨/대기중, 활성화 중, 활성화됨, 중복 상태로 구성됩니다.
- 페이지와 서비스 워커는 **postMessage()**를 통해 메시지를 주고받으며 통신합니다.
- MessageChannel을 사용하여 양방향 커뮤니케이션 채널을 만들 수 있습니다.
Mock Response 만들기
- 서비스 워커를 활용하여 네트워크 호출을 가로채 Mock Response를 제공할 수 있습니다.
- 브라우저의 fetch 요청을 가로채, 웹 앱에 요청 정보를 전달하고, 웹 앱은 핸들러를 참조하여 Mock 응답을 생성합니다.
- 서비스 워커는 웹 앱에서 받은 응답으로 원래 요청의 응답을 대체합니다.