피드로 돌아가기
Dev.toFrontend
원문 읽기
홈랩 대시보드를 단일 HTML 파일로 구축해 배포 명령을 1줄로 단순화하고 1,100줄 유지보수성 확보
Building a Homelab Dashboard in One File — The Design and Dilemmas of a Single-file SPA
AI 요약
Context
홈랩 환경에서 대시보드를 구축할 때 React + Vite나 Next.js 같은 현대적 프레임워크를 도입하면 빌드 파이프라인 의존성이 증가한다. node_modules 손상, 락 파일 불일치, 경로 오류 등으로 인한 배포 실패 위험이 커진다. 24/7 운영되는 홈 서버에서는 이런 복잡성이 관리 부담이 된다.
Technical Solution
- 단일 HTML 파일 SPA 구조 도입: Vue와 Chart.js를 CDN에서 로드하고 Flask 백엔드만 동일 오리진으로 제공
- 뷰 조직화로 유지보수성 확보: HTML과 JavaScript에서 ID 기반 뷰 영역을 구분하고 showView(name) 함수로 display 속성 토글
- localStorage를 활용한 상태 보존: 페이지 새로고침 후에도 현재 보고 있던 뷰 유지
- 비동기 처리를 모달 대화상자로 시각화: 16단계 봇 생성/삭제 작업의 진행 상황을 fetch + 120ms 지연 애니메이션으로 표현
- 빌드 단계 제거: 타입스크립트, 컴포넌트 아키텍처, 자동화 테스트 미도입으로 파일 1개로 완결
Key Takeaway
홈랩 같은 단일 사용자 환경에서는 완벽한 개발자 경험보다 배포 단순성과 런타임 안정성이 우선될 수 있다. 2,000줄 미만 규모의 개인 프로젝트에서는 빌드 파이프라인 없이 CDN 의존성만으로 충분한 기능성을 달성할 수 있다.
실천 포인트
홈랩이나 소규모 팀 내부 도구를 구축하는 상황에서 CDN 기반 단일 파일 SPA 패턴을 적용하면 배포를 cp 명령 1줄로 단순화하고 배포 실패 위험을 줄일 수 있다. 이 방식은 파일이 약 2,000줄을 넘거나 여러 개발자가 편집하기 전까지는 의존성 관리 오버헤드 없이 기능 개발에만 집중할 수 있게 한다.