MAPS(실시간 자산관리시스템)

OVERVIEW/어떤 서비스인지와 목적

SK하이닉스 반도체 공장 내 5,200여 개 BLE AP와 자산의 실시간 위치를 도면 위에 표시하고, 운영자가 배치·이동·이상을 관리하는 웹 기반 모니터링 시스템. 공정 운영 효율성 향상과 자산 추적 정확도 개선이 목적이며, Frontend Developer로 참여했다.

ROOT CAUSE → FIX/만들면서 닥친 문제와 원인, 해결까지의 과정

23만 건 데이터 로딩이 5초로 사용자 체감 속도가 저하됐다. React DevTools Profiler로 불필요한 리렌더링 원인을 분석하고, React.memo·useCallback 적용 및 컴포넌트 분리·상태 범위 최소화, Fetch join + DB 인덱스 추가로 개선했다 (동일 조건 재측정값은 확보하지 못함). 도면 삭제·변경 시 자산 데이터 정합성이 깨지는 문제는 연관 관계와 예외 처리 흐름을 설계해 사전 차단했고, 해상도 변화에 따른 자산 위치 왜곡은 상대 좌표 기반 구조로 해결했다. 대용량 도면 이미지 업로드 타임아웃은 파일 최적화와 비동기 처리 구조로 개선했다.

STACK DECISION/사용한 기술과 그 이유

React + TypeScript — 복잡한 도면 기반 UI와 실시간 상태 관리
NGINX + Spring Boot — 엔터프라이즈 사내 인프라 기준 웹 서버 + API
Jenkins + Maven + SVN — 사내 CI/CD 및 소스 관리 표준 환경

RESULT/결과/성과

23만 건 데이터 로딩 지연의 원인(비효율적 조회 쿼리·불필요한 리렌더링)을 특정하고 Fetch join·DB 인덱스·React.memo·useCallback으로 개선했다 (동일 조건 재측정값은 확보하지 못함). 5,203개 BLE AP 실시간 모니터링 UI 안정화. 2025.03~07 SK하이닉스 실서비스 운영. 백엔드(Java/Spring) 팀과 API 스펙 협의 및 SVN 기반 팀 협업.