🎉 EJS 템플릿 분리 완성!
완료된 작업: 원본 HTML 파일을 EJS 템플릿으로 분리하여
header, top-menu, left-menu, footer를 모듈화했습니다.
| 구분 |
원본 HTML |
EJS 템플릿 (새 버전) |
| 파일 구조 |
단일 HTML 파일 (1,000+ 라인) |
모듈화된 EJS 템플릿 (5개 파일로 분리) |
| 재사용성 |
❌ 코드 중복 |
✅ 공통 컴포넌트 재사용 |
| 유지보수 |
❌ 어려움 |
✅ 모듈별 수정 가능 |
| 확장성 |
❌ 제한적 |
✅ 새 페이지 쉽게 추가 |
| 링크 |
원본 HTML 보기
|
EJS 템플릿 보기
|
📁 분리된 파일 구조
-
views/partials/header.ejs - HTML head, meta 태그,
CSS/JS 로드
-
views/partials/top-menu.ejs - 상단 메뉴, 로고,
네비게이션
-
views/partials/left-menu.ejs - 좌측 사이드바 메뉴
-
views/partials/footer.ejs - 하단 footer, 공통
스크립트
-
views/work-transfer-list.ejs - 메인 컨텐츠 영역
🔧 기술적 개선사항
- Router 기반 페이지 라우팅
- EJS 템플릿 엔진 활용
- 동적 데이터 바인딩 (title, menuId 등)
- 공통 JavaScript 함수 모듈화
- 하위 호환성 유지 (기존 기능 보존)
🚀 다음 단계
이제 다른 HTML 페이지들도 동일한 방식으로 EJS 템플릿으로 변환할 수
있습니다:
- 새 .ejs 파일 생성
- partials include 추가
- router에 새 경로 등록
- 동적 데이터 바인딩