알라딘 (관리자 페이지)
VB6 레거시 백오피스를 Next.js 기반 웹 애플리케이션으로 전환
2024.07 - 2024.12
Next.jsReactTypeScriptReact QueryReact Hook FormZod
프로젝트 개요
알라딘에서 기존 VB6로 개발되어 있는 백오피스 프로그램을 웹 형태로 재개발하는 프로젝트였습니다.
Frontend 4명, Backend 2명으로 구성된 팀에서 약 6개월간 레거시 시스템을 모던 웹 기술 스택으로 전환했습니다.
기술적 도전과 해결
1. 대용량 데이터 렌더링 최적화
25,000건의 응답 데이터로 인해 렌더링 속도가 심각하게 저하되는 문제가 발생했습니다.
가상 스크롤(Virtual Scroll) 로직을 도입하여 화면에 보이는 영역만 렌더링하도록 최적화한 결과,
렌더링 속도를 95% 단축하는 성과를 달성했습니다.
2. 타입 안전성 강화
React Hook Form과 Zod를 활용하여 폼 데이터의 타입 안전성을 보장하고,
런타임 유효성 검사를 통해 데이터 무결성을 확보했습니다.
3. 코드 품질 개선
- 매직넘버 상수화, 네이밍 컨벤션 통일, TODO 코멘트 정리로 코드 가독성 및 유지보수성 증대
- 수백 건의 Pull Request 병합 및 코드 리뷰 참여를 통해 개발 표준 워크플로우 정착
- 공통 API 추가로 모듈 간 의존성 최소화
성과
- 성능 대폭 개선: 가상 스크롤 도입으로 대용량 데이터 렌더링 속도 95% 단축
- 업무 효율성 향상: 주문 처리 자동화 및 재고관리 시스템 개선으로 운영 효율성 증대
- 시스템 안정성 강화: 예외 처리 로직 보강 및 타입 안전성 확보로 운영 오류 감소
- 레거시 모더나이제이션: VB6 → Next.js 전환으로 유지보수성 및 확장성 확보
- 팀 협업 문화 정착: 코드 리뷰 및 PR 프로세스를 통한 개발 표준 워크플로우 구축
주요 기능
- ✓VB6 레거시 시스템을 모던 웹 기술로 전환
- ✓가상 스크롤 적용으로 대용량 데이터 렌더링 성능 95% 개선