레거시 JSP 관리자 화면을 모바일 대응으로 개선
목차
이메일 추가 및 기능 수정
JSP UI 작업은 레거시 환경에서 어떻게 사용성을 올릴 수 있는지 계속 고민하게 만듦.
테이블 레이아웃 개선
모바일에서 가로 스크롤 없이 보이게 하는 게 과제였음. 카드형 뷰로 폴백 처리함.
<%-- PC: 테이블 형태 --%>
<div class="admin-table-wrapper d-none d-md-block">
<table class="table">...</table>
</div>
<%-- 모바일: 카드 형태 --%>
<div class="card-list-wrapper d-md-none">
<c:forEach var="item" items="${list}">
<div class="card mb-2"><div class="card-body">...</div></div>
</c:forEach>
</div>
colspan 동적 처리
document.querySelectorAll('.auto-colspan').forEach(td => {
const cols = td.closest('table')
.querySelector('thead tr')
.querySelectorAll('th').length;
td.setAttribute('colspan', cols);
});
성능 최적화
| 항목 | 개선 |
|---|---|
| 이미지 lazy load | loading="lazy" 추가 |
| AJAX 조회 | 디바운스 적용 |
개발 원칙 정리
이 작업을 진행하면서 재확인한 원칙들:
작은 커밋: 변경 단위를 작게 유지해서 코드 리뷰와 롤백이 쉽게.
테스트 먼저: 변경 전 현재 동작을 파악하고, 변경 후 동일하게 동작하는지 확인.
문서 동기화: 코드가 바뀌면 관련 주석과 문서도 같이 업데이트.
| 원칙 | 이유 |
|---|---|
| 단일 책임 | 하나의 함수/클래스는 하나의 역할만 |
| 명시적 코드 | 영리한 코드보다 읽기 쉬운 코드 |
| 실패 우선 처리 | happy path보다 에러 케이스 먼저 설계 |
끝
댓글 0
첫 댓글 달아줘.