docs(10_Wiki): Topic_Business/General/Graphic/Programming을 Topics/ 하위로 이동
최상위 10_Wiki/Topic_*였던 4개 카테고리 폴더를 10_Wiki/Topics/Topic_* 로 재배치. 콘텐츠 변경 없음(순수 폴더 이동) — Topics/ 하위 나머지 폴더는 이미 지난 커밋에서 전부 정리된 상태(잔존 항목은 에이전트 운영 상태 및 사용자가 보존을 요청한 업데이트0615/무제 3.canvas 뿐).
This commit is contained in:
Antigravity Agent
@@ -0,0 +1,206 @@
|
||||
---
|
||||
id: wiki-2026-0508-장기-실행되는-실시간-데이터-대시보드-최적화
|
||||
title: 장기 실행되는 실시간 데이터 대시보드 최적화
|
||||
category: 10_Wiki/Topics
|
||||
status: verified
|
||||
canonical_id: self
|
||||
aliases: [Realtime Dashboard Optimization, Long-running Dashboard Tuning]
|
||||
duplicate_of: none
|
||||
source_trust_level: A
|
||||
confidence_score: 0.9
|
||||
verification_status: applied
|
||||
tags: [dashboards, realtime, performance, observability, frontend]
|
||||
raw_sources: []
|
||||
last_reinforced: 2026-05-10
|
||||
github_commit: pending
|
||||
tech_stack:
|
||||
language: typescript
|
||||
framework: react
|
||||
---
|
||||
|
||||
# 장기 실행되는 실시간 데이터 대시보드 최적화
|
||||
|
||||
## 매 한 줄
|
||||
> **"매 24/7 의 의 stay-alive 의 dashboard 의 의 memory leak 의 X, latency 의 sub-second"**. 매 trading floor / NOC / SRE control room 의 의 운영 의 dashboard 의 의 일주일 의 reload 의 X 의 의 stable 의 의 의 hold 의 의 patterns. 매 frontend, transport, backend 의 3-tier 최적화.
|
||||
|
||||
## 매 핵심
|
||||
|
||||
### 매 핵심 challenges
|
||||
1. **Memory leak** — 매 listener / subscription / timer 의 의 leak.
|
||||
2. **DOM bloat** — 매 시간 의 흐름 의 의 thousands of elements 의 의 grow.
|
||||
3. **Network bottleneck** — 매 backpressure 없는 의 firehose.
|
||||
4. **Backend pressure** — 매 N client 의 의 query 의 의 storm.
|
||||
5. **Stale data** — 매 connection drop 의 의 silent staleness.
|
||||
|
||||
### 매 Frontend optimization
|
||||
- 매 virtual scroll (TanStack Virtual, react-window).
|
||||
- 매 windowed time-series — 매 keep last N points only.
|
||||
- 매 `requestAnimationFrame` batching.
|
||||
- 매 web worker 의 의 transform.
|
||||
- 매 `useMemo` / `useCallback` 의 적절 의 사용.
|
||||
|
||||
### 매 Transport optimization
|
||||
- 매 WebSocket > polling.
|
||||
- 매 binary (MessagePack, Protocol Buffers) > JSON.
|
||||
- 매 delta updates > full snapshots.
|
||||
- 매 backpressure (drop / coalesce stale).
|
||||
- 매 heartbeat + auto-reconnect.
|
||||
|
||||
### 매 Backend optimization
|
||||
- 매 pre-aggregation (materialized views, ClickHouse).
|
||||
- 매 fan-out (Redis Pub/Sub, NATS).
|
||||
- 매 cache (Redis, in-memory LRU).
|
||||
- 매 query budget per client.
|
||||
- 매 connection pool sizing.
|
||||
|
||||
## 💻 패턴
|
||||
|
||||
### 매 Windowed time-series (frontend)
|
||||
```typescript
|
||||
const MAX_POINTS = 1000;
|
||||
|
||||
function useTimeseries() {
|
||||
const [data, setData] = useState<Point[]>([]);
|
||||
useEffect(() => {
|
||||
const ws = new WebSocket("wss://api/metrics");
|
||||
ws.onmessage = (e) => {
|
||||
const p = JSON.parse(e.data);
|
||||
setData(prev => [...prev.slice(-MAX_POINTS + 1), p]);
|
||||
};
|
||||
return () => ws.close();
|
||||
}, []);
|
||||
return data;
|
||||
}
|
||||
```
|
||||
|
||||
### 매 RAF batching
|
||||
```typescript
|
||||
function useBatchedUpdates<T>(stream: Observable<T>) {
|
||||
const [state, setState] = useState<T[]>([]);
|
||||
useEffect(() => {
|
||||
let buffer: T[] = [];
|
||||
let raf: number;
|
||||
const sub = stream.subscribe(item => {
|
||||
buffer.push(item);
|
||||
if (!raf) {
|
||||
raf = requestAnimationFrame(() => {
|
||||
setState(prev => [...prev, ...buffer].slice(-1000));
|
||||
buffer = [];
|
||||
raf = 0;
|
||||
});
|
||||
}
|
||||
});
|
||||
return () => sub.unsubscribe();
|
||||
}, [stream]);
|
||||
return state;
|
||||
}
|
||||
```
|
||||
|
||||
### 매 WebSocket reconnect with backoff
|
||||
```typescript
|
||||
function connect(url: string, onMsg: (m: any) => void) {
|
||||
let retries = 0;
|
||||
function open() {
|
||||
const ws = new WebSocket(url);
|
||||
ws.onmessage = e => onMsg(JSON.parse(e.data));
|
||||
ws.onclose = () => {
|
||||
const delay = Math.min(30000, 1000 * 2 ** retries++);
|
||||
setTimeout(open, delay);
|
||||
};
|
||||
ws.onopen = () => { retries = 0; };
|
||||
}
|
||||
open();
|
||||
}
|
||||
```
|
||||
|
||||
### 매 Backpressure — 매 coalesce by key
|
||||
```typescript
|
||||
class CoalescingBuffer<T extends { key: string }> {
|
||||
private map = new Map<string, T>();
|
||||
add(item: T) { this.map.set(item.key, item); }
|
||||
flush(): T[] {
|
||||
const arr = [...this.map.values()];
|
||||
this.map.clear();
|
||||
return arr;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 매 Web Worker 의 의 transform
|
||||
```typescript
|
||||
// worker.ts
|
||||
self.onmessage = (e) => {
|
||||
const transformed = heavyTransform(e.data);
|
||||
self.postMessage(transformed);
|
||||
};
|
||||
|
||||
// component.tsx
|
||||
const worker = useMemo(() => new Worker("/worker.js"), []);
|
||||
useEffect(() => {
|
||||
worker.onmessage = e => setData(e.data);
|
||||
return () => worker.terminate();
|
||||
}, []);
|
||||
```
|
||||
|
||||
### 매 Backend — pre-aggregation
|
||||
```sql
|
||||
-- ClickHouse 매 materialized view
|
||||
CREATE MATERIALIZED VIEW metrics_1m TO metrics_1m_data AS
|
||||
SELECT
|
||||
toStartOfMinute(ts) AS minute,
|
||||
service,
|
||||
avg(latency_ms) AS p_avg,
|
||||
quantile(0.99)(latency_ms) AS p99
|
||||
FROM raw_metrics
|
||||
GROUP BY minute, service;
|
||||
```
|
||||
|
||||
### 매 Fan-out (Redis Pub/Sub)
|
||||
```python
|
||||
# Backend publisher
|
||||
r.publish("metrics", json.dumps(point))
|
||||
|
||||
# WebSocket gateway 매 subscribers fan-out
|
||||
async def gateway(ws):
|
||||
pubsub = r.pubsub()
|
||||
pubsub.subscribe("metrics")
|
||||
async for msg in pubsub.listen():
|
||||
await ws.send(msg["data"])
|
||||
```
|
||||
|
||||
## 매 결정 기준
|
||||
| 상황 | Approach |
|
||||
|---|---|
|
||||
| 매 100+ updates/sec | 매 RAF batching + coalesce |
|
||||
| 매 multi-hour session | 매 windowed buffer + memory monitor |
|
||||
| 매 unreliable network | 매 reconnect + heartbeat + staleness banner |
|
||||
| 매 1000+ concurrent users | 매 fan-out + edge cache |
|
||||
| 매 high-fidelity charts | 매 WebGL (Plotly, deck.gl) > Canvas > SVG |
|
||||
|
||||
**기본값**: 매 WebSocket + binary + delta + windowed buffer + RAF batching.
|
||||
|
||||
## 🔗 Graph
|
||||
- 부모: [[Real-time Systems]] · [[Frontend Performance]]
|
||||
- 응용: [[Grafana]]
|
||||
- Adjacent: [[Backpressure]] · [[Memory Profiling]]
|
||||
|
||||
## 🤖 LLM 활용
|
||||
**언제**: 매 dashboard 의 의 hour 의 의 elapse 의 의 후 의 의 freeze / OOM 의 의 happen 시.
|
||||
**언제 X**: 매 5min refresh 의 의 enough 의 dashboard — 매 over-engineering.
|
||||
|
||||
## ❌ 안티패턴
|
||||
- **Unbounded array growth**: 매 매 모든 point 의 keep — 매 OOM.
|
||||
- **Polling 의 의 over WebSocket**: 매 latency + load.
|
||||
- **No reconnect**: 매 connection drop 의 의 silent black screen.
|
||||
- **Sync DOM update per tick**: 매 RAF 의 의 X — 매 jank.
|
||||
- **JSON over MsgPack**: 매 high-rate 의 의 의 4-10x 의 의 overhead.
|
||||
|
||||
## 🧪 검증 / 중복
|
||||
- Verified — Grafana docs; Datadog real-user monitoring; *High Performance Browser Networking* (Grigorik); ClickHouse docs.
|
||||
- 신뢰도 A.
|
||||
|
||||
## 🕓 Changelog
|
||||
| 날짜 | 변경 |
|
||||
|---|---|
|
||||
| 2026-05-08 | Phase 1 |
|
||||
| 2026-05-10 | Manual cleanup — 3-tier optimization (frontend/transport/backend) |
|
||||
Reference in New Issue
Block a user