연동 · 1장 전체 요청 흐름

연동 1장 · 전체 요청 흐름

사용자 목록을 불러오는 한 번의 요청이 화면(React)부터 DB까지 어떻게 가고 돌아오는지, 단계별로 따라갑니다. 프론트와 백엔드가 어디서 만나는지 한눈에 보세요.

시나리오

"사용자 관리 화면이 열리면 목록을 불러온다" — 프론트 useQuery → 백엔드 GET /api/users → DB 조회 → 다시 화면까지.

요청의 생애 — 단계별

1. 화면 (React) — 컴포넌트가 useQuery(['users'])를 호출하면 ky가 GET /api/users를 보냅니다. 이때 Authorization: Bearer <토큰> 헤더를 자동으로 실어요.

화면
ky · useQuery
→
프록시
→
JWT 필터
→
컨트롤러
→
QueryDSL
→
DB

2. Vite 프록시 (개발) — 프론트는 상대경로 /api/...로 부르고, Vite 개발 서버가 이를 localhost:8084로 넘깁니다. 같은 출처처럼 보여 CORS? 문제가 없어요.

화면
→
프록시
/api → :8084
→
JWT 필터
→
컨트롤러
→
QueryDSL
→
DB

3. JWT 필터 — 백엔드 첫 관문 필터?인 JwtAuthenticationFilter가 헤더의 JWT?를 꺼내 검증하고, 통과하면 인증정보(SecurityContext)에 사용자를 저장합니다. (만료면 여기서 401)

화면
→
프록시
→
JWT 필터
토큰 검증
→
컨트롤러
→
QueryDSL
→
DB

4. 컨트롤러 — UserAccountEndpoint.listByPage(filter, pageable)가 쿼리스트링을 검색조건 DTO로 받아 데이터 계층을 호출합니다.

화면
→
프록시
→
JWT 필터
→
컨트롤러
listByPage
→
QueryDSL
→
DB

5. QueryDSL → DB — UserRepoQueryImpl.listByPage가 검색어·필터·페이징을 동적 SQL로 만들어 DB에서 조회합니다.

화면
→
프록시
→
JWT 필터
→
컨트롤러
→
QueryDSL
→
DB

6. 변환 → 응답 — 조회한 엔티티? 목록을 UserDTO.fromEntity로 바꾸고 PageDTO(목록+페이지정보)로 감싸 JSON으로 응답합니다.

PageDTO<UserDTO>
JSON 응답
←
컨트롤러
←
DB 결과

7. 다시 화면으로 — 응답이 ky로 돌아오면 React Query?가 캐시?에 저장하고 표에 데이터를 그립니다. 같은 화면을 또 열면 캐시로 즉시 표시돼요.

화면
표에 렌더 ✓
←
React Query 캐시
←
응답 JSON
현재 단계 데이터/캐시 완료

직접 보내보기 (시뮬레이션)

아래 "보내기"를 누르면 실제 백엔드 없이도 GET /api/users 요청과 응답 형태를 흉내 내 보여줍니다.

이 그림이 도움이 되는 순간
  • "왜 401이 뜨지?" — 3단계(JWT 필터)에서 토큰 만료/누락을 의심
  • "화면에 데이터가 안 떠" — 6단계 응답 형태(PageDTO)와 프론트가 기대하는 형태가 맞는지 확인
  • "CORS 오류" — 2단계 프록시 설정 또는 백엔드 CORS 화이트리스트 점검