[JavaScript + WebSquare] 유효성 검사 로직의 범용화와 전략 패턴 기반 설계 (ES6+)

2025. 5. 15. 18:00·Front-end/vanilaJS(+jQuery)
목차
  1. 1. 문제 개요
  2. 2. 기존 방식의 문제점
  3. 3. 개선 목표
  4. 4. 전략 패턴 기반 유효성 검사 구조 (ES6+)
  5. 5. 주요 개선 효과 및 정리
  6. 6. 실무 확장 포인트

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 등으로 확장 가능
  1. 1. 문제 개요
  2. 2. 기존 방식의 문제점
  3. 3. 개선 목표
  4. 4. 전략 패턴 기반 유효성 검사 구조 (ES6+)
  5. 5. 주요 개선 효과 및 정리
  6. 6. 실무 확장 포인트
'Front-end/vanilaJS(+jQuery)' 카테고리의 다른 글
  • [jQuery + WebSquare] table-row 구조 깨짐을 유발하는 hide()/show()의 문제와 구조적 개선
gapjin
gapjin
다양한 관점으로 기술에 대한 이해를 하기 위해 노력하고 전달 드립니다.
  • gapjin
    Valuable Insight
    gapjin
  • 전체
    오늘
    어제
  • 최근 글

  • 인기 글

    • All (15)
      • Back-end (5)
        • Java(+spring) (3)
        • SQL(+pl.sql) (1)
        • MyBatis (1)
      • Front-end (4)
        • WebSquare (2)
        • vanilaJS(+jQuery) (2)
      • IDE (1)
      • Essay (5)
  • hELLO· Designed By정상우.v4.10.3
gapjin
[JavaScript + WebSquare] 유효성 검사 로직의 범용화와 전략 패턴 기반 설계 (ES6+)

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.