MSW 사용, 테스트 환경 세팅, TextEncoder is not defined 트러블 슈팅 기록

1️⃣ 왜 MSW를 도입했는가?API 이슈와 MSW 도입의 필요성문제없이 개발하던 중, 어느 순간 API 요청이 먹통이 되는 상황이 발생했습니다. 알고 보니 백엔드 측에서 HTTP를 HTTPS로 변경하는 과정에서 설정이 잘못되어, 그 설정을 하는 동안 클라이언트 측의 프론트엔드 개발자들은 개발이 잠시 중단되는 상황이 발생했습니다. 이러한 상황을 겪으면서, 만약 MSW(Mock Service Worker)를 설정해두었다면 막힘없이 개발을 계속 진행할 수 있었을 텐데라는 생각이 들었습니다.그래서 백엔드의 의존을 덜어낼 수 있는 안정적인 Mock 환경을 세팅을 시작하게 되었습니다.2️⃣ MSW 세팅 시작1. 기본적인 세팅MSW의 공식 문서에 따라 기본적인 세팅을 진행했습니다. Mock Service Worke..

• format_list_bulleted Front End
• · 2024. 7. 21.
• textsms

[한글 번역] Stop mocking fetch - Kent C. Dodds

“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를 모킹하면 테스트 곳곳에서 백엔드의 기능을 재구현해야 한다. 이는 중복 작업을 초래하고 테스트의 복잡성을 증가시킨다.테스트와 서버 코드의 분리: 클라이언트와 서버 사이의 상호작용을 모킹함으로써 실제 서버의 동작과 테스트가 분리되어, 테스트가 실제 환경을 제대로 반영하지 못할 수 있다.구현 세부사..

• format_list_bulleted Front End
• · 2024. 5. 31.
• textsms

React에서의 MSW 기본 사용법

❤️‍🔥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 모듈을 만..

• format_list_bulleted React
• · 2024. 4. 14.
• textsms