02 기본 앱

시작점

여러분은 build-workshop-v1에 있습니다(Module 00에서 선택) — 체크아웃은 필요하지 않습니다. 약 5분을 예상하세요. 모듈 00에서 시작한 워크숍 스택이 계속 실행 중이어야 합니다.

사전 조건: 모듈 00과 01 완료(스택 healthy, ClickHouse 시드 완료), 프런트엔드가 http://localhost:8080/에서 접근 가능.

왜

보지 못한 것은 확장할 수 없습니다. 웨어하우스에 데이터가 들어간 지금(모듈 01), 몇 분을 들여 앱의 구조를 이해하세요: 두 대시보드는 무엇을 위한 것인지, 프런트엔드·백엔드·데이터베이스가 어떻게 맞물리는지, AI 채팅 패널은 어디에 있는지. 만들 것이 없는 유일한 모듈이고, 그것은 의도적입니다 — 여기서 방향을 잡고, 이어지는 모듈에서 라이브 데이터, 에이전트, 옵저버빌리티로 앱을 확장합니다.

목표

Ops 대시보드가 무엇을 위한 것인지, Historical 대시보드가 무엇을 위한 것인지, 앱의 데이터가 어디서 오는지(모듈 01에서 ClickHouse Cloud에 시드한 과거 데이터, 모듈 03에서 CDC로 스트리밍하는 라이브 데이터)를 각각 한 문장으로 설명할 수 있게 됩니다.

Step 1 — Ops 대시보드 열기

frontend/

http://localhost:8080/을 여세요. 이것이 Ops 대시보드입니다: 실시간 운영 지표(최근 운행, 활성 zone, 준실시간 집계)를 위한 카드와 필터, 레이아웃입니다. 지금은 비어 있습니다 — 라이브 뷰는 모듈 03에서 CDC로 실시간 행을 스트리밍한 뒤에야 채워집니다. 모듈 01에서 시드한 과거 데이터는 다음의 Historical 대시보드에 나타납니다.

아래 스크린샷은 Use sample window 버튼을 적용한 Ops 대시보드로, 시드된 데이터로 채워진 레이아웃을 볼 수 있습니다 — 기본값은 라이브(오늘) 구간이며, 모듈 03에서 CDC를 시작할 때까지 비어 있습니다.

Step 2 — Historical 대시보드 열기

frontend/

http://localhost:8080/historical을 여세요. 이 대시보드는 과거 운행 데이터에 대한 넓은 범위 집계와 드릴다운을 위해 만들어졌으며 — 모듈 01에서 한 달치 운행 데이터를 ClickHouse Cloud에 시드했기 때문에 이제 렌더링됩니다. 그 달에 걸친 넓은 날짜 범위와 필터 컨트롤을 시도해 보고, 쿼리가 1초도 훨씬 안 되어 돌아오는 것을 확인하세요.

Step 3 — 채팅 패널 찾기와 데이터 흐름 따라가기

backend/

UI에서 AI 채팅 패널을 찾으세요(모듈 08에서 실제 모델에 연결합니다). 그다음 프런트엔드가 FastAPI 백엔드를 어떻게 호출하는지, 백엔드가 ClickHouse를 쿼리하도록 어떻게 연결되어 있는지 살펴보세요 — 백엔드가 가리키는 서비스는 모듈 01에서 연결하고 시드한 여러분의 Cloud 서비스입니다.

React front end  ->  FastAPI back end  ->  ClickHouse Cloud (connected + seeded in module 01)
                                        ->  ClickHouse-managed Postgres (operational source; created in module 03)

코딩 에이전트에게 분석 엔드포인트를 요약하도록 요청하세요:

Read the FastAPI backend and list each analytics endpoint, what it returns, and which table it reads from.

완료 확인 방법

• 두 대시보드를 모두 열었습니다: Historical 대시보드는 모듈 01에서 시드한 데이터로 렌더링되고, Ops (Live) 대시보드는 모듈 03에서 CDC를 시작할 때까지 비어 있습니다 — 정상입니다.
• 앱의 데이터가 어디서 오는지 말할 수 있습니다(모듈 01의 ClickHouse Cloud 과거 데이터 시드, 모듈 03의 라이브 CDC).
• 아직 모델에 연결되지는 않았지만 채팅 패널이 어디 있는지 알고 있습니다.

마무리

이제 앱에 대한 머릿속 모델이 생겼습니다: 두 개의 대시보드, FastAPI API, 매니지드 소스 Postgres, 그리고 연결을 기다리는 채팅 패널. 이후의 모든 모듈은 이 그림의 한 부분씩을 바꿉니다.

최종 상태

실행 중인 앱을 이해했습니다. Ops 대시보드로 실시간 행을 흘려보내려면 03 매니지드 Postgres CDC로 계속하세요.