서버·클라이언트 상태 분리
TanStack Query로 서버 상태(센서·기상)를 캐싱·동기화하고, Zustand로 UI 상태를 분리해 책임을 명확히 했습니다.
Why This Way?
하나의 상태 라이브러리로 모든 것을 다루면 캐시 무효화·리렌더링 경계가 모호해집니다. 두 영역을 분리해 디버깅과 확장이 쉬워졌습니다.
삼성물산SEMS
연돌 상태 모니터링
실시간 관제 플랫폼
42개 층 IoT 센서와 기상청 API를 결합해, 건물 압력 변화를 실시간으로 시각화하는 관제 플랫폼입니다.
핵심 설계 전략
실시간성과 가독성을 동시에 만족시키는 구조 설계
대량의 센서 데이터를 끊김 없이 받아 처리하면서도, 사용자가 즉시 이상을 인지할 수 있는 정보 구조로 변환했습니다.
WebSocket 기반 실시간 처리
폴링 대신 WebSocket으로 압력 변화·이상 알림을 푸시 받고, 부분 업데이트만 화면에 반영합니다.
Why This Way?
주기 폴링은 변화 없는 시점에도 트래픽이 발생합니다. 푸시 모델로 전환해 네트워크와 렌더링 비용을 함께 줄였습니다.
ECharts 인스턴스 재사용
42개 층 압력 프로파일을 데이터 샘플링과 인스턴스 재사용으로 그려, 매 갱신마다 차트를 재생성하지 않습니다.
Why This Way?
AI가 생성한 초안 코드에서 메모리 누수를 발견하고, dispose 시점을 직접 설계해 장시간 운영 안정성을 확보했습니다.
Mock / Server 모드 분리
MSW 기반으로 Mock과 Server 모드를 토글해 백엔드 의존 없이도 UI 개발과 시연이 가능하도록 환경을 분리했습니다.
주요 화면
운영자가 한 화면에서 즉시 판단할 수 있도록
복잡한 센서 수치 대신, 흐름·이상·조치를 동일한 화면에서 이어갈 수 있도록 6개 영역의 대시보드를 설계했습니다.
탭을 눌러 화면을 전환해보세요
Next Project
Gatsby · React · GraphQL
제이에이치솔루션 홈페이지 리뉴얼