1️⃣ 왜 MSW를 도입했는가?1. CORS 이슈백엔드와 함께 협업하는 과정에서, CORS(Cross-Origin Resource Sharing) 문제를 만났습니다. 이를 해결하기 위해서 webpack의 Proxy를 사용하여 클라이언트 측에서 해결했습니다. 당시에는 CORS에 대한 지식이 부족해서, 이렇게만 하면 되는 줄 알았습니다.// webpack.config.js//...proxy: [ { context: ['/api'], target: process.env.REACT_APP_CRURU_API_URL, pathRewrite: { '^/api': '' }, changeOrigin: true, }, ],2. 예기치 않은 API 요청 문제이후 문제없이 개발..
“fetch” 모킹은 그만!이 글은 아래 원글 ‘Stop mocking fetch - Kent C. Dodds’ 의 내용을 번역한 글입니다.원글⬇️ Stop mocking fetchStay up to date Stay up to date All rights reserved © Kent C. Dodds 2024kentcdodds.com ❗️tl;dr - 옮긴이Fetch 모킹의 문제점중복되는 백엔드 구현: fetch를 모킹하면 테스트 곳곳에서 백엔드의 기능을 재구현해야 한다. 이는 중복 작업을 초래하고 테스트의 복잡성을 증가시킨다.테스트와 서버 코드의 분리: 클라이언트와 서버 사이의 상호작용을 모킹함으로써 실제 서버의 동작과 테스트가 분리되어, 테스트가 실제 환경을 제대로 반영하지 못할 수 있다.구현 세부사..
❤️🔥MSW 소개 MSW(mocking service worker)는 API를 mocking할 수 있는 라이브러리 입니다. mocking의 장점 테스트 코드의 의존성을 덜어내 독립적인 테스트 코드를 작성할 수 있습니다. 실제 응답을 기다리지 않기 때문에, 속도 측면에서 비용절감이 될 수 있습니다. ❗️MSW를 React에서 사용해보자. 우선 msw를 설치해줍니다. npm install msw@latest --save-dev 그 다음 msw를 실행해줍시다. npx msw init public/ --save "msw": { "workerDirectory": [ "public" ] } 이 결과로 package.json에 다음과 같은 스크립트가 추가됩니다. 세팅이 완료되었습니다. 이제 mocking 모듈을 만..