[JavaScript + WebSquare] 유효성 검사 로직의 범용화와 전략 패턴 기반 설계 (ES6+)
·
Front-end/vanilaJS(+jQuery)
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.g..
[jQuery + WebSquare] table-row 구조 깨짐을 유발하는 hide()/show()의 문제와 구조적 개선
·
Front-end/vanilaJS(+jQuery)
1. 문제 개요HTML의 table, tr, td 등은 display 속성이 table, table-row, table-cell 등 특수한 값으로 구성되어 있다. jQuery에서 흔히 사용하는 hide()와 show()는 이 구조적 특성을 고려하지 않기 때문에, 다음과 같은 문제가 발생한다.hide() 호출 시 display: none 처리는 정상이나,이후 show() 호출 시 내부적으로 display: block 을 기본값으로 복원결과적으로 원래 구조였던 table-row, table-cell 등이 무너져 테이블 레이아웃이 깨짐WebSquare 기반 프로젝트에서는 , 등의 컴포넌트가 tr, td에 해당하므로 이러한 문제는 더욱 빈번하게 발생한다. 2. 기술적 배경 및 메서드의 동작 방식 분석jQuer..