service worker 2

MSW로 프론트엔드 개발 생산성 높이기! - MSW 사용하기

MSW 사용 방법 MSW 설치하기 npm install msw --save-dev # or yarn add msw --dev 먼저 MSW 패키지를 설치합니다. 패키지를 설치하고 나면 프로젝트에 MSW를 세팅합니다. Service Worker를 제공하기 위해 사용하고자 하는 프로젝트의 directory를 지정해서 실행해줍니다. npx msw init ./public --save 다음을 실행하고나면 public 디렉토리에 service worker가 만들어지고 package.json에 다음과 같이 표시됩니다 { "name": "your-app", "msw": { "workerDirectory": "public" } } Define Mocks 이제 Mocking 할 API를 핸들링할 핸들러를 만들어주어야 합니..

FrontEnd/React 2022.12.26

MSW로 프론트엔드 개발 생산성 높이기! - MSW 알아보기

MSW MSW(Mock Service Worker)는 API Mocking 라이브러리로, 서버향의 네트워크 요청을 가로채서 모의 응답을 보내주는 역할을 합니다. 따라서, MSW 라이브러리를 통하면 Mock 서버를 구축하지 않아도 네트워크 수준에서 Mocking 할 수 있습니다. MSW가 이러한 역할을 할 수 있는 이유는 Service Worker를 통해 HTTP 요청을 가로채기 때문입니다. Service Worker가 뭐에요? Service Worker는 웹 애플리케이션의 메인 스레드와 분리된 별도의 백그라운드 스레드에서 실행시킬 수 있는 기술 중 하나입니다. Service Worker 덕분에 애플리케이션의 UI Block 없이 연산을 처리할 수 있습니다. 이러한 특징으로 인해, Service Worke..

FrontEnd/React 2022.12.26