플러스프로젝트 배경
1) 문제점 - 생산라인 10개 이상의 게이지 차트를 동시에 30초 간격으로 업데이트할 때 React 리렌더링 성능 저하 — useMemo로 변경된 라인만 선택적 리렌더링하고, RadialBarChart의 animationDuration을 0으로 설정하여 애니메이션 부하 제거 - 히트맵 셀 클릭 드릴다운 시 불량 건 목록 API 호출이 히트맵 전체 리렌더링을 트리거하는 문제 — React.memo + 드릴
프로젝트 성과
실시간 불량률 게이지 모니터링 대시보드 구현
Recharts RadialBarChart로 생산라인별 불량률 게이지를 구현하고, Redis pub/sub 30초 갱신으로 실시간 데이터를 반영
불량유형×시간대 히트맵 시각화 설계
CSS Grid 기반 히트맵으로 불량 유형과 시간대의 교차 빈도를 색상 강도로 시각화, 클릭 시 해당 셀의 개별 불량 건 목록으로 드릴다운하는 인터랙티브 분석 UI 구현
드래그앤드롭 품질 검사 체크리스트 빌더 구축
HTML5 DnD API로 검사 항목 정렬 + 섹션 그룹핑을 지원하는 빌더 UI 구현, JSON 스키마로 템플릿 구조 직렬화하여 다중 생산라인에서 재사용 가능한 검사 프레임워크 설계
협력사 3축 품질 스코어카드 자동 계산 적용
납품불량률·납기준수율·대응속도를 0~100점으로 환산하여 A~D 등급 자동 분류, NestJS Scheduled Task로 월말 스코어 재계산 + 등급 변동 시 이메일 알림 트리거 구현
NestJS CQRS 기반 불량 신고 아키텍처 설계
신고 커맨드와 조회 쿼리를 CQRS 패턴으로 분리하고, 이벤트 소싱으로 접수→검토→포상/반려→지급 상태 전이 이력을 자동 기록하는 확장 가능한 도메인 이벤트 구조 설계
핵심 기능
품질 모니터링
생산라인별 실시간 불량률 게이지, 불량 유형 히트맵, 시간대별 추이 차트를 마스터-디테일 레이아웃으로 제공하는 모니터링 대시보드. 마스터-디테일(라인 목록↔상세) + 게이지 차트 + 히트맵 + 시계열 차트
진행 단계
스마트팩토리 품질 도메인 모델링 및 NestJS 아키텍처 설계
2025.11.
불량 신고·검사·협력사·모니터링 4개 도메인을 NestJS 독립 모듈로 분리, Prisma 16개 테이블 스키마 설계, Redis 캐싱 레이어 및 CQRS 커맨드/쿼리 분리 구조 수립
프로젝트 상세
1) 포트폴리오 소개 제조 현장의 QR 불량 신고, 품질 검사 체크리스트, 실시간 불량률 모니터링, 협력사 납품 품질 추적을 통합한 스마트팩토리 품질관리 플랫폼을 Node.js + NestJS + PostgreSQL + Redis 기반으로 설계·구현했습니다. 생산라인별 실시간 불량률 게이지 차트, 품질 검사 체크리스트 빌더, 협력사별 납품 품질 스코어카드, 불량 패턴 히트맵을 포함한 8개 핵심 모듈을 밝고
