개요

MockApiPage는 두 가지 Mock API 접근 방식을 제공하는 React 컴포넌트입니다:

1. 실제 Mock API (MSW): Mock Service Worker를 사용하여 실제 HTTP 엔드포인트를 제공하는 진정한 Mock API
2. 비동기 시뮬레이터: JavaScript의 Promise와 setTimeout을 활용한 간단한 비동기 동작 시뮬레이션

서버 API가 준비되지 않은 개발 초기 단계에서 프론트엔드 개발을 병행할 수 있도록 하며, 다양한 네트워크 상황(성공/실패/지연)을 시뮬레이션하여 예외 처리 로직을 테스트할 수 있는 교육용 페이지입니다.

주요 기능

1. 실제 Mock API (MSW 기반)

• Service Worker 활용: 브라우저에서 네트워크 요청을 가로채어 응답
• 실제 HTTP 엔드포인트: GET, POST, DELETE 등 RESTful API 메서드 지원
• 네트워크 탭 통합: 개발자 도구에서 실제 HTTP 요청/응답 확인 가능
• 다양한 엔드포인트: 사용자 CRUD, 에러 시뮬레이션 등 다양한 API 제공
• 커스텀 지연 시간: 실제 네트워크 지연을 시뮬레이션

2. 비동기 시뮬레이터

• Promise 기반: JavaScript Promise를 활용한 비동기 작업 처리
• 지연 시뮬레이션: setTimeout으로 1.5초 네트워크 지연 구현
• 시나리오 제어: 성공/실패 시나리오를 선택적으로 테스트
• 실제 API와 동일한 패턴: async/await 패턴으로 실제 API 호출과 동일한 사용법

3. 상태 관리 시스템

• 솔루션별 독립 상태: Mock API와 시뮬레이터 각각의 상태 관리
• 로딩 상태: 요청 진행 중 시각적 피드백 제공