Develop Note by J.S.

Cypress에 MSW(Mock Service Worker) 를 적용하여 테스트 하는 환경 세팅 방법입니다 . cypress/support/e2e.ts (or index.ts : cypress 버전에 따라 다름)에서 기존에 mockup api를 정의한 /src 디렉토리 내 mocking 파일을 불러와 Worker를 시작합니다. 1. e2e.ts import './commands'; import { setupWorker } from 'msw'; import authMocking from '@/services/mocking/auth.mocking'; // 경로문제발생! export const mocking = setupWorker(...authMocking); before(() => { // MSW 워커를 ..

MSW(Mock Service Worker) Service Worker의 네트워크 Proxy 기능을 활용하여 API 테스트를 위한 API 모킹(Mocking) 라이브러리 입니다. Front-end 개발 시 Back-end 개발 완료까지 기다리지 않고 API 명세서만 있다면 가상의 API 응답을 구성하여 Front-end 개발 및 API 테스트와 Back-end 개발을 동시에 진행하여 프로젝트 개발 소요 시간을 단축 시킬 수 있게 도와줍니다. MSW 라이브러리 설치 npm install -D msw 1. Service Worker 구성 먼저 제 게시글 중 Service Worker 구성에 대한 게시글을 꼭 먼저 보신 후 진행해주세요 이후 registerServiceWorker.ts에서 아래와 같은 코드를 ..

Service Worker - 웹 페이지 외에서 브라우저 내 스크립트와는 다른 쓰레드로 동작되는 기능입니다. http 요청을 catch하는 네트워크 프록시 기능을 구현할 수 있습니다. - 리소스 caching 처리 기능 구현이 가능하고 Push 알림(PWA)이 가능하여 개발 단계에서 MSW(mocking service worker)를 사용한 API Testing 기능 구현이 가능합니다. - Service Work는 페이지의 DOM과의 직접적인 상호작용은 할수 없지만 Message를 통하여 통신합니다. - Service Worker 생명주기 : 설치중 -> 설치완료/대기 -> 활성화중 -> 활성화완료 -> 중복(설치실패 및 교체) 설치 npm install register-service-worker 1. ..