20221128 TIL 유효성 검사를 어떻게 하면 좋을까?

 

회원가입, 로그인이 포함된 프로젝트를 진행하면서 유효성 검사를 어떻게 하면 좋을지에 대한 고민이 생겼다.

프론트엔드에서 글자수 제한 등 프론트가 백과 소통하지 않고 체크할 수 있는 부분은 큰 문제가 없었지만,

중복 id체크 등은 프론트 자체적으로 검증을 할 수 없고,

서버와 통신이 필요했기 때문에 어떻게 처리를 해서 에러메시지를 화면에 보여줄지 고민이 되었다.

 

저번 프로젝트를 진행할 때는 form data를 서버로 넘겼을 때 errorDTO를 사용해서 에러 코드를 받으면

에러 코드에 해당하는 메시지를 프론트에서 보여주게끔 작업을 했었다.

에러메시지를 서버에서 보내준 것을 프론트에서 화면에 그대로 보여주게 된다면

메시지를 수정하고 싶을 때마다 서버에서 수정해야되기 때문에 에러메시지를 사용하기 보다는

에러 코드를 사용하는 것이 더 바람직해보였기 때문이다.

 

그런데 아샬님께서 에러 코드를 사용하면 동시에 여러 개의 알림을 줄 수 없고,

백엔드와 프론트엔드가 완벽히 동시에 합을 맞추고 있어야하기 때문에 에러코드를 사용하기보다는

다른 방식을 사용하는 것을 추천해주셨다.

http://www.m-economynews.com/data/photos/20140417/art_1398423849.jpg

그렇다면 어떻게 유효성 검사를 하는 게 더 바람직한 방향일까?

 

유효성 검사를 할 때 고려할 점을 먼저 살펴보면,

프론트는 프론트대로 유효성 검사를 해야하고, 백엔드도 동일 로직으로 백엔드대로 더 포괄적으로 유효성 검사를 해야한다.

그리고 프론트쪽 유효성 검사는 UX를 위해 제공되는 것이기 때문에 입력값 변화에 따라 바로 피드백이 오는 것이 좋다.

 

이전 프로젝트에서 프론트 자체적으로 유효성 검사를 할 수 있는 글자수 제한 등은

프론트 측에서 값 변화에 따라 에러 메시지를 보여줬었지만,

id가 중복된 값인지 등은 submit을 했을 때만 유효성 검사 결과를 바탕으로 에러 메시지를 보여줬었다.

하지만 더 바람직한 방향은 POST요청을 받았을 때 백엔드 자체적으로 유효성 검사를 진행하고,

프론트에서 백엔드를 통해 유효성을 체크하기 위한 API를 또 하나 만들어서

입력값이 변할 때마다 프론트에서 서버를 통해 유효성을 체크할 수 있는 API를 보내서

(예를 들면 id중복은 GET /users?countOnly&username={username})

유효성 검사에 따른 에러 메시지를 보내는 방법이 있다.

 

POST요청을 할 때 유효성 검사를 하지 않고, 따로 API를 만드는 방식은

form을 submit하지 않아도 값의 변화만으로도 에러메시지를 보여줄 수 있다는 큰 장점이 있다.

 

어떻게 유효성 검사 결과에 따른 에러 메시지를 프론트에서 보여주면 좋을지 고민이 많았는데,

유효성 검사를 위한 API를 새롭게 만들면 된다는 좋은 팁을 얻을 수 있었다.

이번 프로젝트에서는 id중복 체크를 하는 API를 하나 만들어서 실시간으로 반영이 되게 작업을 해보려고 한다.

일단 생각할 수 있는 가장 좋은 방법으로 해보고, 뭔가 불편하고 좋은 방법이 아닌 것 같다면 더 좋은 방법이 없는지 조언을 구해보자.