BoardProject 11/4 JSON해결.

이미지 게시판 수정을 위해 JSON을 이용해서 해당 번호의 게시글 이미지를 가져오기를 원했다.

 

제목, 글 내용, 글 번호는 Controller에서 먼저 보내준 데이터로 사용했고 이미지데이터만 JSON을 사용해서 가져오는 방법을 사용했다.

 

$(document).ready(function(){
  var ImageNo = '<c:out value="${list.imageNo}"/>';
  $.getJSON("AttachList", {ImageNo: ImageNo}, function(arr){
    $(arr).each(function(i, attach){
      $("#preview").append(
        "<div class\"preview-box\" value=\"" + attach.imageStep + "\">" +
        "<img class=\"thumbnail\" src=\"IMG/" + attach.imageData + "\"\/>" +
        "<p>" + attach.oldName + "</p>" +
        "<a href=\"#\" value=\"" + attach.imageStep +"\" onclick=\"deletePreview(this)\">" +
        "삭제" + "</a>" +
        "</div>"
      );
    )};
)};

 

@RequestMapping("/AttachList")
@ResponseBody
public ResponseEntity<List<ImageDataVO>> getAttachList(int ImageNo) throws Exception{
		
  return new ResponseEntity<>(imageBoardMapper.getAttachList(ImageNo), HttpStatus.OK);
}

 

이렇게 작성해서 ImageData로 설정해둔 IMG경로를 갖고 있는 값을 불러오도록 했다.

그러나 아무리 페이지를 열어도 무반응....

alert창을 추가해서 ImageNo를 받아봤지만 정상적으로 넘어오고 있었다.

 

JSON을 처음 써봐서 여기저기 찾아보고 책도 뒤져봤지만 같은 방식으로 짜여져있는 코드만 발견할 뿐... 해결방법을 찾을 수 없었다 ㅠㅠ

 

그렇게 이틀을 날리고... 찾은 방법!! 보자마자 아 왜 이 생각을 못했지... 했다 ㅠㅠ

 

$.getJSON("AttachList", {ImageNo: ImageNo}, function(arr){            	
  $(arr).each(function(i, attach){
    $("#preview").append(
      "<div class\"preview-box\" value=\"" + attach.imageStep + "\">" +
      "<img class=\"thumbnail\" src=\"IMG/" + attach.imageData + "\"\/>" +
      "<p>" + attach.oldName + "</p>" +
      "<a href=\"#\" value=\"" + attach.imageStep +"\" onclick=\"deletePreview(this)\">" +
      "삭제" + "</a>" +
      "</div>"
    );
  });
})
.fail(function(err){
  alert(err.responseText);
})

 

$.getJSON 아래에 .fail을 추가! 어떤 에러가 발생하는지를 알면 해결법도 찾을 수 있으니 최고의 방법이다 ㅠㅠ

이렇게 수정하기전에는 JSON이 아예 동작을 안하는것인지 동작은 하는데 어디에선가 에러가 발생해서 멈춘건지 알수도 없었다.

AJAX를 사용할 때도 맨 아래 error 를 볼 수 있도록 만들어서 사용했는데 왜 이생각을 못해서 이틀이나 날렸는지.......ㅠㅠ

 

발생한 에러는 

illegalStateException.

Optional int parameter ImageNo is present but declared as a primitive type.

Consider declaring it as object wrapper for the corresponding primitive type.

이런 에러이다. 

 

ImageNo는 기본유형으로 선언되며 해당 기본 유형에 대한 객체래퍼로 선언하는 것을 고려해야 한다. 라는 것이다.

primitive type변수는 null이 될 수 없기 때문이다.

 

primitive Type이란 언어에서 사전 정의되어 있는 데이터 타입으로 int, char, byte등 일반 타입이라고 생각하면 된다.

 

그래서 ImageNo 를 반드시 초기화 해주거나 Wrapper class 를 사용해야 한다.

에러에 대해 검색했을 때 발견한 부분인데 여기서는 VO에 int ImageNo 가 아닌 Integer ImageNo 로 변경하라고 조언들을 해주셨다.

그래서 VO를 변경했으나 동일. 그래서 Controller에서도 Integer로 변경했더니 해결되었다!!!!!!!!!!!!!!!!

굳이 jquery 에서는 변경하지 않아도 문제가 발생하지 않았다.

 

그리고 VO에서도 int로 다시 변경해봤더니 문제가 없다. Controller에서 받아주는 것만 Integer로 받아준다면 문제가 발생하지 않았다.

 

내 경우에는 ResponseEntity를 사용했지만 해당 질문글 작성자분은 ModelAndView를 사용하셨다. 그래서 발생하는 차이가 아닐까 싶다.

 

JSON에 대해 좀 더 공부가 필요하다!!!

 

JSON만 잘 해결했으면 프로젝트 벌써 마무리했을건데..ㅠㅠ