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

id, title, category, status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, verification_status, tags, raw_sources, last_reinforced, github_commit, tech_stack

id	title	category	status	canonical_id	aliases	duplicate_of	source_trust_level	confidence_score	verification_status	tags	raw_sources	last_reinforced	github_commit	tech_stack
wiki-2026-0508-장기-실행되는-실시간-데이터-대시보드-최적화	장기 실행되는 실시간 데이터 대시보드 최적화	10_Wiki/Topics	verified	self	Realtime Dashboard Optimization Long-running Dashboard Tuning	none	A	0.9	applied	dashboards realtime performance observability frontend		2026-05-10	pending	language framework typescript 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)

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

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

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

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

// 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

-- 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)

# 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)