pile·
프론트엔드·oliveyoung올리브영 테크블로그·

Next.js에서 MSW(Mock Service Worker)로 네트워크 Mocking하기

문제Spring MVC에서 Next.js로 마이그레이션 중 백엔드 API 미완성 시 프론트가 블로킹되고, axios 직접 모킹으로 중복 코드가 산재했다.
접근Service Worker 기반 MSW를 도입해 브라우저·노드 환경 모두에서 HTTP 요청을 인터셉트. 환경별 URL 변환 `MockRestClient`로 프록시 문제를, Worker scope 설정으로 URL 프리픽스 문제를 해결했다.
결과백엔드 API 없이 프론트엔드 개발을 독립적으로 진행 가능해졌다. 핸들러를 API 경로 구조로 분리해 유지관리성이 향상됐다.
oliveyoung
올리브영 테크블로그 블로그
원문은 여기서 이어서 읽을 수 있어요
원문 읽기
읽음 (0)

이 글과 비슷한

  1. 프론트엔드·LINE EngineeringLINE Engineering·

    AI로 웹 엔지니어 없이 LINE 앱 안에서 그룹 영상 통화 서비스 만들기

    LINE Planet 팀의 PM과 Android 엔지니어 두 명이 웹 전문 엔지니어 없이 LINE 앱 내에서 그룹 영상 통화 서비스를 개발한 과정을 다룬다. LIFF(LINE Front-end Framework)와 LINE Planet SDK를 활용해 React/Vite 기반 웹 앱을 구성했고, Firebase Cloud Functions로 별도 서버 인프라 없이 구현을 완료했다.

    #react#webrtc#firebase+2