Stimulus를 활용한 클라이언트 측 유효성 검사 메시지 개선

본 개선 방안은 단일 CSS 클래스와 간단한 Stimulus 컨트롤러를 활용하여 구현됩니다.

메시지 표시 기본 원리

• CSS 클래스 추가: 유효성 검사가 필요한 input 요소를 포함하는 컨테이너에 input-with-validation과 같은 CSS 클래스를 추가합니다.
• :has() 및 ::after 활용: input:invalid 상태일 때 컨테이너 아래에 메시지를 표시하기 위해 다음과 같은 CSS 규칙을 사용합니다. css .input-with-validation:has(input:invalid)::after { content: "Please enter a valid value"; display: block; color: red; font-size: 0.8rem; margin-top: 0.25rem; } 이 방법을 통해 입력이 유효하지 않을 때 일반적인 오류 메시지가 즉시 나타나게 됩니다.

사용자 정의 메시지 표시

• data-error-message 속성 활용: ::after 의사 요소의 content 속성을 attr(data-error-message)로 설정하여 동적으로 메시지를 가져옵니다. css .input-with-validation:has(input:invalid)::after { content: attr(data-error-message); /* ... 기타 스타일 */ }
• Stimulus 컨트롤러 연동: input의 title 속성 값을 data-error-message에 할당하고, 필요한 CSS 클래스를 추가하기 위해 Stimulus 컨트롤러를 사용합니다. ```html
  ...

  javascript // controllers/input_with_validation_controller.js export default class extends Controller { static targets = [“input”] connect() { this.element.classList.add(“input-with-validation”) this.element.dataset.errorMessage = this.inputTarget.title } } ``` connect() 메서드에서 컨트롤러 요소에 input-with-validation 클래스를 추가하고, input 타겟의 title 속성 값을 컨테이너 요소의 data-error-message 속성에 할당합니다.

재사용성

이 제네릭 컨트롤러는 email, url 등 다양한 유형의 input 요소에도 재사용 가능합니다. input이 title 속성과 네이티브 HTML 유효성 검사 규칙을 가지고 있다면, 동일한 방식으로 사용자 정의 메시지를 표시할 수 있습니다.