Demo

Flux 라이브 패치 데모

DB state에서 즉석 생성되고 열린 화면은 fragment patch로 갱신되는 테스트 페이지입니다.

라이브 패치 데모

이 페이지는 Flux의 기본 계약을 보여주는 테스트 문서입니다.

Flight

DB에서 DOM으로

테스트
FX100 10:00

DB STATE → DOM PATCH

경과 시간
5분
도착
10:05
예약번호
PATCH1
탑승 시간
09:58
게이트
1
좌석
A1-A3

Map

State에서 DOM까지

DB → renderer → browser
  1. 1DB State
  2. 2Renderer
  3. 3DOM Patch
3단계state, fragment, DOM
5초revision polling
0회정상 patch 시 전체 reload

Rendering

On-the-fly 렌더링

DB 정본
On-the-fly 렌더링

HTML 파일 없이 요청 시 생성

이 페이지는 서버 디스크의 HTML 파일이 아니라 PostgreSQL의 workspace, document, block, card row를 읽어 매 요청마다 생성합니다.

DB stateNo stored HTMLFragment patchAgent API patchCodex live check

부분 패치 대상

이 탭은 추천 카드와 지도 카드가 같이 갱신되는지 보기 위한 테스트 영역입니다.

Patch Targets

부분 패치 검증 카드

3개 카드

이 목록은 place row와 pickSet row를 조합해 렌더링합니다. DB에서 카드 내용이 바뀌면 열린 페이지는 fragment만 받아 DOM을 교체합니다.

1

State Card

PostgreSQLworkspace_cards정본

카드 단위 데이터가 DB row로 저장되는지 확인하는 테스트 항목입니다.

State Card media 1State Card media 2
2

Fragment API

204HTML fragmentrevision

revision이 같으면 204, 바뀌면 필요한 HTML fragment만 반환하는지 확인합니다.

Fragment API media 1Fragment API media 2
3

DOM Patch

client runtimeno reloadLeaflet refresh

브라우저가 전체 페이지를 다시 받지 않고 block DOM만 교체하는지 확인합니다.

DOM Patch media 1DOM Patch media 2

3 items with coordinates

테스트 포인트
  1. 1State Card
  2. 2Fragment API
  3. 3DOM Patch

Flux 시스템 흐름

정본 상태에서 요청 시 렌더링, revision fragment patch, agent typed patch까지 이어지는 흐름입니다.

Timeline

Flux 동작 흐름

State API + Typed Patch
1
DB stateworkspace, document, card row가 정본입니다.
2
On-demand HTML서버는 요청 때 DB state를 읽어 HTML을 생성합니다.
3
Revision fragments브라우저는 revision을 비교해 필요한 fragment만 교체합니다.
4
Agent typed patch에이전트는 state API로 읽고 typed patch API로 수정합니다.