PageFlow 작동 방식

PageFlow는 프레임워크별 라우트 탐색과 프레임워크에 독립적인 시각적 클라이언트를 결합합니다.

1. 라우트 탐색

선택한 어댑터가 프레임워크의 라우트 소스를 읽습니다. Vue Router와 Nuxt는 라우터 레코드를 제공하고, 파일 기반 프레임워크는 빌드 통합을 통해 라우트를 제공하며, React Router는 라우트 객체를 받고, Next.js는 개발용 sidecar를 사용합니다.

2. 개발 런타임 시작

플러그인은 개발 서버가 실행되는 동안에만 작은 런타임을 주입합니다. 이 런타임은 라우트 정보, 보이는 탐색 대상, 페이지 제목과 준비 상태를 PageFlow 엔드포인트에 보고합니다.

3. 실제 페이지 렌더링

PageFlow는 동일 출처 애플리케이션 페이지를 제어된 iframe에서 엽니다. 선택된 페이지는 활성 상태를 유지하고, 배경 페이지는 제한된 썸네일 캐시에 캡처됩니다.

4. 탐색 감지

어댑터는 지원되는 프레임워크 링크, 동일 출처 앵커, 기록 변경, 리터럴 프로그래밍 대상과 명시적 탐색 힌트를 인식합니다. 클라이언트는 이 대상을 방향성 그래프 간선과 미리보기 핫스팟으로 바꿉니다.

5. 그래프 배치

LeaferJS가 캔버스를 렌더링합니다. 라우트 덱은 큰 경로 계층을 줄이고, 공간 인덱스는 뷰포트 작업을 제한하며, 큰 레이아웃은 Worker에서 실행될 수 있습니다.

프로덕션 빌드

PageFlow는 개발 전용입니다. 런타임 엔드포인트와 시각적 클라이언트는 프로덕션 출력에 주입되지 않습니다. 저장소의 프로덕션 출력 검사가 이 경계를 확인합니다.

안전 경계

미리보기 모드는 제어된 프레임 안에서 앵커 탐색과 폼 제출을 차단하지만 애플리케이션 초기화 부작용을 억제할 수는 없습니다. 로컬 또는 테스트 데이터를 사용하세요.