타입 안전한 API 모킹으로 프론트엔드 생산성 높이기
JSON 모킹의 스펙 변경 대응 한계를 줄이기 위해 TypeScript 기반 타입 안전 모킹을 도입했습니다. 공통 베이스 파일과 시나리오 변형 구조로 유지보수성과 생산성을 높였습니다.
#TypeScript#MSW#immer
3500
타입 안전한 API 모킹으로 프론트엔드 생산성 높이기
태그
MSW 기술 블로그 글
MSW 태그가 달린 국내 IT 기업 기술 블로그 글을 최신순으로 모았습니다.
전체 6개최신 6개 표시
관련 태그
최신 게시글
6개 표시
Next.js에서 MSW(Mock Service Worker)로 네트워크 Mocking하기
Next.js 전환 과정에서 단위 테스트와 API Mocking의 중복·관리 문제를 해결하기 위해 MSW 도입을 검토했습니다. 브라우저와 SSR 환경의 URL 차이를 보정하는 클라이언트를 만들어 프록시 이슈에 대응했습니다.
#Next.js#MSW#mocking
2800
Storybook의 MSW mock 구조 개선
Storybook 스토리별로 흩어진 MSW GraphQL mock을 한곳으로 모아 관리하는 구조를 제안했습니다. recast 변환 스크립트로 중복과 누락 문제를 줄이는 마이그레이션 과정도 다뤘습니다.
#Storybook#MSW#GraphQL
1900
MSW - 더 나이스한 목킹을 위한 고민
MSW를 활용해 브라우저와 Node 환경에서 API 목킹을 통합하는 방법을 정리했습니다. 개발 속도 차이와 테스트용 목업 중복 문제를 줄인 사례를 소개했습니다.
#MSW#React#Jest
2300
`API 언제 나오나요?` 로 부터 독립하기
API 응답 모델이 불확실한 상황에서 factory 레이어를 둬 UI와 API 의존을 분리했습니다. LIVE와 VOD의 서로 다른 응답을 정규화해 UI 변경 범위를 줄인 사례를 소개했습니다.
#RTK Query#factory#msw
2600
`API 언제 나오나요?` 로 부터 독립하기
MSW를 활용하는 Front-End 통합테스트
MSW를 통해 FE 통합테스트에서 API 모킹과 응답 제어를 쉽게 하는 방법을 소개했습니다. 검색 페이지 예시로 정상 응답, 엣지 케이스, 에러 처리까지 검증하는 흐름을 설명했습니다.
#MSW#통합테스트#Jest
3100
MSW를 활용하는 Front-End 통합테스트