JSON 형태의 데이터 반환, @ResponseBody, @RequestBody 어노테이션

JSP 개발에서 댓글 기능을 JQuery, ajax, JSON을 이용해 데이터를 반환하여 화면에 출력하였는데,

같은 기능을 하는 코드를 Spring Framework에서 MyBatis를 활용해 작성하려니 막히는 부분이 많았다.

 

결론부터 얘기하자면 @ResponseBody 어노테이션에 대한 이해가 없었기 때문이었다고 생각이 든다.

결국 오류는 해결되었고, 계속해서 발생하는 오류를 해결하는 과정에서 알게된 내용을 정리하고자 한다.

 

list: function(qno) {
	$.ajax({
		type: 'get',
		url: `${contextPath}/qnaReply/list`,
		data: { qno: qno },
		success: function(replyList) {
        		var qnaReplyList = JSON.parse(replyList); 
       			    replyListRender(qnaReplyList);
		},
		error: function() {
			alert('댓글 목록 조회 불가');
		}
	});
}

 

먼저 오류가 계속해서 발생했던 JavaScript 코드이다. 

오류가 발생하는 이유는 'replyList'를 가져오지 못했기 때문이었는데,

Controller에서는 데이터가 정상적으로 출력되는 상태였고,

그 데이터가 올바르게 전달되지 않는다는 것이 원인이었다.

 

@Controller
@RequestMapping("/qnaReply")
public class QnaReplyController {

	@Autowired
	private QnaReplyService qnaReplyService;

	@GetMapping("/list")
	public void qnaReplyList(Model model, Long qno) {
		List<QnaReplyVO> replyList = qnaReplyService.qnaReplyList(qno);
		model.addAttribute("replyList",replyList);
	}
}

 

@ResponseBody에 대해 생각지도 못했을 때에는 컨트롤러에서 이렇게 model을 통해 데이터를 전달하고,

자바스크립트 코드에서 JSON 형태로 변환을 해주면 되는거라고 생각했었다.

사실상 컨트롤러에서 GSON 객체를 이용해 JSON으로 변환한 형태로 데이터를 전달해 보기도하고,

수 십 번의 코드 수정과 새로고침, 서버 재시작을 반복해도 해결되지 않는 부분이었다.

 

@Controller
@RequestMapping("/qnaReply")
public class QnaReplyController {

	@Autowired
	private QnaReplyService qnaReplyService;

	@GetMapping("/list")
	@ResponseBody
	public List<QnaReplyVO> qnaReplyList(@RequestParam("qno") Long qno) {
		List<QnaReplyVO> replyList = qnaReplyService.qnaReplyList(qno);
		return replyList;
	}
}

 

수 차례 검색한 결과, ResponseBody 어노테이션을 이용해

JSON 형태의 데이터를 작성하여 반환하면 간단하게 해결되는 문제였다...😱

심지어 그 와중에 @RequestParam 어노테이션도 빼먹었다는 것을 깨달았다.. 껄껄

 

	@PostMapping("/add")
	@ResponseBody
	public String insert(@RequestBody QnaReplyVO qnaReplyVO) {
		qnaReplyService.addQnaReply(qnaReplyVO);
		qnaReplyService.updateCount(qnaReplyVO.getQno());
		return "댓글 등록 성공 :)";
	}

 

그리고 댓글을 작성하는 과정에서 VO 객체는 @RequestBody 어노테이션으로

JSON 형태의 데이터를 자바 객체로 변환하여 컨트롤러에서 사용하는 방식으로 구현하였다.

 

이 과정에서 또 다른 오류와 마주하게 되었는데,

WARN : org.springframework.web.servlet.mvc.support.DefaultHandlerExceptionResolver - Resolved [org.springframework.web.HttpMediaTypeNotSupportedException: Content type 'application/x-www-form-urlencoded;charset=UTF-8' not supported]

Content-Type을 'application/json'으로 변경해주기 위해서 스크립트 코드를 수정하였다.

 

write: function(qnaReplyVO) {
		$.ajax({
			type: 'post',
			url: `${contextPath}/qnaReply/add`,
			contentType: 'application/json',
			data:  JSON.stringify(qnaReplyVO),
			success: function(update) {
				$('.reply_content').val('');
				$('#feedback').find('.modal-body').html(update);
				$('#feedback').modal('show');

				qna_ReplyService.list(qnaReplyVO.qno);
			},
			error: function() {
				alert('댓글 등록 실패')
			}
		});
	}

 

기존에는 content-type을 따로 설정하지 않았고, data를 qnaReplyVO 그대로 사용하였으나

Content-Type을 'application/json'으로 설정해주고, qnaReplyVO를 JSON 형태로 변환하여 사용하였다.

 

추가적으로 data를 전달할때 JSON.stringify() 메서드를 이용해

JavaScript 객체를 JSON 문자열로 변환하는 방식을 사용하였는데,

다르게 활용할 수 있는 방법이 더 있는 지 알아볼 예정이다.

 

이렇게 우여곡절 끝에 겨우겨우 기능 구현과 오류 수정 완료 ㅠㅠㅠ

 

코드만 단편적으로 봤을 때에는 간단한 수정에 그치는 것이지만

길게 보았을 때에는 Spring Framework에서 사용되는 수많은 어노테이션들을 제대로 활용하기 위해서

반드시 숙지해야 할 부분이라고 생각이 되어져 정리를 해본다!

 

여전히 배워야 할 것이 많은 나는 이렇게나마 오늘도 하나 알아간다는 것에 의미를 남긴당🙏🏻