front-end/msw 3

[MSW] 브라우저 환경에서 사용하기

브라우저에서 MSW는 네트워크 수준에서 요청을 가로채는 책임을 지는 서비스 워커를 등록함으로써 작동합니다. 서비스워커는 원칙적으로 HTTPS를 통해 제공되어야 한다 그러나 브라우저는 로컬호스트에서 개발할 때 HTTP에서도 워커를 등록할 수 있도록 허용한다 worker 스크립트 복사하기 만약 애플리케이션이 서비스 워커를 등록한다면, 해당 워커 스크립트를 호스팅하고 제공해야 합니다. 라이브러리의 CLI는 init 명령을 제공하여 빠르게 ./mockServiceWorker.js 워커 스크립트를 애플리케이션의 공개 디렉토리로 복사할 수 있음 npx msw init 복사했으면, 브라우저에서 애플리케이션의 /mockServiceWorker.js URL로 이동한다 💡 만약 localhost:3000 이면 localh..

front-end/msw 2024.01.19

[MSW] Describing REST API

Import MSW는 HTTP 요청을 설명하기 위한 별도의 네임스페이스를 제공한다 이 네임스페이스로 가로챌 요청과 그에 대한 응답 방법을 설명한다 import the http namespace from the msw package src/mocks/handlers.js import { http } from 'msw' export const handlers = [] Request handler 이제 Request handler를 만든다. http namespace의 모든 메서드는 HTTP 요청 메서드에 대응되는 요청 핸들러를 만들게한다. http[method](predicate, resolver) Request handler : 요청과 mock 응답을 가로채게 하는 함수 실습 endpoint GET /po..

front-end/msw 2024.01.19

[MSW] Mock Service Worker - Basic 번역

Intercepting requests 요청에 대해 mocked response를 보내기 위해, 우선 요청을 가로채야한다. MSW에서는, 요청 인터셉션을 request handler로 불리는 함수로 수행한다 // Intercept an HTTP GET request which path // matches the "predicate", and resolve it // using the given "resolver" function. http.get(predicate, resolver) "predicate"와 일치하는 경로의 HTTP GET 요청을 가로채고, 이를 주어진 "resolver" 함수를 사용하여 resolve한다 HTTP request HTTP 요청은 http request 네임스페이스를 사용하여..

front-end/msw 2024.01.09