[jqeury] ajax에서의 parse error | 스프링과 자바스크립트의 부조화

발단

회사 프로젝트를 하면서 뷰단에서 실시간으로 데이터를 업데이트 할 일이 있어 ajax를 사용하게 됐다. 예를 들어 아래처럼 버튼을 만들고,

<button id="iamButton">버튼이에요</button>

 

버튼을 누르면 ajax가 작동해 서버에 데이터를 전송할 수 있도록 말이다.

$.ajax({
    url: "please/insert/target/url",
    type: "POST",
    dataType: "JSON",
    data: {
        a: something,
        b: somethingElse
    }
}

 

문제가 없어 보였다. 서버를 돌리고 iamButton을 눌러보았다. 아무 응답이 없었다. 마치 아무것도 하지 않은 것처럼.

 

... 뭐지?

 

 

원인

이 문제를 해결하려고 근무시간 중 꼬박 2시간을 쏟았다. 한두시간 투자하면 구현하고도 남겠다 싶었던 기능이 두어시간동안 제대로 시작되지도 못했을 때 내가 느꼈던 그 답답함과 고통이란.. 

 

답답함을 가중시키는 건 도대체 뭐가 문제인지 알 수 없었다는 것. 인터넷을 참조해봐도 코드는 문제가 없어 보였고(진짜 문제가 없어 보였다.. 젠장) 실제로 서버로 ajax를 전송하면 200 코드가 response로 찍혀 왔다. 내가 원하는 결과가 도출되지 않는데 서버에서 200 코드를 내린다..? 도대체 뭐지?

 

순간, 문득 코드의 에러 메세지를 보고 싶다는 생각이 문득 들었다. 분명 문제가 있을텐데 뭐가 문제인지 모른다면 에러 메세지를 봐보자! 하는 마음이었다. 웹 서핑을 해 JQuery AJAX의 에러 메세지를 얻을 수 있는 방법을 알게 되어 다시 서버를 돌렸다.

$.ajax({
    url: "please/insert/target/url",
    type: "POST",
    dataType: "JSON",
    data: {
        a: something,
        b: somethingElse
    },
    error: function (request, error) {
      console.log(arguments);
      alert("can't do because: " + error);
   }
}

 

그리고 콘솔창에 뻘겋게 나온 에러 메세지. parse error

 

 

 

해결

알고 보니 문제는 뷰단의 자바스크립트나 html 코드에 있는 것이 아니라 스프링의 controller 로직에 있었다. 뷰단의 자바스크립트는 dataType에 적혀 있는 JSON을 기대하고 있는데 서버에서는 단순한 String을 넘겨 주었던 것. 무슨 말인가 하니, 아래의 코드를 한번 보자. 아래는 스프링의 controller 코드이다.

@PostMapping("/please/insert/target/url")
@ResponseBody
public String ajaxTest(@RequestParam String a, @RequestParam String b) {
	
    // 서버 로직이 적혀 있다. (착한 사람들만 보임)
    
	return "Hello world~~";
}

 

뷰단의 자바스크립트는 dataType에 적힌대로 서버에서 JSON이 넘어올 것을 기대하고 있다. 그런데 서버에서 넘어가는 데이터는 JSON 데이터가 아닌 단순한 문자열. 그래서.... parse error(해석해 보면 분석 에러?)가 났던 것이다.

 

가볍게 dataType: "JSON" 부분을 주석처리하니 해결이 되어버렸다.

 

해결방법 : dataType을 지운다.

 

dataType이라는게 request로 들어가는 데이터 타입이 아니라 서버에서 response로 넘어오는 dataType을 의미하는가보다. 자바스크립트 공부를 좀 해야겠다..