2nd/10_Wiki/Topics/DevOps_and_Security/장기 실행되는 실시간 데이터 대시보드 최적화.md

---
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]]
- 변형: [[Streaming Dashboards]] · [[Observability Dashboards]]
- 응용: [[Grafana]] · [[Datadog]] · [[Trading Dashboards]]
- Adjacent: [[WebSocket]] · [[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) |