API 연동, Mock, 상태관리 (Frontend API Integration & State Management)

요약

• FE의 신뢰성은 API 연동 구조와 상태관리 설계에 달려 있다.
• 본 문서는 API 호출 패턴, Mock 데이터 전략, 전역 상태관리 규칙을 정의한다.
• 목표: BE와 병렬 개발, Mock 기반 테스트 가능 구조 확립.

항목	내용
API 연동	공통 Wrapper + DTO 기반
Mock	병렬 개발용 JSON/Swagger Mock
상태관리	Redux/Query 분리 적용
에러처리	중앙화 Interceptor 로직

---

1. API 연동 구조

항목	설명
API 호출 모듈	Axios / Fetch Wrapper 사용
에러 처리	Response Interceptor로 중앙 관리
로딩 처리	Global Loading State 또는 Skeleton 적용
응답 타입	DTO 기반 Interface 정의 (TypeScript)

// api/user.ts
import api from '@/utils/api'
export const getUserProfile = (id: string) =>
  api.get<UserProfile>(`/users/${id}`)

---

2. Mock API 및 병렬 개발

상황	전략
BE 개발 미완료	Mock 서버(json-server, MSW) 사용
스펙 변경 중	Swagger/OpenAPI 기반 자동 Mock
병렬 진행	Mock → BE API 교체 자동화 스크립트

Mock 서버는 /mocks 디렉토리 내 JSON 파일로 버전 관리한다.

---

3. 상태관리(State Management)

범주	기술	적용 예시
전역 상태	Redux Toolkit / Recoil / Zustand	사용자 세션, 전역 알림
서버 상태	React Query / SWR	API 캐싱, 로딩/에러 관리
UI 상태	Local useState	모달, 필터 등 단기 상태

---

4. 에러 핸들링 표준화

api.interceptors.response.use(
  res => res,
  err => {
    const status = err.response?.status
    switch (status) {
      case 401:
        logout()
        break
      case 500:
        toast.error('서버 오류가 발생했습니다.')
        break
    }
    return Promise.reject(err)
  }
)

---