서비스 워커?!
서비스 워커는 웹 애플리케이션(브라우저)의 UI(메인) 스레드와 분리되어 독립된 Worker(워커) 스레드에서 실행시킬 수 있는 하나에 기술입니다.
그리고 화면 렌더링 작업을 담당하는 UI(메인) 스레드와 분리되어 별도의 워커 스레드에서 실행이 되어 화면이 블록킹되는 이슈 없이 작업이 진행됩니다.
서비스 워커가 사용되는 곳
- 높은 비용의 계산을 처리할 때 또는 푸시 이벤트를 생성할 때
- 오프라인 상태 또는 네트워크가 느린 상태일 때 리소스를 캐싱할 때
- 네트워크 요청을 가로채어 제어를 하고자 할때
서비스 워커를 활용하는 곳이 다양하게 있지만 이번엔 "네트워크 요청 가로채어 제어" 하는 부분에 대하여 살펴보고자 합니다.
1. 서비스 워커 등록하기
서비스 워커 등록하는 방법은 아주 간단합니다. 아래 코드처럼 index.html 파일을 생성하고 같은 위치에 index.js 파일 생성합니다.
- index.html
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>네트워크 요청 가로채기</title>
</head>
<body>
<div id="root"></div>
<script src="./index.js"></script>
</body>
</html>- index.js
async function registerServiceWorker() {
if ("serviceWorker" in navigator) {
try {
await navigator.serviceWorker.register("./sw.js");
// 등록 성공
console.log("Registration succeeded");
} catch (err) {
// 등록 실패
console.log("Registration failed with " + err);
}
}
}
registerServiceWorker();
2. fetch 요청 가로채기
위 에서 작성했던 index.js 파일에 fetch 요청을 추가해주고 같은 위치에 sw.js 파일을 아래처럼 작성해줍니다.
- index.js
async function registerServiceWorker() {
if ("serviceWorker" in navigator) {
try {
await navigator.serviceWorker.register("./sw.js");
// 등록 성공
console.log("Registration succeeded");
} catch (err) {
// 등록 실패
console.log("Registration failed with " + err);
}
}
}
registerServiceWorker();
fetch("https://jsonplaceholder.typicode.com/users/1")
.then((response) => response.json())
.then((data) => console.log(data));해당 fetch 요청을 보내면 아래와 같이 출력된다.
- sw.js
self.addEventListener("fetch", function (event) {
const { url } = event.request;
if (url === "https://jsonplaceholder.typicode.com/users/1") {
event.respondWith(
new Response(
JSON.stringify({
message: "새로운 응답",
})
)
);
}
});이제 서비스 워커에서 fetch 요청을 가로채어 응답에 대한 데이터를 변환하여 반환해주면 아래와 같이 출력이 되는걸 볼 수 있다.
이렇게 서버스 워커를 이용하여 아주 간단한 방법으로 네트워크 요청을 가로채어 새로운 응답값을 반환하는 코드를 작성하였습니다.
그러면 이러한 네트워크 요청을 가로채어 실제로 어떠한 부분에 활용할 수 있을까?! 에 대해서 생각해보면
우선 전반적인 개발 프로세스는 요구사항 정의, 백엔드 개발, 프론트앤드 개발 요렇게 간단하게 정리하게 된다면 물론 백앤드 API 개발이 우선적으로 되어 프론트엔드 개발을 진행할때는 해당 백앤드 API 를 이용한다면 제일 좋은 상황이라고 생각합니다. 하지만 때때로 백엔드 개발 과 프론트엔드 개발이 동시에 진행되는 경우도 종종 존재할 수 있다고 생각 되어집니다.
이러한 상황일때 프론트엔드 개발을 할때 백엔드 API 필요할때는 일단 Mock 데이터를 선언하여 개발을 진행 할 수도 있지만 위와 같이 네트워크 요청을 가로채어 원하는 응답값을 내려주는 방법을 사용할 수도 있을것 같습니다.
하지만.... 매번 위 예시 코드처럼 모든 요청에 대한 서비스 워커를 설정해야 하는 부담감이 조금 듭니다...
이럴때 사용할 수 있는 써드 파티 라이브러리가 존재합니다. ㅎㅎ
위 라이브러리를 사용한다면 조금 더 간단히 API 요청을 가로채어 Mock 응답값을 반환할 수 있습니다.
요 글도 한번 읽어 보시면 더욱 좋을것 같네요 ㅎㅎ
https://tech.kakao.com/2021/09/29/mocking-fe/
