docs: finalized wiki integrity maintenance (v3.0 standard) - pruned 1400+ stubs and fixed 11k+ ghost links
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
---
|
||||
id: [[P-Reinforce]]-AUTO-BB908E
|
||||
id: [[P-Reinforce|P-Reinforce]]-AUTO-BB908E
|
||||
category: "10_Wiki/💡 Topics/Programming & Language"
|
||||
confidence_score: 0.90
|
||||
tags: [auto-reinforced]
|
||||
@@ -7,13 +7,13 @@ last_reinforced: 2026-04-20
|
||||
github_commit: "[P-Reinforce] Continuous Worker - 대규모 데이터 렌더링 및 가상화 최적화"
|
||||
---
|
||||
|
||||
# [[대규모 데이터 렌더링 및 가상화 최적화]]
|
||||
# [[대규모 데이터 렌더링 및 가상화 최적화|대규모 데이터 렌더링 및 가상화 최적화]]
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
> 대규모 리스트나 테이블을 렌더링할 때 발생하는 DOM 노드 폭증과 메모리 부족, 프레임 저하 현상을 방지하기 위해, 전체 데이터 중 현재 화면(Viewport)에 보이는 항목과 약간의 여분(Buffer)만을 동적으로 마운트하여 렌더링하는 성능 최적화 기법입니다.
|
||||
|
||||
## 📖 구조화된 지식 (Synthesized Content)
|
||||
**1. 대규모 렌더링의 성능 병목 원인** 수천, 수만 개의 항목(예: 10,000개 이상의 리스트)을 한 번에 렌더링하면 DOM 노드가 기하급수적으로 늘어나 브라우저가 멈추거나(Freezing), 레이아웃 계산 및 페인팅 작업이 매우 느려집니다. 또한 React의 재조정([[Reconciliation]]) 알고리즘이 모든 항목을 비교하려 하므로 CPU 오버헤드와 심각한 프레임 드랍이 발생하게 됩니다.
|
||||
**1. 대규모 렌더링의 성능 병목 원인** 수천, 수만 개의 항목(예: 10,000개 이상의 리스트)을 한 번에 렌더링하면 DOM 노드가 기하급수적으로 늘어나 브라우저가 멈추거나(Freezing), 레이아웃 계산 및 페인팅 작업이 매우 느려집니다. 또한 React의 재조정([[Reconciliation|Reconciliation]]) 알고리즘이 모든 항목을 비교하려 하므로 CPU 오버헤드와 심각한 프레임 드랍이 발생하게 됩니다.
|
||||
|
||||
**2. 가상화(Windowing/Virtualization)의 작동 원리 및 효과** 가상화는 전체 배열 중 현재 화면에 노출되는 항목만을 DOM에 마운트(렌더링)하고, 스크롤할 때마다 새롭게 보이는 항목을 생성하며 화면을 벗어난 항목은 언마운트하는 방식입니다. 이를 적용하면 10,000개의 항목이 있어도 실제 DOM에는 수십 개만 존재하게 되어 렌더링 소요 시간을 약 1,200ms에서 50ms 수준으로 단축하고 메모리 사용량을 최대 97%까지 절감할 수 있습니다.
|
||||
|
||||
@@ -35,9 +35,9 @@ github_commit: "[P-Reinforce] Continuous Worker - 대규모 데이터 렌더링
|
||||
- **정책 변화:** Programming & Language 분야의 자동 자산화 수행.
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
- **Related Topics:** [[React Performance Optimization]], [[재조정 (Reconciliation)]], [[불필요한 리렌더링 방지]]
|
||||
- **Related Topics:** [[React Performance Optimization|React Performance Optimization]], 재조정 (Reconciliation), [[불필요한 리렌더링 방지|불필요한 리렌더링 방지]]
|
||||
|
||||
- **Projects/Contexts:** [[장기 실행되는 실시간 데이터 대시보드 최적화]], 대규모 로그 뷰어 및 데이터 테이블 구현, 이커머스 무한 스크롤 상품 리스트
|
||||
- **Projects/Contexts:** [[장기 실행되는 실시간 데이터 대시보드 최적화|장기 실행되는 실시간 데이터 대시보드 최적화]], 대규모 로그 뷰어 및 데이터 테이블 구현, 이커머스 무한 스크롤 상품 리스트
|
||||
|
||||
- **Contradictions/Notes:** 50~100개 이상의 대규모 리스트나 무한 스크롤 환경에서는 가상화가 필수적이지만, 항목의 높이가 제각각인 가변 높이 항목(Variable height items)을 렌더링할 때는 렌더링 전 각 항목의 크기를 측정(Measurement)하는 단계가 필요하여 구현이 훨씬 복잡해집니다. 따라서 가급적 리스트 항목의 높이를 일정하게 설계하는 것이 성능과 구현 측면에서 훨씬 유리합니다.
|
||||
|
||||
|
||||
Reference in New Issue
Block a user