← 디버스|Full-Stack Data Flow/3D Pipeline/코드 한 줄이 사용자에게 도달하기까지
REQUEST · ↓실시간 패킷 경로
예상 지연 시간
0 ms
현재 단계
사용자 입력
레이어브라우저
방향요청 (Request)
진행률0%
단계 설명
Browser
사용자 입력
브라우저가 URL을 입력받고 fetch() 또는 페이지 요청을 발사한다.
레이어 내부 흐름
Browser
1URL 입력
2fetch()
3JSON 응답 수신
4setState
기술 스택
Browser
브라우저
React 19HydrationVirtual DOMfetch()
사용자가 URL을 입력하면 React가 fetch / setState 사이클로 화면을 갱신한다. 클라이언트 컴포넌트는 여기서 onClick·useEffect로 인터랙션을 처리한다.
계층 인덱스
탑 → 다운
데이터 흐름 재생
사용자 입력 · 0 ms
요청 시작DB 쿼리응답 완료
/about/flow의 8단계 풀스택 데이터 흐름을 3D 입자 시뮬레이션으로 시각화 — 시안=요청, 호박=응답