프론트엔드 개발에 필요한 백엔드 없이 진행하는 방법
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
프론트엔드 개발자, UI/UX 디자이너, API 개발자
- 난이도: 중간 (기본적인 웹 개발 지식 필요)
핵심 요약
- Mock Service Worker(MSW)는 Service Worker를 활용해 백엔드 없이 프론트엔드 로직을 개발할 수 있는 프레임워크 무관(Framework-agnostic) 라이브러리
- React/Vite 기반 프로젝트에서
npm i msw --save-dev
설치 후handlers.ts
파일 생성으로 GET/POST 요청 모킹 가능 - HTTP 요청 인터셉트 및 에러 시뮬레이션(HttpResponse.error())을 통해 실제 백엔드 의존 없이 개발/테스트 가능
섹션별 세부 요약
1. MSW 설치 및 초기 설정
npm install msw --save-dev
또는 HTML 스크립트 삽입으로 설치npx msw init public/ --save
명령어로 서비스워커 생성src/mocks/handlers.ts
파일 생성 후setupWorker
설정
2. 핸들러 작성 및 요청 모킹
http.get()
/http.post()
메서드로 GET/POST 요청 핸들러 정의Map
또는localStorage
를 사용해 임시 데이터베이스 구축- 예:
http.get('/films', () => HttpResponse.json([...]))
로 영화 목록 요청 모킹
3. 파라미터 및 에러 처리
- URL 파라미터 처리:
http.get('/films/:filmId', ({ params }) => {...})
- 네트워크 에러 시뮬레이션:
HttpResponse.error()
또는HttpResponse.json({ message: "Film not found" }, { status: 404 })
4. 데이터 지속성 및 쿠키/쿼리 파라미터 처리
localStorage
또는IndexedDB
를 사용해 페이지 간 데이터 유지- 쿠키 처리:
({ cookies }) => HttpResponse.json(cookies)
- 쿼리 파라미터 추출:
new URL(request.url).searchParams.get("id")
5. 실제 요청 프록시 및 확장성
fetch(bypass(request))
로 실제 백엔드 요청 프록시bypass(proxyRequest)
로 외부 요청 전달 및 로그 수집 가능
결론
- MSW를 사용하면 백엔드 개발 완료 전에도 프론트엔드 로직 개발/테스트가 가능하며,
GET/POST
, 파라미터, 에러, 프록시 등 다양한 시나리오 지원 - React/Vite 기반 프로젝트에서
handlers.ts
파일 생성 및setupWorker
설정으로 즉시 적용 가능 - 프론트엔드 개발 속도 향상 및 불안정한 API 의존성 제거의 주요 이점 제공