1. 문제 개요
WebSquare 및 일반적인 웹 프로젝트에서 유효성 검사(validation)는 필수적인 절차이다. 그러나 다음과 같은 구조적 문제가 자주 발생한다:
- if문 다중 중첩 구조로 인해 가독성이 떨어짐
- 컴포넌트 ID, 조건, 메시지가 하드코딩되어 유지보수 어려움
- 동일한 조건 검사가 반복되고 있음에도 재사용이 불가능
- 검사 실패 시의 UI 반영 처리(붉은 테두리, focus 이동 등)가 중복 구현
2. 기존 방식의 문제점
if (ibx_userId.getValue() === "") {
com.win.alert("아이디를 입력해주세요.");
ibx_userId.addClass("validation_error");
ibx_userId.focus();
return true;
}
if (ibx_userPw.getValue().length < 8) {
com.win.alert("비밀번호는 8자 이상이어야 합니다.");
ibx_userPw.addClass("validation_error");
ibx_userPw.focus();
return true;
}
- 매번 같은 패턴의 로직을 복사·붙여넣기로 반복
- 새로운 항목 추가 시 동일한 구조 반복 → 유지보수 어려움
3. 개선 목표
- 유효성 검사 항목 정의를 데이터화하여 분리
- 실행 함수는 재사용 가능한 하나의 구조로 통일
- 오류 메시지 처리 및 UI 반영을 공통 처리
- ES6+ 문법을 통해 간결하면서도 확장성 있는 코드로 리팩토링
4. 전략 패턴 기반 유효성 검사 구조 (ES6+)
4.1 유효성 규칙 정의 (데이터 구조화)
const validationRules = [
{
component: ibx_userId,
condition: () => !ibx_userId.getValue(),
message: "아이디를 입력해주세요."
},
{
component: ibx_userPw,
condition: () => ibx_userPw.getValue().length < 8,
message: "비밀번호는 8자 이상이어야 합니다."
}
];
4.2 유효성 검사 실행 함수 (ES6+ 개선 + 주석 포함)
/**
* 전달된 유효성 규칙 배열을 순회하며 검사를 수행한다.
* 실패 시 메시지 출력, 컴포넌트 강조 및 focus 이동 처리까지 공통 적용.
*
* @param {Array} rules - 유효성 검사 규칙 배열
* @returns {boolean} - 모든 검사를 통과하면 true, 실패 시 false 반환
*/
const runValidation = (rules = []) => {
for (const { component, condition, message } of rules) {
if (typeof condition === 'function' && condition()) {
component.addClass("validation_error");
com.win.alert(message, () => component.focus());
return false; // 첫 실패에서 중단
} else {
component.removeClass("validation_error");
}
}
return true;
};
4.3 사용 예시
if (!runValidation(validationRules)) {
return; // 유효성 검사 실패 시 이후 로직 중단
}
// 유효성 통과 후 로직 실행
5. 주요 개선 효과 및 정리
항목 | 기존 방식 | 개선 방식 (전략 패턴 & ES6+) |
가독성 | 낮음 (중첩 if문) | 높음 (분리된 데이터 + 반복 처리) |
재사용성 | 없음 | 높음 (함수 및 규칙 재사용 가능) |
UI 일관성 | 불일치 가능 | 일관된 스타일 적용 가능 |
유지보수성 | 수정 시 반복 코드 수정 | 룰만 추가/변경하면 됨 |
6. 실무 확장 포인트
- 공통 유효성 검사 모듈로 정의해 전체 프로젝트에서 사용
- 오류 메시지를 다국어 코드 기반으로 처리 (com.msg.get("MSG_REQ_ID") 등)
- 인라인 메시지 출력, 툴팁, 토스트 등으로 메시지 표시 방식 분기 처리
- ValidationGroup 구조를 통해 화면별/로직별 validation 룰 분리 적용
- 필수 여부, 정규표현식 검사, 날짜 비교, selectbox 등으로 확장 가능