120호. 실시간 유효성 검사를 통한 좀 더 편리한 UI free

2020-04-03

사용자가 조금 더 편리하게 웹사이트 / 모바일 앱을 이용할 수 있게 하는 것은 프론트 / 백엔드 모두 고민해야할 문제입니다.

그중에 사용자의 데이터를 입력 받아서 해당 데이터의 유효성을 검증하는 부분에 대해 다룹니다



위와 같은 입력폼이 있을 경우, 일반적으로 마지막 submit 을 기점으로 Request validation 을 수행합니다. 그리고 그 유효성검사를 통과하지 못할 경우 Front end 쪽에서 적절한 에러메세지를 표기하고 사용자로 하여금 올바른 데이터를 입력하도록 유도하곤 하죠.


하지만 특정 상황이나 UI 에서는 위의 방식과는 다른 방식이 필요하기도 합니다.

예를 들어서 [이메일 사용가능 여부] 같은 기능이겠지요.



보통 이렇게 Email 처럼 Unique 한 값이 담보되어야할 경우입니다.

이럴 경우 우리는 별도의 validate 를 만들어야 했습니다. 예를 들어서 이런 메서드를요.



비단 이메일 체크 기능 말고라도, 사용자의 입력을 실시간으로 체크하면서 적절한 error 메세지를 던져주면 사용자 입장에서 훨씬 편리한 사용자경험을 느낄 수 있습니다.

사용자 입력에 스로틀을 주고, 0.3초 정도 시간내 입력이 없으면 유효성 검사를 요청하는 등..별도의 submit 액션 없이, 입력한 값이 올바른 값인지 확인할 수 있으면 편리하겠죠.


그런데 우리는 이미 동일 혹은 유사한 유효성규칙을 정의했고,

해당 규칙을 재사용할수 없을까? 라는 고민을 하게 됐습니다. 아주 간단하게 이런 방법이 있었습니다.

모든 유효성 규칙별 Request 를 만들어주는 것이였습니다.



이렇게 말이죠.


하지만, 우리는 웹어플리케이션을 개발하면서 꽤 많은 Request 를 받을껍니다.

한두개 정도라면 규칙별로 이렇게 데이터 변동이 일어나진 않지만 유효성 규칙만을 재활용할 수 있는 메서드를 구현하면 되지만, 그렇게 해야하는 Request 들이 10~20개만 넘어갈 경우 우리는 … 소오름..



그래서 어떤 유효성검사인지를 클라이언트 측에게 받아서 적절한 검사인지 수행하는 글로벌 라우트를 만들어서 사용하고 있습니다.


그리고 이걸 공유하려고 조금 더 찾아봤는데!


https://github.com/proengsoft/laravel-jsvalidation


이런 패키지도 존재하더군요. 이것도 참고해보시면 도움이 될거라 생각됩니다.



라쉐프


정유찬


정유찬

PHP 와 라라벨을 사랑하는 개발자. 원래는 iOS 개발자였으나, 어찌된 영문인지 서버개발을 더 많이하게 된 장래희망 : (진짜)풀스텍 개발자인 일반 개발자입니다.