플러스프로젝트 배경
본 프로젝트는 대규모 센서 및 서버 로그 데이터를 효율적으로 관리하고, 실시간으로 시각화할 수 있는 모니터링 플랫폼을 구축하기 위해 시작되었습니다. 기존 시스템은 방대한 데이터가 한 번에 렌더링되면서 브라우저 성능 저하 및 프레임 드랍 문제가 발생하는 한계가 있었습니다. 이에 따라, 성능 최적화와 사용자 경험 개선을 동시에 달성할 수 있는 경량화된 프론트엔드 구조를 설계하는 것을
프로젝트 성과
실시간 데이터 렌더링 성능 최적화
TanStack Table과 Virtual 기술을 적용하여 수만 건의 데이터를 부드럽게 렌더링할 수 있도록 성능을 개선했습니다.
대규모 데이터 관리 효율성 향상
데이터 페이징, 컬럼 필터링, 가상 스크롤 구조를 도입하여 테이블 조회 속도와 안정성을 개선했습니다. 한 화면에서 더 많은 데이터를 빠르게 탐색할 수 있도록 UX 중심의 인터랙션 구조를 개발했습니다.
프론트엔드 구조 모듈화 및 유지보수성 개선
Svelte 기반으로 테이블·차트·상태 관리 모듈을 분리하여 컴포넌트 단위 재사용 구조를 구축했습니다. 그 결과 신규 기능 추가 시 개발 효율성과 협업 생산성이 향상되었습니다.
핵심 기능
TanStack Table 기반 테이블 코어 구조 구현
Row Selection, Infinite Scroll, Resize 등 TanStack Table 핵심 기능을 커스터마이징하여
대용량 데이터도 부드럽게 처리할 수 있는 테이블 코어 구조를 구축했습니다.
대용량 데이터도 부드럽게 처리할 수 있는 테이블 코어 구조를 구축했습니다.
진행 단계
기획서 분석 및 구조 설계
2023.08.
피그마로 전달받은 기획서를 기반으로 전체 화면 구조와 컴포넌트 구성을 검토했습니다.
유사 기능 단위를 분리해 재사용 가능한 구조로 정리하고, 데이터 흐름과 렌더링 방식을 정의했습니다.
유사 기능 단위를 분리해 재사용 가능한 구조로 정리하고, 데이터 흐름과 렌더링 방식을 정의했습니다.
프로젝트 상세
1) 포트폴리오 소개 본 프로젝트는 대규모 센서 및 서버 로그 데이터를 실시간으로 수집·시각화하는 웹 모니터링 플랫폼입니다. 기존 시스템의 비효율적인 렌더링 구조를 개선하고, 데이터 테이블 및 차트 렌더링 성능을 극대화하기 위해 Svelte 기반 프론트엔드 아키텍처를 구축하였습니다. 또한 TanStack Table과 TanStack Virtual을 중심으로, 수만 건의 데이터도 프레임 드
