플러스
프로젝트 배경
1) 문제점 제조 현장의 물류 데이터가 1,000건 이상으로 증가하면서 기존 테이블 렌더링 성능이 저하됨 클라이언트 인증 방식으로 인해 페이지 진입 시 인증 플리커(화면 깜박임)가 발생함 재고·작업 지시 상태가 실시간으로 반영되지 않아 현장 담당자의 의사결정에 지연 발생 2) 프로젝트 목표 고성능 가상화 테이블: 1,000건 이상의 물류 데이터를 끊김 없이 렌더링 서버사이드 인증: Edge Mi
위시켓과 함께한 진행 과정
프로젝트 등록
React/Next기반 물류 관제 시스템 프론트엔드 개발 (재택근무)
2026.01.15.
프로젝트 완료
(주) 엠에스 오토텍프로젝트 성과
렌더링 성능 병목 해소
React Aria Table에서 TanStack Virtual로 마이그레이션해 1,000행 이상 렌더링 지연 제거
인증 플리커 완전 제거
Keycloak 서버사이드 인증 구조로 클라이언트 인증 플리커 0건 달성
불필요한 리렌더링 최소화
SSE 이벤트 타입 분리(stock-update / order-status)로 캐시 무효화 범위 최소화
핵심 기능
가상화 테이블
TanStack Table + TanStack Virtual로 1,000행 이상의 물류 데이터를 DOM 최소 마운트로 렌더링
진행 단계
요구사항 분석
2026.02.
물류 데이터 규모 및 실시간 처리 요건 파악
프로젝트 상세
1) 포트폴리오 소개 제조 현장의 자재 입출고, 재고 현황, 작업 지시를 실시간으로 추적하는 스마트 팩토리 물류 관리 시스템. 물류 담당자와 생산 관리자를 메인 타깃으로, 대용량 데이터 실시간 처리가 핵심인 B2B 내부 업무 플랫폼. 2) 작업 범위 Front-end 개발 (Next.js 16 App Router 기반) 서버사이드 인증 시스템 설계 (Keycloak Edge Middleware)
