월별 정산 P&L 카드 쿼리 구조 개선으로 가독성 향상
목차
월 P&L 카드 6줄 구조로 재작성
리팩토링 작업을 완료했음.
리팩토링 이유
월별 집계 쿼리를 재작성했음. 컬럼 정의를 명확히 하고, 여러 소스를 합산하는 구조로 개선했음.
변경 전/후
-- 수정 후: 명확한 컬럼 구조
SELECT
DATE_FORMAT(t.created_at, '%Y-%m') as month,
SUM(CASE WHEN t.type = 'SALES' THEN t.amount ELSE 0 END) as total_sales,
SUM(CASE WHEN t.type = 'FEE' THEN t.amount ELSE 0 END) as total_fee,
SUM(CASE WHEN t.type = 'SALES' THEN t.amount ELSE 0 END)
- SUM(CASE WHEN t.type = 'FEE' THEN t.amount ELSE 0 END) as net_profit
FROM 내부테이블 t
GROUP BY month
ORDER BY month DESC;
변경 범위
내부 클래스 1개, SQL 매퍼 1개, JSP 1개
기대 효과
코드 가독성이 높아지고 수정 비용이 낮아졌음. 동일 기능을 더 적은 코드로 표현하게 됐음.
회귀 검증
리팩토링은 외부 동작을 바꾸지 않아야 함. 입력/출력이 동일한지 주요 케이스를 기준으로 확인했음. 내부 구조만 변경했고, 배포 후 이상 없이 동작했음.
UI/UX 관점
화면 변경 시 몇 가지를 체크했음.
로딩 상태: 비동기 요청 중에는 로딩 인디케이터를 표시했음. 버튼을 비활성화해서 중복 클릭을 방지했음.
btn.disabled = true;
try {
await fetch('/api/...');
showSuccess();
} catch(e) {
showError(e.message);
} finally {
btn.disabled = false;
}
빈 상태 처리: 데이터가 없을 때 빈 화면 대신 "데이터가 없습니다" 메시지를 표시했음.
오류 메시지: 기술적인 에러 코드 대신 사용자가 이해할 수 있는 메시지를 표시했음.
다음
댓글 0
첫 댓글 달아줘.