프로젝트 개요

• 공장의 설비 데이터를 실시간으로 수집 및 시각화하는 대시보드 웹 애플리케이션 개발.
• 주요 데이터: 공구 사용량, 생산 정보, 생산 이력 등.

주요 역할 및 성과

• MQTT를 활용해 100ms 주기로 실시간 수신되는 설비 데이터를 프론트엔드에서 직접 처리하고, 이를 실시간 차트로 시각화하여 사용자에게 빠르고 직관적인 데이터 경험 제공.
• GraphQL 및 GraphQL Subscription을 활용해 생산 이력 Grid와 알림 UI를 실시간으로 업데이트.
• JWT 기반 사용자 인증 및 권한 관리 구현으로 관리자 전용 페이지 제공.
• Polling 방식으로 특정 데이터를 최신 상태로 유지
• 기간별(년, 월, 일) Grid 및 Chart 구현.
• 로그인 후 사용자 맞춤형 설비 선택 레이아웃을 구현해 사용자 경험 향상.

트러블슈팅 및 문제 해결

1. 실시간 차트 렌더링 중단 문제:
   • 문제
     • 화면 최소화(Fade out) 후 복귀 시, SetTimeout 함수가 작동을 멈추며 MQTT로 받은 데이터가 쌓여 화면 복구 시 데이터 과부하로 화면이 먹통이 되는 현상 발생.
   • 고민
     • 먼저 SetTimeout 재귀 호출 로직 최적화를 고민.
     • 두번째로, Web Worker를 활용해 데이터 처리와 렌더링을 브라우저 메인 스레드와 분리할 지 고민
     • 마지막으로, 일정 주기로 새로고침을 실행해 데이터를 초기화할 지 고민.
   • 해결 방법
     • 호출 로직 최적화 후, 화면 상태를 고려하여 주기적 새로고침 방식을 선택. 이는 유저가 화면을 보지 않는 상황에서 실시간 업데이트의 필요성이 낮다는 점을 기반으로 결정.
   • 성과
     • 과도한 데이터 처리 문제를 해결하고, 안정적으로 실시간 데이터를 유지.
2. 진입화면 데이터 불일치 문제:
   • 문제
     • 공장 이동 시 이전 공장의 Polling 요청이 유지되어 잘못된 데이터가 화면에 표시되는 문제 발생.
   • 고민
     • 기존 Polling 요청이 취소되지 않고 남아 있어서, 화면 이동 시 취소 처리.
   • 해결 방법
     • AbortController를 사용하여 페이지 이동 시 이전 요청을 취소하는 로직을 구현.
   • 성과
     • 데이터 일관성을 유지하며, 정확한 화면 전환을 보장.
3. 사이드 메뉴 Deps 에 따른 기능 문제:
   • 문제
     • 초기 1~2 Depth 기준으로 배열 방식으로 구현된 메뉴가 3 Depth 이상 확장됨과 동시에 새로운 기능들이 추가되어 기존 기능이 비정상으로 작동.
   • 고민
     • 메뉴별 상태 관리를 단순 배열에서 Object 기반으로 변경.
     • UI 라이브러리 도입 여부 검토.
   • 해결 방법
     • 메뉴 항목별 isOpen 속성을 추가해 상태를 세분화하고, 동적으로 상태를 관리하도록 로직 개선.
   • 성과
     • 복잡한 다단계 메뉴도 정상적으로 작동하며, 유지보수성을 향상.

성과

• 실시간 데이터 처리 및 UI 효과로 사용자 경험 개선.
• 안정적이고 일관된 데이터 관리를 통해 시스템 신뢰도 확보.