풀스택 프로젝트 클라이언트

프론트엔드 API 통신 경계

React 화면은 API 응답을 그대로 뿌리는 곳이 아니라 요청 상태, 에러, 캐시, 폼 입력을 사용자 흐름에 맞춰 정리하는 계층입니다.

01

API 클라이언트

base URL과 공통 헤더 고정

토큰, Content-Type, 에러 변환을 한 곳에 모아 화면 컴포넌트를 가볍게 둡니다.

02

상태 관리

전역 상태와 서버 상태 분리

사용자 정보처럼 공유되는 값과 목록 조회 결과를 같은 저장소에 섞지 않습니다.

03

라우팅

페이지 단위 책임 정리

목록, 상세, 작성 화면은 URL과 데이터 요청 범위를 함께 설계합니다.

클라이언트 경계 기준

  • API 에러는 사용자에게 보여줄 메시지로 변환해서 저장합니다.
  • 폼 상태와 서버 응답 상태를 같은 변수에 섞지 않습니다.
  • 라우트 이동 후 필요한 데이터를 다시 요청하는지 확인합니다.

상태 종류

폼 상태 입력 중 local state
서버 상태 응답 데이터 query/cache
인증 상태 사용자 정보 global state