[Mock/Feat/#40] service worker 구현 - [merged]

Merges feat/40-request-mocking -> mock

🥥 Contents

service worker 구현

사용자의 http 요청을 받아서 mocking 처리를 하기 위한 service worker 의 기능을 구현해야 한다. fetch 이벤트를 등록하여 브라우저에서 동작하고 있는 service worker 가 요청을 인식하여 처리를 하게 된다.

사용자 요청 가로채기

```javascript // shooot-mock/service-worker.js if (projectName === undefined || !projectName.length) { console.error("[Fetch Event]: projectName 을 등록해주세요"); } else { const { request } = event; const url = new URL(request.url); if (!url.origin.split(/[/.]/).includes(projectName)) { console.error("[Fetch Event]: 서비스에서 제공되는 도메인으로의 요청만 mocking 됩니다"); } else { ... } } ``` 요청을 받으면 service worker 가 할 일은 요청을 관리해도 되는지에 대한 여부 파악이다. - projectName(우리 서비스에 등록한 서비스의 영문명)을 설정하지 않은 경우 - 설정한 projectName 이 도메인에 포함된 요청의 경우

데이터 가공하기
```javascript // shooot-mock/service-worker.js event.respondWith( (async () => { const origin = url.origin; // origin === domain const method = request.method; // request method const headers = [...request.headers.entries()]; // request header const params = Object.fromEntries(url.searchParams.entries()); // request parameters, path variables const requestParameters = {}; const pathVariables = {}; Object.keys(params).forEach((key) => { // request parameter, path variable 가공 과정 }); let body = {}; if (["POST", "PUT", "PATCH"].includes(method)) { // request body 가공 과정 } const postData = { // express 에 전달할 데이터로 변환 }; let result; try { const response = await fetch("express endpoint", { // post 로 데이터 전달 }); console.log(`[Fetch Event]: from express ${result}`); return new Response(JSON.stringify(await response.json()), { status: 200 }); } catch (error) { console.error(`[Fetch Event]: from express error`, error); return new Response(JSON.stringify({ error: "[Fetch Event]: server internal error" }), { status: 500, }); } })() ); ``` - 현재 사용자의 request 에서 사용하는 정보는 위에서 보여지는 6가지(origin, method, headers, request parameters, path variables, body) - 뽑아낸 데이터를 하나의 객체(postData)로 감싸서 express 서버로 전달 - express 의 응답을 사용자에게 전달

message 이벤트
```javascript // shooot-mock/service-worker.js self.addEventListener("message", async function (event) { console.log("[프로젝트 설정]=========="); if (event.data && event.data.type === "SET_CONFIGS") { projectName = event.data.projectName; delay = event.data.delay; console.log(`[프로젝트 설정]: 정보 설정 완료 (${projectName}, ${delay}ms)`); } }); ``` - 위에서 언급된 projectName 은 service worker 가 아닌 라이브러리가 제공하는 object 의 메소드가 받아서 자원으로 저장 - object 가 값을 전달해줘야 하고, 그 과정을 service worker 가 보유하고 있는 postMessage 메소드와 message 이벤트로 관리 - 라이브러리에서의 구현 코드는 다음 merge requeset 에서 확인이 가능하고 여기서는 message 이벤트에서 데이터를 처리하는 과정만 소개

라이브러리 구현

우리의 최종 목표는 service worker 가 동작하는 라이브러리를 구현하여 개발자들이 쓸 수 있도록 하는 것이다.

라이브러리에서 제공하는 object - 관리 자원
```javascript // shooot-mock/index.js shooot.projectName = ""; shooot.delay = 0; shooot.axios = {}; ``` - 3개의 자원을 관리 - 프로젝트 도메인 판별을 위한 projectName, 요청 delay 시간 - path variables 를 직접 객체 형태로 정의하기 위해 가공한 axios ```javascript // shooot-mock/index.js /** * Custom GET request * 템플릿, 매개변수, 반환값에 대한 정의 */ shooot.axios.get = async function (url, config = {}, pathVariables = {}) { let to = url; if (pathVariables) { // 객체 형태로 받은 path variable 을 url 에 포함시키는 과정 Object.keys(pathVariables).forEach((k) => (to += `/${pathVariables[k]}`)); } const swState = await checkServiceWorker("Axios-Get"); // service worker 가 활동하고 있는가 const domainState = checkDomain(to, shooot.projectName); // 사용할 수 있는 projectName 인가 const newConfig = swState && domainState ? getAxiosConfigs(pathVariables, config) : { ...config, params: { ...config.params } }; // 둘다 true 라면 mocking 을 위한 config 로, 아니라면 기본 axios 요청을 위한 config 로 return axios.get(to, newConfig); // 가공한 정보로 axios 요청 }; ``` - 기존의 axios 에서는 path variables 를 객체 형태로 선언하지 못함 - 객체 형태로 선언할 수 있도록 가공 -> mocking 할 때 자원을 가공할 수 있도록 하기 위함 - mocking 해야 하는 요청인지 판별하여 상황에 맞는 config 로 가공 - 기존의 axios 를 호출하여 요청을 보내어 mocking 이라면 service worker 가, 아니라면 기존 요청이 그대로 진행 - 이와 같은 방식으로 get, post, put, patch, delete 구현

라이브러리에서 제공하는 object - 메소드
```javascript // shooot-mock/index.js shooot.register = async function () { console.log("[Register]=========="); if ("serviceWorker" in navigator) { try { await navigator.serviceWorker.register("/service-worker.js"); console.log(`[Register]: service worker 등록 완료`); } ... } ... }; shooot.unregister = async function () { console.log("[UnRegister]=========="); if ("serviceWorker" in navigator) { try { const registration = await navigator.serviceWorker.getRegistration(); if (registration) { await registration.unregister(); console.log("[UnRegister]: service worker 등록 해제하였습니다"); } ... } ... } ... }; shooot.controller = async function (mode) { if (process.env.NODE_ENV === (mode ? mode : "development")) { await this.register(); } else { await this.unregister(); } }; ``` - 브라우저에 service worker 를 등록하는 register - 브라우저에서 service worker 를 등록 해제하는 unregister - 매개변수로 받는 mode 가 있다면 mode or development 모드일 때 register, 아닐 때에는 unregister ```javascript // shooot-mock/index.js shooot.setConfigs = async function (projectName, delay) { const projectNameRegex = /^[a-z0-9-]{1,20}$/; console.log("[Set-Config]=========="); if (!projectName) { // projectName 이 입력되었는가 } else if (!projectName.trim().length || !projectNameRegex.test(projectName.trim())) { // 사용 가능한 projectName 인가} else { // 등록된 프로젝트인지 확인 const pn = projectName.trim(); const canUse = await checkProjectName(pn); // 등록된 프로젝트 if (canUse === "AVAILABLE") { const checkServiceWorkerResult = await checkServiceWorker("Set-Config"); if (checkServiceWorkerResult) { shooot.projectName = projectName; shooot.delay = delay; const message = { type: "SET_CONFIGS", projectName: shooot.projectName, delay: shooot.delay, }; checkServiceWorkerResult.active.postMessage(message); console.log(`[Set-Config]: message 를 전달했습니다`); } } else if (canUse === "UNAVAILABLE") { ... // 등록되지 않은 프로젝트 } } }; ``` - 사용가능한 projectName 인지 우선 판별 - service worker 가 동작 중인지 확인 - service worker 에게 설정 값 전달

라이브러리에서 제공하는 util 메소드, type
```javascript // shooot-mock/utils.js export const checkProjectName = async (projectName) => { ... // express 에서 등록된 projectName 인지 확인 }; export const checkServiceWorker = async (keyword) => { ... // service worker 가 동작 중이면 true 를, 아니면 false 를 }; export const checkDomain = (to, domain) => { ... // 요청의 url 에서 domain(=projectName) 이 포함되어있는지 확인 }; export const getAxiosConfigs = (pathVariables, config) => { ... // mocking 을 위한 axios config 로 가공 }; ``` ```javascript // shooot-mock/index.d.ts export interface Configs { // 설정값 projectName: string; delay?: number; } export interface Shooot extends Configs { axios: Omit & { get, D = any>( url: string, config?: AxiosRequestConfig, pathVariables?: object ): Promise; // get 과 같은 형태로 post, put, patch, delete 도 등록 }; setConfigs: (projectName: string, delay?: number) => Promise; controller: (mode?: string) => Promise; register: () => Promise; unregister: () => Promise; } ``` - 타입스크립트 환경에서 라이브러리를 사용하기 위한 타입 모듈 파일 선언

라이브러리 사용

init script
```bash npx shooot init ``` 구현한 라이브러리를 사용하기 위해서 init script 파일을 작성하였다. 해당 script 를 통해서 service-worker.js 파일을 본인들의 프로젝트에 적용시켜 브라우저에서 동작시키도록 하기 위함이다.

express 서버 구현

등록된 projectName 인가
```javascript // shooot-express/server.js app.get("/projects/search", (req, res) => { const { projectName } = req.query; const query = `SELECT * FROM project WHERE english_name = "${projectName}"`; db.execute(query, (err, results) => { ... // 결과 반환 }); }); ``` - express 서버에서 우리 서비스에 등록된 projectName 인지 확인하여 결과 반환

service worker 로부터 받은 가공된 데이터
```javascript // shooot-express/server.js app.post("/mock/data", (req, res) => { const { projectName, url, origin, method, headers, requestParameters, pathVariables, body } = req.body; console.log("[Received data from Service Worker]"); ... // 단순히 콘솔에 로그 남기기 res.json({ message: "데이터를 정상적으로 받았습니다" }); }); ``` - service worker 로부터 전달 받은 가공된 데이터를 현재는 단순히 콘솔에 로그만 남김 - 후에 api docs 쪽 기능이 완성되면 남은 기능 구현 예정

📸 Screenshot

⚓ Related Issue

40

📚 Reference

chatGPT 고마워용

Shooot-PJT / shooot

[Mock/Feat/#40] service worker 구현 - [merged] #163

🥥 Contents

service worker 구현

라이브러리 구현

라이브러리 사용

express 서버 구현

📸 Screenshot

⚓ Related Issue

40

📚 Reference