프로젝트 소개
사내 보안 장비 솔루션(HX, NX, EX 등)의 이벤트를 통합 트래킹하는 서비스입니다. 장비별 위협 현황을 시각화하고 효율적인 보안 모니터링을 지원합니다.
핵심 기술 및 의사 결정 과정
주요 기술 스택
Front-End
ReactTypeScriptStyled ComponentsRedux ToolkitTanstack QueryApexCharts
트러블슈팅
다이나믹 임포트로 초기 번들 사이즈 최적화
문제
ApexCharts 등 차트 라이브러리를 포함한 번들 전체가 초기 로딩 시 한꺼번에 다운로드되어 초기 진입 속도가 느렸습니다.
해결
차트 컴포넌트에 다이나믹 임포트를 적용해 코드 스플리팅을 진행하고, 해당 페이지에 진입할 때만 로드되도록 분리했습니다.
결과
초기 번들 용량을 400KB 내외로 줄여 초기 로딩 속도를 개선했습니다.
Tanstack Query 캐싱으로 페이지네이션 중복 호출 제거
문제
페이지네이션 테이블에서 앞뒤 페이지를 오갈 때마다 동일한 데이터를 반복 호출하여 불필요한 네트워크 트래픽이 발생했습니다.
해결
Tanstack Query를 도입하고 queryKey에 페이지 번호를 포함하여 페이지별 캐싱을 적용했습니다. 이미 조회한 페이지는 캐시에서 즉시 반환하도록 구성했습니다.
결과
네트워크 트래픽 30% 이상 감소, 페이지 이동 시 즉각적인 UI 반응으로 사용성이 개선되었습니다.