핵심 요약
RIDI의 프론트엔드 팀은 리스트 가상화와 스켈레톤 최적화, 그리고 필터링 로직 개선을 통해 6,000개 콘텐츠 페이지의 렌더링 부담을 대폭 줄이고 사용자 반응성을 개선했습니다.
구현 방법
- react-window 기반 리스트 가상화와 window 스크롤 동기화 구현
- SVG 기반 동적 스켈레톤 타일링으로 CPU 부하 감소 및 흰 화면 노출 최소화
- 필터링 로직을 Map으로 교체해 4초에서 0.5ms로 성능 대폭 개선
주요 결과
- 렌더링 성능 대폭 개선으로 모바일에서 반응성 향상
- 데이터 압축으로 페이로드 감소 및 네트워크 효율성 향상
