프로젝트를 수행하던 도중, 삭제 기능 수행 후 다음과 같은 오류가 발생했다.
클라이언트
if (confirm('삭제하시겠습니까?')==true) {
axios.post('/review/myReview', data)
.then(response => { // 오류 발생 지점
window.location.reload();
})
.catch(error => {
console.error('Error:', error);
});
}else {
console.log('취소되었습니다.');
}
서버
타임리프 문법을 잘 못 사용했거나 html 맨 위에 <html lang="en" xmlns:th="http://www.thymeleaf.org"> 를 달지 않았는지 확인을 했음에도 불구하고 여전히 오류는 해결되지 않았다.
하지만 컨트롤러를 보면서 이유를 발견했다.
// 수정 전 코드
@PostMapping("/review/myReview")
public void deleteReview(@RequestBody HashMap<String, Object> param) {
int reviewNo = Integer.parseInt((String) param.get("reviewNo"));
int memberNo = Integer.parseInt((String) param.get("memberNo"));
reviewService.deleteReview(reviewNo, memberNo);
}
삭제만 수행하고 반응을 클라이언트에 리턴하지 않아 클라이언트에서는 타임리프의 데이터가 업데이트 되지 않아 오류가 발생했던 것 같다.
// 수정 후 코드
@PostMapping("/review/myReview")
public String deleteReview(@RequestBody HashMap<String, Object> param) {
int reviewNo = Integer.parseInt((String) param.get("reviewNo"));
int memberNo = Integer.parseInt((String) param.get("memberNo"));
reviewService.deleteReview(reviewNo, memberNo);
return "redirect:/review/myReview";
}
이후 데이터를 정상적으로 업데이트하고 리로드도 잘 수행되었다. 정말 사소한 부분인데 주의해야겠다...