모듈 간 의존성이 뒤엉켜 한 곳을 수정하면 다른 곳이 영향받는 문제가 반복되던 기존 키오스크 앱을 최신 기술 스택으로 마이그레이션하고 복잡한 전역 로직을 리팩터링했습니다.
상세 내용
1. 기능 구현
- Typescript + Vue 3 + Vite + Electron 기반 프로젝트 생성
- 모놀리식 스토어 및 API 모듈을 도메인별 분리
- 폴더 구조 기반 자동 라우팅 도입
- Electron IPC 타입 안전 브리지 구현
- 웹소켓 모듈화 및 스토어 연동
- 하드웨어 초기화 병렬 처리 구현
2. 성능 최적화
- Vue CLI(Webpack) → Vite 교체로 빌드 및 개발 서버 실행 시간 단축
- ESM 기반 트리 쉐이킹으로 번들 크기 감소
3. 코드 품질 개선
- JavaScript → TypeScript 완전 전환으로 런타임 오류 예방 및 IDE 자동완성 지원
- 기존 폴더구조는 의존성 방향을 강제하지 않아 동일한 문제가 재발할 수 있다고 판단 → FSD(Feature Sliced Design) 아키텍처 도입하고 기능 단위로 모듈을 분리해 모듈간 의존성 최소화
- 하드웨어, 웹소켓, 전역 스토어 등 핵심 모듈을 개별적으로 테스트할 수 있게 되어 장애 발생 시 원인 범위를 모듈 단위로 좁혀 추적 속도 개선
- ESLint로 프로젝트 컨벤션 검사 자동화
