어드민 테이블 성능 개선
약 85초
대용량 데이터 테이블을 렌더링할 때 생긴 문제를 해결한 경험
인턴 프로젝트에서 관리자 페이지의 데이터 테이블에 3천 건을 한 번에 불러오다가 브라우저가 멈추는 현상이 발생했습니다. 처음에는 단순히 react-window로 가상화하면 해결될 것이라고 생각했지만, 기존 테이블 컴포넌트 구조를 변경해야 했기에 멘토에게 허락을 구했습니다. 하루 동안 작업한 결과, 가상화 적용 후 렌더링 시간이 1.8초에서 0.3초로 줄어들었습니다. 그러나 체크박스로 전체 선택할 때 버그가 발생하여 이 부분 수정에 반나절이 추가로 소요되었습니다.
실제 성능 수치를 먼저 측정하고 시작한 덕분에 개선 효과를 명확히 보고할 수 있었습니다. 어드민 UI는 사용자가 내부 직원이라도 느리면 불편하다는 것을 배웠습니다.
이 결의 특징
3천 건 데이터 테이블에서 브라우저가 멈추던 문제를 react-window 가상화로 풀어 렌더링 시간을 1.8초에서 0.3초로 줄이고, 전체 선택 체크박스 버그를 반나절 더 들여 고친 흔적이 있습니다.
이 결이 통하는 자리
실제 성능 수치를 먼저 측정하고 시작했다는 태도가 1.8초에서 0.3초라는 구체적 개선치와 함께 있을 때 통합니다. 내부 직원용이라도 느리면 불편하다는 인식이 담긴 자리에서 통하는 결이 보입니다.