플러스프로젝트 배경
1) 예상 리스크 및 대응 계획 - 수백 개 설비 센서에서 30초 주기로 유입되는 시계열 데이터의 효율적 저장·조회를 위한 DB 파티셔닝 및 인덱싱 전략 설계 필요 - 라인·설비·기간 복합 필터 조건에서 Recharts 다중 차트 간 X축 줌 범위를 동기화하는 상태 관리 구조 설계 필요 - WebSocket 연결 단절 시 이벤트 유실 없이 실시간 알림을 복원하는 재연결 및 오프라인 큐 메커니즘 구현 필요
프로젝트 성과
센서 시계열 차트 다중 동기화 구조 구현
Recharts ZoomableAreaChart의 brush 상태를 상위 컴포넌트로 끌어올려 라인 내 3개 차트의 X축 줌 범위를 동기화하는 Lift State 패턴 적용
WebSocket 복원력 있는 실시간 알림 설계
Socket.io exponential backoff 재연결 + 오프라인 큐 패턴으로 네트워크 단절 시 이벤트 유실 없는 알림 수신 구조 구현
RBAC 3단계 이중 검증 파이프라인 구축
Express 미들웨어 체인(verifyJWT→requireRole→checkLineScope) 구현, PERMISSION_MAP 중앙화로 프론트·백 권한 정의 단일 소스 구조 설계
라인별 Drill-down 네비게이션 URL 상태화
React Router 중첩 라우트로 라인ID·필터 조건을 URL 파라미터로 관리, 브라우저 히스토리 기반 뒤로가기 시 이전 탐색 상태 복원 구조 구축
KPI 집계 Materialized View 설계
PostgreSQL Materialized View 3개로 라인별 일간·주간 KPI 사전 집계, 시계열 테이블 직접 집계 대비 조회 쿼리 단순화 및 인덱스 전략 수립
핵심 기능
설비 KPI 대시보드
전체 생산 라인의 가동률, 불량률, MTBF, 생산 수량을 한눈에 파악할 수 있는 실시간 개요 화면
진행 단계
설비 도메인 분석 및 DB 스키마 설계
2026.03.
생산 라인·설비·센서·이벤트 도메인 분석, PostgreSQL 테이블 14개 ERD 정의 및 시계열 데이터 파티셔닝 전략 수립
프로젝트 상세
1) 포트폴리오 소개 자동차 부품 제조 라인의 설비 가동률·불량률·온도/진동 센서 데이터를 실시간으로 수집·시각화하는 B2B SaaS 대시보드를 React + Node.js 기반으로 설계·구현. KPI 카드, 라인별 Drill-down 차트, RBAC 3단계 권한 구조, JWT 인증 API 11개를 포함한 MVP 웹 애플리케이션을 단독으로 구현. 2) 작업 범위 - 설비 KPI 대시보드: 전체 생산
