운영 분석 대시보드 프론트엔드 엔지니어
데이터 10만 건 대시보드, 연산과 렌더링 중 어디가 병목일까요?
메인 스레드 점유, Worker 전달 비용, React 리렌더링과 DOM 노드 수 문제를 구분해 병목에 맞는 해결책을 고릅니다.
상황 배경
수만 건의 이벤트 로그를 검색하고 정렬하는 대시보드입니다. 정렬할 때마다 검색창 입력이 멈추고, 연산을 Worker로 분리한 뒤에도 결과 행을 한꺼번에 화면에 그리면 스크롤과 입력이 심하게 버벅입니다.
설계 제약 조건
- 추측으로 최적화하지 않고 실제 병목 구간을 먼저 구분합니다.
- JavaScript 정렬 연산 시간과 React 렌더링·브라우저 레이아웃 비용을 구분합니다.
- Worker 도입 시에는 내부 계산 시간뿐만 아니라 데이터 직렬화·전달 비용까지 포함해 판단합니다.
- 현재 실험실에서는 정렬·실행 위치와 100행 페이지네이션을 직접 확인하며, 가상화(Windowing)는 설계 원리로 비교합니다.
각 선택지의 예상 결과와 트레이드오프를 비교하는 설계 연습 시나리오입니다. 서비스 요구사항에 따라 다른 선택도 가능하며, 연결된 코드 실습은 아래 링크에서 바로 실행해 볼 수 있습니다.
질문 1 / 3
무거운 정렬 함수를 Promise로 감쌌을 때
입력 핸들러에서 대용량 배열을 정렬하느라 화면이 멈추는 상황입니다. 실행 시점을 미루는 것과 실행 스레드를 분리하는 것의 차이를 판단해야 합니다.
Promise.then 안에 정렬 코드를 넣으면 메인 스레드 블로킹이 사라질까요?
1 / 3