아키텍처
구조적 UI(DOM)와 고연산 UI(Canvas/GPU)를 나누고, 무거운 연산은 메인 스레드 밖 Wasm 으로 보냅니다.
영역별 담당
| 영역 | 렌더링 | 연산 | 코드 |
|---|---|---|---|
| 상단 바 · 좌측 메뉴 | 엣지 Streaming SSR (DOM) | — | components/shell.tsx |
| 주문 입력 | SSR DOM + Qwik 신호 | Wasm: 호가·밴드·한도·Luhn 검증, HMAC-SHA256 | components/order-form.tsx, core/src/order.rs |
| 체결 내역 (10만 건) | 가상화 DOM (보이는 행만) | Wasm: 필터 + 다중 정렬 → 순열 | engine/grid.ts, core/src/query.rs |
| 실시간 차트 | 단일 canvas, WebGPU (WebGL2 대체) | Wasm: 시세 갱신 + 정점 정규화 | engine/chart.ts, core/src/market.rs |
데이터 경로
<head>의preload가core_logic.wasm을 받기 시작하고, 메인 스레드가compileStreaming으로 컴파일한 모듈을 워커에 넘깁니다.- 워커가 Wasm 인스턴스를 만들고 10만 행을 생성해 컬럼별
SharedArrayBuffer에 복사합니다. - 정렬·필터 요청은 메시지 하나로 가고, 결과 순열은 공유 버퍼 이중화(슬롯 0/1)로 돌아옵니다.
- 차트는 rAF 마다 다음 프레임을 요청하고, 워커가 공유 버퍼에 쓴 정점을
writeBuffer로 GPU 에 올려 그립니다.
cross-origin isolation(COOP/COEP)이 없는 환경에서는 같은 데이터를 ArrayBuffer 전송(transfer)으로 주고받습니다. 대시보드의 “렌더링 단계” 패널이 어느 경로로 돌고 있는지 표시합니다.