FRONTEND DEV

jQuery 실무 패턴: filter와 map으로 완성하는 폼 데이터 직렬화 및 유효성 검사

복잡한 엔터프라이즈 폼 UI에서 데이터를 효율적으로 제어하는 jQuery 메서드 체이닝 기법을 다룹니다. :visible 선택자부터 filter, map, join을 조합하여 스파게티 코드를 방지하고, 직렬화와 유효성 검사를 간결하게 처리하는 실무 노하우를 공유합니다.

📑 이 글에서 다루는 내용

• 1. :visible로 렌더링된 필드만 타겟팅하기
• 2. filter()를 이용한 데이터 정제 로직
• 3. map()과 join()을 활용한 선언적 직렬화
• 4. 실전 응용: 유효성 검사(Validation) 파이프라인
• 5. 가독성 튜닝: is()와 not()의 적절한 활용

1. :visible로 렌더링된 필드만 타겟팅하기

엔터프라이즈 환경의 폼 UI는 사용자 권한이나 상호작용에 따라 필드가 동적으로 숨겨지거나 나타나는 경우가 빈번합니다. 이때 단순히 $('input')으로 데이터를 수집하면 숨겨진 필드의 값까지 포함되어 로직 오류를 유발할 수 있습니다.

jQuery의 :visible 선택자는 현재 화면에 렌더링된 요소만 정확히 타겟팅합니다. type="hidden" 속성뿐만 아니라 CSS로 display: none 처리된 요소까지 자동으로 배제하므로, 사용자가 실제로 입력 가능한 데이터만 추출할 때 필수적입니다.

// 화면에 보이는 input 요소의 개수만 반환
$("input:visible").length;

2. filter()를 이용한 데이터 정제 로직

선택된 요소 집합(Collection)에서 특정 조건에 맞는 요소만 남겨야 할 때 filter() 메서드가 강력한 힘을 발휘합니다. 이는 반복문 내에서 if 문을 남발하는 것을 방지하고, 의도를 명확하게 드러내는 코드를 작성하게 돕습니다.

$("input:visible")
  .filter(function () {
    return $(this).val() === ""; // 값이 비어있는 요소만 필터링
  })
  .length;

위 코드는 화면에 보이는 입력 필드 중 값이 비어있는 필드만 골라냅니다. 반대로 유효한 값이 있는 필드만 처리하고 싶다면 val() !== "" 조건을 사용하여 데이터 노이즈를 제거한 순수한 집합을 얻을 수 있습니다.

3. map()과 join()을 활용한 선언적 직렬화

다수의 입력값을 콤마(,)로 구분된 문자열(CSV 형태)로 변환하여 서버로 전송해야 하는 요구사항은 매우 흔합니다. 이때 filter, map, join의 체이닝을 활용하면 복잡한 반복문 없이 우아하게 데이터를 직렬화할 수 있습니다.

var result = $("input:visible")
  .filter(function () {
    return $(this).val() !== ""; // 1. 유효한 값이 있는 요소만 선택
  })
  .map(function () {
    return $(this).val();        // 2. 요소에서 값(value)만 추출하여 매핑
  })
  .get()                         // 3. jQuery 객체를 순수 배열(Array)로 변환
  .join(",");                    // 4. 배열을 문자열로 결합 ("value1,value2")

이 패턴의 핵심은 .get()입니다. jQuery 객체 상태에서는 join()을 사용할 수 없으므로, 반드시 순수 자바스크립트 배열로 변환하는 과정이 필요함을 기억해야 합니다. 태그 입력 시스템이나 다중 선택 체크박스 처리 시 표준 패턴으로 활용하기 좋습니다.

4. 실전 응용: 유효성 검사(Validation) 파이프라인

앞서 다룬 filter()를 응용하면 필수 입력 항목을 검증하는 로직을 자동화할 수 있습니다. 일일이 ID를 지정하여 검사하는 대신, 빈 필드만 걸러낸 집합을 순회하며 사용자 피드백을 제공하는 방식입니다.

var emptyInputs = $("input:visible")
  .filter(function () {
    return $(this).val() === ""; // 빈 값 필터링
  })
  .get();

$(emptyInputs).each(function () {
  var title = $(this).attr("title");
  alert(title + "을(를) 입력하세요.");
  $(this).focus(); // 해당 필드로 포커스 이동
  return false;    // 첫 번째 오류에서 루프 중단(break 효과)
});

이 방식을 도입하면 폼 필드가 추가되거나 삭제될 때마다 유효성 검사 로직을 수정할 필요가 없습니다. 단일 파이프라인으로 전체 폼의 무결성을 검증할 수 있어 유지보수 비용이 획기적으로 절감됩니다.

5. 가독성 튜닝: is()와 not()의 적절한 활용

복잡한 콜백 함수 없이 단순한 상태 체크만 필요하다면, filter() 대신 is()나 not()을 사용하는 것이 가독성 측면에서 유리합니다.

// 하나라도 보이는 요소가 있는지 확인 (Boolean 반환)
if ($("input").is(":visible")) { ... }

// 숨겨진(hidden) 요소만 제외하고 선택 (jQuery 객체 반환)
var visibleInputs = $("input").not(":hidden");

단순한 상태 확인(Boolean)은 is를, 특정 조건의 배제는 not을, 그리고 로직이 포함된 상세한 데이터 정제는 filter를 사용하는 식으로 각 메서드의 역할에 맞게 코드를 분리하는 것이 클린 코드의 지름길입니다.