StockHolmes · 2025.01

StockHolmes는 현대 오토에버 모빌리티 SW 스쿨에서 진행한 WMS 구현 프로젝트로, 물건의 입고부터 적재, 출고까지의 관리 기능을 구현한 웹 서비스입니다.

(※ 현재는 배포되지 않은 프로젝트입니다.)

😀 개발 인원

프론트엔드:
- WMS: React.js, css module, typescript, axios, tanstack query, zustand
- 작업자 앱: React.js, PWA, typescript, tailwind
백엔드: Spring Boot, Spring Data JPA, MySQL, redis
배포: AWS (EC2, S3, RDS, Route 53), Docker, Jenkins

StockHolmes 프로젝트에서는 UI/UX의 높은 반응성을 프론트엔드의 핵심 목표로 삼았기 때문에, UI 기획 단계에서부터 Suspense와 ErrorBoundary 영역을 미리 설계했습니다.

차트 구현을 위해 Nivo 패키지를 사용했는데, 이로 인해 번들 사이즈가 약 1,000KB까지 증가했습니다. 이를 최적화하기 위해 Nivo를 사용하는 컴포넌트를 lazy import 방식으로 분리하여, 번들 사이즈를 약 500KB까지 줄일 수 있었습니다.