DOCS/journey/troubleshooting/260116_admin_dashboard_frontend_module_separation.md

Admin Dashboard Frontend 모듈 분리 완료

날짜: 2026-01-16 작성자: admin 관련 파일:

• admin-dashboard/frontend/modules/containers.js
• admin-dashboard/frontend/modules/users.js
• admin-dashboard/frontend/modules/robeings.js
• admin-dashboard/frontend/app.js
• admin-dashboard/frontend/modules/system.js
• admin-dashboard/frontend/index.html

---

문제 상황

Monolithic 코드 구조

• app.js: 1132줄 (권장 300줄 초과)
• system.js: 493줄 (권장 300줄 초과)
• 사용자/로빙/컨테이너 관리 로직이 app.js와 system.js에 혼재

유지보수성 저하

• 기능별 코드 분산으로 수정 시 여러 파일 확인 필요
• 모듈화 부재로 재사용성 낮음

---

해결 방안

1. 모듈 분리

• modules/containers.js: 컨테이너 목록/재시작 로직 분리 (58줄)
• modules/users.js: 사용자 목록/통계 로직 분리 (58줄)
• modules/robeings.js: 로빙 목록/통계 로직 분리 (58줄)

2. 기존 코드 정리

• app.js:575-669: loadUsers(), loadRobeings() 함수 제거
• system.js:291-351: loadContainers(), refreshContainers(), restartContainer() 함수 제거
• index.html:24-26: 새 모듈 스크립트 추가

3. 파일 크기 개선

• app.js: 1132줄 → 585줄 (547줄 감소)
• system.js: 493줄 → 437줄 (56줄 감소)

---

구현 완료

• 커밋: 1f2247f - Frontend 모듈 분리 완료
• 배포: Gitea Actions 자동 배포 완료

---

추가 개선 (2026-01-16)

서비스 상태 로딩 속도 개선 (TDD)

• 문제: 서비스 상태 체크 API 응답 시간 109ms (첫 호출)
• 해결: 백엔드 캐싱 구현 (TTL 5초, 메모리 캐시)
• 효과: 캐시 히트 시 109ms → 21ms (약 5.1배 개선, 88ms 단축)
• 구현: SystemService.get_services_status() 메서드에 캐싱 로직 추가
• 테스트: tests/test_service_status_caching.py 작성 (TDD 방식)
• 실제 측정: curl로 첫 호출/캐시 히트 응답 시간 비교 확인

---

교훈

모듈 분리 효과

• 파일 크기 감소: app.js 547줄 감소로 가독성 향상
• 관심사 분리: 기능별 모듈로 수정 범위 명확화
• 재사용성 향상: 독립 모듈로 다른 프로젝트에서도 활용 가능

원칙 준수

• 각 모듈 300줄 이하 달성 (58줄)
• 기능별 모듈 분리로 유지보수성 향상
• diary.js, system.js 패턴과 일관성 유지

캐싱 최적화

• TDD 방식: 테스트 작성(Red) → 구현(Green) → 리팩터링
• 캐시 TTL: 5초로 설정하여 실시간성과 성능 균형 유지
• 메모리 캐시: 단순한 딕셔너리 기반 캐시로 오버헤드 최소화
• 실제 측정: API 직접 호출로 성능 검증 (첫 호출 109ms → 캐시 히트 21ms)