프론트엔드 플로우셋
실제 구현 시 생각하는 흐름
요청부터 응답, 상태 업데이트, 에러 처리까지 전체 흐름을 이해하고 설계합니다
API 요청 플로우
사용자 요청부터 응답까지의 전체 흐름
User / Browser
HTTP Request (fetch/axios)
1
BFF / API Server
Next API route / Node
2
Middleware
핵심인증/인가(토큰), 로깅/레이트리밋, 헤더/쿠키 파싱
3
Schema Validate
핵심req.body 스키마 검사, upstream 응답 스키마 검사
4
Upstream Service
핵심외부 API / 다른 서버 (Auth / Payments / DB)
5
BFF Transform
필요하면 응답 형태 변환
6
React Component
UI 렌더링
7
Error Boundary
예외 처리UI 렌더 에러 잡는 안전망, fallback UI 보여줌
8
핵심 용어
SCHEMA
데이터 모양 검사 (요청/응답이 예상한 형태인지 확인)
MIDDLEWARE
요청의 관문 (인증/로깅/레이트리밋 같은 공통 전처리)
ERROR BOUNDARY
UI 안전망 (React 렌더링 중 에러 나면 앱 안죽게 fallback)
UPSTREAM
내가 호출하는 상위(외부) 시스템 (외부 API/다른 서버/DB)
✓ 전체 흐름 파악
요청부터 응답까지 각 레이어의 역할을 이해합니다
✓ 에러 시나리오 대비
예외 상황에서도 안정적으로 동작하도록 설계합니다
✓ 최적화 포인트 인지
각 단계에서 성능 개선 가능한 지점을 찾아냅니다