타입스크립트의 부재와 레거시 번들러로 인한 느린 빌드 속도, 그리고 구버전 라이브러리의 의존성 병목으로 인해 개발 생산성과 제품 안정성이 모두 저하되는 문제를 해결하기 위해 기존 키오스크 앱을 최신 기술 스택으로 마이그레이션하고 복잡한 전역 로직을 리팩터링했습니다.
상세 내용
1. 기능 구현
- Typescript + Vue 3 + Vite + Electron 기반 프로젝트 생성
- 모놀리식 스토어 및 API 모듈을 도메인별 분리
- 폴더 구조 기반 자동 라우팅 도입
- Electron IPC 타입 안전 브리지 구현
- 웹소켓 모듈화 및 스토어 연동
- 하드웨어 초기화 병렬 처리 구현
2. 성능 최적화
- Vue CLI(Webpack) → Vite 교체로 빌드 및 개발 서버 실행 시간 단축
- ESM 기반 트리 쉐이킹으로 번들 크기 감소
3. 코드 품질 개선
- JavaScript → TypeScript 완전 전환으로 런타임 오류 예방 및 IDE 자동완성 지원
- FSD 폴더 구조 도입, 컴포넌트와 비즈니스 로직의 관심사를 기능 단위로 명확히 분리하여 모듈 간 결합도 감소
- 하드웨어, 웹소켓, 전역 스토어 등 핵심 모듈을 개별적으로 테스트할 수 있게 되어 장애 발생 시 원인 범위를 모듈 단위로 좁혀 추적 속도 개선
- ESLint로 프로젝트 컨벤션 검사 자동화
