fetch API 사용 과 DTO의 기본생성자 Issue

회원의 정보를 수정하는 기능을 웹 브라우저에서 직접 테스트하다 문제를 발견했다.

 

 

 

첫번째 문제로

- 버튼을 눌렀을때 memberUpdate api로 mapping 되지 않고 주소창에 정보를 변경한 데이터들이 쿼리스트링으로 입력되있었다

곰곰히 생각해보다 개발자도구로 확인해봤더니 HTTP 요청이 get 요청으로 가고있었다.

 

분명 javascript의 fetchAPI를 사용해 버튼을 눌렀을때 PUT 요청으로 가도록 설정을 해놔서 뭐가 문제인가 싶었는데

 

form 태그가 문제였다. 

 

원래는 form태그를 사용하지않고 html 을 작성했는데 input 태그의 required 속성을 활성화 하기위해 오전에 form태그를 붙인게 문제였다,

form 태그에는 기본적으로 action 값이 get요청으로 활성화되어있고 form 태그의 액션값이 fecth() 보다 우선순위로 잡혀 PUT요청으로 가야할 요청이 GET 요청으로 가게되버린거다.

 

 

preventDefault()로 form의 value들이 submit될때의 event를 막아두는것으로 첫번째 문제는 해결됬다. 

 

---

 

두번째 문제는 여전히 회원 정보 수정에서 발생됬다. 

브라우저에서 JSON은 분명 잘 넘기고 있는데 서버에서 JSON을 제대로 받지 못하는 상황이 발생.

 

HttpMessageConversionException 이 발생했다;;

 

 

문제 해결을위해 컨트롤러를 다시 확인해보다 Conversion Error 기때문에 뭔가 DTO에 문제가 생겼는지 DTO를 확인해봤다.

 

최근 @Lombok 사용에 대해 여러가지를 알아보면서 

지양해야할 @Annotaiton 들을 공부하며 리팩토링을하며 DTO의 기본생성자를 만들어주던  @NoArgsConstructor를 삭제했나보다.. 

 

JSON 을 Java 객체로 변환해주는 Jackson 라이브러리는 기본 생성자가 필요하다

 

 

lombok을 활요해 기본생성자를 만들어줬다.