문제 - 클라이언트에서 서버 쪽으로 데이터가 전송되는데, 서버에서 클라이언트로 응답 값이 다시 넘어오지 않는 문제
1) 문제
버튼을 누르면, 클라이언트에서 서버쪽으로 method와 함께 데이터를 전송해야 했다.
보내는 데이터를 서버에서 받아야 하는데,, 받아지고, 원하는 로직대로 서버에서 작동이 되는데 클라이언트 쪽으로 다시 응답이 오지 않으면서 url에 param 형태로 전송하는 데이터가 보이는 것이었다 ..!
아예 서버쪽으로 데이터가 전송되지 않으면 이해를 하겠는데,
서버쪽으로 전송은 되면서 서버에서 다시 클라이언트로 응답을 받지 못하는 이유가 뭘까 ?
2) 시도
내용을 진짜 무지막지하게 찾아봤다.
에너테이션을 잘못 사용했는지도 점검하고,
응답하는 데이터 타입이 잘못되었는지도 확인하고,
아예 처음부터 서버에서 클라이언트로 데이터를 전송하고, 다시 클라이언트로 응답을 반환받는 방법들에 대해서 찾아보았다.
찾아보니, @ResponstBody를 붙이지 않아서 그랬다는 경우가 있었다.
하지만 나는 @RestController를 사용하고 있었다.
@RestController는
@Target(ElementType.TYPE)
@Retention(RetentionPolicy.RUNTIME)
@Documented
@Controller
@ResponseBody를 상속받고 있기 때문에 따로 @ResponseBody를 붙이지 않아도 됐었다.
그럼 ajax 코드를 잘못 작성했나 ? 싶었는데,
애초에 코드를 복잡하게 쓰지 않아서 그런 문제도 없었다.
그냥 success든 error든 서버쪽에서 클라이언트로 응답을 받아오지 못하는 것이 문제였다.
찾아본 내용들
https://aljjabaegi.tistory.com/m/148
https://devmg.tistory.com/m/222
https://velog.io/@joungeun/ResponseEntity-Http-Status
https://tecoble.techcourse.co.kr/post/2021-05-10-response-entity/
3) 해결
거의 이틀을 삽질한 내용이었는데 ..
기본적인 원인이 html에 작성한 태그 때문이었다.
딱히 신경쓰지 않고 form 형태로 작성한 부분들이 있었는데, 귀신같이 그 쪽에서만 오류가 났었다.
알고보니, form을 사용하면 자동으로 return을 받는 무언가가 있었던 것 같다
form 태그에 를 주니 더 이상 새로고침되면서 url에 데이터가 표시되지 않고, 원하는대로 동작했다.
<form onsubmit = "return false;" ></form>결국 form 태그의 성질을 몰라서 발생한 문제였다.
정말 .. 이틀 동안 계속 해결하고자 했던 부분이었는데,
작성한 서버 쪽 코드에는 문제가 없어서 정말 눈물이 날 것 같았다.
이걸 이제 알아서 억울하지만, 원하는 대로 해결이 완료되어서 정말 다행이라고 생각한다..
4) 배운 점
서버 쪽 코드를 작성하다가 프론트 쪽 코드도 작성하면서 서버와 연결하려고 하니
마음대로 되지 않는 동작들에 프론트 쪽과 연결을 포기하고만 싶었다.
새롭게 알게 된 점은, ResponseEntity<>를 사용해서 클라이언트 쪽으로 응답을 전송할 수 있다는 것이었다.
나는 ResponseEntity< String > 타입으로 리턴을 시도했다.
리턴 한 내용들은
return ResponseEntity.ok("Success"); // 상태 코드 200 반환
return ResponseEntity.status(HttpStatus.BAD_REQUEST).body("Error"); // 상태 코드 400 반환이렇게 둘 중 하나로 return 해주었다!
클라이언트 코드에서는
$.ajax({
type: "보낼 method 종류",
url: `사용할 api`,
contentType: "보낼 데이터 타입",
data: 전송할 데이터 내용,
success: function(response, status, xhr) {
// 요청 전송이 성공한 경우
if (xhr.status === 200) {
// 서버의 상태 코드가 200(성공)인 경우
}
else {
// 다른 상태 코드에 따라 처리
}
},
error: function(xhr, status, error) {
// 요청 전송이 실패한 경우
}
}); 이렇게 요청받은 상태코드에 따라서 다르게 코드를 작성할 수 있었다.
클라이언트 쪽의 코드 .. 정말 너무 어렵다ㅠㅠ
