#validation
노트 6개
Frontend › Accessibility
접근 가능한 폼과 오류 처리모든 입력 칸에는 코드로 연결된 이름이 있어야 한다. label을 기본으로, 표처럼 일대일이 안 되는 곳은 aria-labelledby, 보조 설명은 aria-describedby로 잇고, 묶음은 fieldset·legend로 준다. 검증은 서버와 클라이언트를 함께 두고, 오류는 알리고·데려가고·다시 제출하게 하는 세 단계로 복구시킨다. WCAG 2.2의 중복 입력 금지와 인지 테스트 없는 인증까지 다룬다.
Frontend › Web
더 나은 폼을 만드는 팁폼 사용성은 사용자의 통제권을 지키고 노력을 줄이는 데서 나온다. 묻는 칸 줄이기, 짧은 라벨과 한 열 배치, 브라우저 기본 동작 존중, 모바일 키보드(inputmode), 보이는 검증 메시지, 커서·포커스를 빼앗지 않는 입력 처리, 그리고 기기·사람·데이터로 폼을 시험하고 측정하는 법을 정리한다.
Frontend › Web
제약 검증: required·pattern·ValidityState브라우저 내장 검증은 HTML 속성(required·type·minlength·pattern·min·max·step)으로 켜고, CSS 의사 클래스(:invalid·:user-invalid)로 보여 주고, Constraint Validation API(ValidityState·setCustomValidity·checkValidity·reportValidity)로 넓힌다. pattern이 v 플래그로 컴파일되는 점, 빈 값은 pattern 검사를 하지 않는 점, 언제 오류를 띄울지, 서버 검증이 왜 따로 필요한지를 정리한다.
Backend › Django
Django Form과 ModelFormDjango Form으로 입력 폼 렌더링과 유효성 검사를 자동화하고, ModelForm으로 모델 필드를 재사용해 생성·수정 로직을 단순화한다.
Backend › NestJS
NestJS DTO와 Validation요청 바디를 DTO 클래스로 정의하고 class-validator와 ValidationPipe로 자동 검증하는 패턴, 회원가입 구현 예.
Backend › NestJS
NestJS Exception Filter와 Pipe예외를 일관된 응답 형식으로 바꾸는 Exception Filter와, 들어오는 값을 변환·검증하는 Pipe.