1. 새로알게된것
HTML 태그의 data -* 속성 : 사용자 커스텀 value를 넣어둘수있다.
key:value로 저장되며 ajax를 이용하면 .data(); 함수를 이용해서 쉽게 값을 뽑아낼수있다. 단 , 클라이언트 브라우저에 전부 값이 노출되므로 보안상 중요한 값은 넣지 않는다.
참고) MDN페이지
https://developer.mozilla.org/ko/docs/Learn/HTML/Howto/Use_data_attributes
2. ReplyController를 생성한다.
특이사항은 RestController로 처리한다는 것.
댓글은 bno를 FK로 물고있기때문에( 다대일관계) 이것을 활용하여 해당 게시글의 댓글을 불러올 것이다. bno는 이미 read페이지에 model객체 안에 담겨있다. 따라서 불러올때는 이 값을 활용하고, document가 로딩되는 시점에서 찾아오도록 비동기처리를 한다.
HttpResponse를 이용해서 데이터 & 200staus를 리턴해줄 것이다.
사실 로직자체는 그다지 복잡하지 않다. 화면구현이 핵심이라고 할수있다.
bno로 조회하면 HttpResponse안의 json데이터를 확인할수있다. (GET맵핑이기때문에 브라우저로도 확인가능하다)
3. 페이지 구현의 흐름은 대강 이러하다.
addReply button 과
ReplyList 가 화면에 존재.
1)
$(document).ready()~~를 활용해서 ReplyList를 클릭하면 ajax로 해당 게시글의 댓글리스트를 찾아온다. 이것은 넘길 데이터 없이 단순 get이기 때문에. jQuery의 $.getJSON 함수를 활용하면 더욱 간단하게 작성할 수 있다.
받아온 데이터는 array이기 때문에, $.each()함수를 활용하여 하나씩 댓글을 붙여준다.
2)
addReply 버튼을 누르면 댓글을 쓰기위한 모달창이 나타난다.
remove,modify,save,clear버튼이 있지만, 이때는 remove와 modify버튼은 hide처리해서 숨긴다.
save버튼을 누르면
모달창안의 input [name = '~~'] 태그를 활용해서 jQuery로 값을 받아오고, 받아온 값을 JSON데이터 형식으로 담는다. $.ajax를 활용해서 post로 데이터를 전송하고, 결과값을 받아온다. (success뒤의 콜백함수) 받아온 결과값을 바탕으로 다시 applyList를 만든다.
댓글이 등록된 후에는 alert로 댓글이 등록되었음을 알리고,
다시 modal창을 hide해주도록 하자.
댓글 없음:
댓글 쓰기