Mock Service Worker로 백엔드 없이 프론트엔드 개발하기
AI Store에서 AI코딩으로 만들어진 앱을 만나보세요!
지금 바로 방문하기

프론트엔드 개발에 필요한 백엔드 없이 진행하는 방법

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

프론트엔드 개발자, 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 의존성 제거의 주요 이점 제공