이전 포스팅
수정폼 -> update.js 호출
update.js 는 폼데이터를 json화 하여 /api/user{userid}로 전송
UserService는 UserRepository 로 해당 ID를 DB에서 찾아 객체에 저장(영속화)
영속화된 객체를 수정하면 DB에도 반영됨.
UserApiController는 update.js 에게 받은 객체를 UserService의 영속화를 이용해 수정.
이제 수정 시 값이 없거나 범위를 벗어나는 경우대비 유효성 검사를 수행하자. 회원가입 때 처럼 전처리와 후처리로 나뉜다.
유효성 검사
수정폼에서 필드 값의 누락은 없는지. 범위를 벗어나는 값은 없는지 유효성검사를 수행해야함.
-> 이는 프론트단 검증과 유효성검사(Validation)으로 수행한다.(전처리)
DB에서 해당 ID의 값을 찾아와서 이를 객체에 영속화하고 객체를 수정하여 Update를 진행한다. 이 때 해당 ID가 DB에 있는지 확인해야함.
-> 이것은 DB에서 수행.(후처리)
전처리 - 프론트단 검증
이름 필드를 꼭 입력받도록 required 조건을 추가했다.
그러나 제출의 button 타입은 위의 required 같은 조건이 무시된다.
제출버튼 update 함수 호출부분 삭제. 그러면 제출누르면 폼태그가 실행이 된다.
폼태그에서 onsubmit 속성 추가. 여기서 update 호출. onsubmit은 required 조건이 먹음.
제대로 프론트단에서 검증되는 모습이다.
그런데 이때 제대로 이름을 입력하면 제대로 update가 호출되지만 form 태그 특성상 action으로 넘겨주는 페이지가 없으며 자기 자신으로 돌아오게 된다.
따라서 form 태그의 redirect 특성을 막아줘야한다.
이를 위해 update에 event를 같이 넘겨준다.
호출되는 update.js 에서 event.preventDefault() 로 form태그 진행을 막아주면 제대로 아래 코드가 실행된다.
제대로 update가 호출된다. 이는 수정 후 /user/{userId} 로 이동한 모습이다.
과정을 보자면
form 입력 -> update 호출 -> /api/user/${userId}로 request전송
-> userApiController가 받아서 회원수정 후 CMRespDto 객체 반환 -> update가 이를 받은 후 /user/{userId}로 redirect 순서로 진행된다.
전처리 - 서버단 검증
폼을 입력하는 방식이 아닌 다른 방식으로 서버에 데이터를 전송할 경우를 대비해 서버단에서도 검증을 수행한다.
UserUpdateDto 의 name과 password 필드에 @NotBlank 어노테이션 추가
Ajax 통신이라 CMRespDto로 응답을 진행할 것. 따라서 새로운 Exception 클래스인 CustomValidationApiException 클래스를 생성한다.
ControllerExceptionHandler 에서는 CustomValidationApiException을 낚아채 CMRespDto로 응답하도록 한다.
UserApiController 에서는 검증에러가 존재하면 Exception을 터뜨리도록. 에러가 없다면 수정을 진행하도록 하였다.
update.js 를 수정하여 성공시 res를. 에러시 error 를 출력하도록 변경했다.
이 때 문제가 생긴다. 검증 에러에서 실패해 Exception이 터져 CMRespDto를 반환하더라도, 결과적으로는 상태코드 200번대로 제대로 응답하게 되어 콘솔에 성공을 출력하게 된다.
Exception이 터지면 Ajax에게 Bad_Request를 주어 실패를 출력하도록 해야한다.
ControllerExceptionHandler 에서 응답에 CMRespDto 와 함께 상태코드를 담아 전달하자.
400 번대 에러가 발생하며, 제대로 실패를 출력함을 확인할 수 있다.
이때 에러메시지는 responseJSON에담긴다.
이를 활용해 alert를 출력해보자.
error.responseJSON.data 의 자바스크립트 객체를 String JSON으로 변환하여 출력한다.
제대로 에러메시지가 출력되며.
검증 조건을 달성하면 성공적으로 넘어가게 된다.
후처리 - DB단
10번 유저를 수정하려 하는데 DB에 10번유저가 없다면?
userRepository.findById(10).get() 에서 10번 유저가 없어 영속화에서 문제가 생기게된다.
UserService에서 영속화 시에 해당 Id 몾찾으면 람다식을 활용해 CustomValidationException 을 반환함.
이 때 에러메시지로 "찾을 수 없는 Id입니다." 를 넘겨준다.
CustomValidationApi 생성자에 message만 사용하는 생성자를 새로 정의해준다.
이제 DB에 없는 id를 넘겨주면 CustomValidationException이 터질 것이고, Handler가 잡아서 CMRespDto를 반환하며, update.js 에 의해 alert가 출력될 것이다. 근데 현재 alert는 errorMap 의 data 출력하도록 구현되어 있어, 메시지만 넘겨주는 현재 Exception은 null을 출력한다.
우선 콘솔에 erorr를 찍어보자
responseJSON 의 data가 null이라 alert가 null을 출력한것이다.
CMRespDto 에서 data는 errorMap이나 기타 임의 데이터를 의미한다.
update.js 에서 responseJSON 의 data가 null이면 메시지를 출력하도록 변경하였다.
제대로 메세지가 출력되며 수정 시 존재하지 않는 Id에 접근하는 것을 막은 것을 알 수 있다.
