[코드로 배우는 스프링 웹 프로젝트] ch17 Ajax 댓글 처리 8

https://bobo12.tistory.com/324

 

7. 댓글 페이지의 화면 처리
   ▷ 게시물을 조회하는 페이지에 들어오면 기본적으로 가장 오래된 댓글들을 가져와서 1페이지에 보여줌
   ▷ 1페이지의 게시물을 가져올 때 해당 게시물의 댓글의 숫자를 파악해서 댓글의 페이지 번호를 출력함
   ▷ 댓글이 추가되면 댓글의 숫자만을 가져와서 최종 페이지를 찾아서 이동함
   ▷ 댓글의 수정과 삭제 후에는 다시 동일 페이지를 호출함

 

 
(1) 댓글 페이지 계산과 출력
   ▷ Ajax로 가져오는 데이터가 replyCnt와 list라는 데이터로 구성되므로 이를 처리하는 reply.js의 내용 역시 이를 처리하는 구조로 수정함

 

◎ reply.js 내용 수정

 

... (생략) ...
​​​​
​​​​function getList(param, callback, error) {
​​​​var bno = param.bno;
​​​​var page = param.page || 1;
​​​​
​​​​$.getJSON("/replies/pages/" + bno + "/" + page + ".json",
​​​​​​​​function(data) {
​​​​​​​​​​​​if(callback) {
​​​​​​​​​​​​​​​​// callback(data); // 댓글 목록만 가져오는 경우
​​​​​​​​​​​​​​​​callback(data.replyCnt, data.list); // 댓글 숫자와 목록을 가져오는 경우
​​​​​​​​​​​​}
​​​​​​​​}).fail(function(xhr, status, err) {
​​​​​​​​​​​​if(error) {
​​​​​​​​​​​​​​​​error();
​​​​​​​​​​​​}
​​​​​​​​});
​​​​}
​​​​
​​​​... (생략) ...

 

   ▷ 기존에 비해서 변경되는 부분은 callback 함수에 해당 게시물의 댓글 수(replyCnt)와 페이지에 해당하는 댓글 데이터를 전달하도록 하는 부분, 화면에 대한 처리는 get.jsp 내에서 이루어짐

 

◎ get.jsp 내용 수정

   ▷ reply.js를 이용해서 댓글의 페이지를 호출하는 부분은 showList 함수이므로 페이지 번호를 출력하도록 수정함

 

... (생략) ...
​​​​
​​​​function showList(page) {
​​​​
​​​​console.log("show list " + page);
​​​​
​​​​replyService.getList({bno:bnoValue, page:page||1}, function(replyCnt, list) {
​​​​​​​​
​​​​​​​​console.log("replyCnt: " + replyCnt);
​​​​​​​​console.log("list: " + list);
​​​​​​​​console.log(list);
​​​​​​​​
​​​​​​​​if(page == -1){
​​​​​​​​​​​​pageNum = Math.ceil(replyCnt/10.0);
​​​​​​​​​​​​showList(pageNum);
​​​​​​​​​​​​return;
​​​​​​​​}
​​​​​​​​
​​​​​​​​var str = "";
​​​​​​​​if(list == null || list.length == 0) {
​​​​​​​​​​​​replyUL.html("");
​​​​​​​​​​​​return;
​​​​​​​​}
​​​​​​​​
​​​​​​​​for (var i = 0, len = list.length || 0; i<len; i++) {
​​​​​​​​​​​​str +="<li class='left clearfix' data-rno='"+list[i].rno+"'>";
​​​​​​​​​​​​str +="	 <div><div class='header'><strong class='primary-font'>["+list[i].rno+"] "+list[i].replyer+"</strong>";
​​​​​​​​​​​​str +="  <small class='pull-right text-muted'>"+replyService.displayTime(list[i].replyDate)+"</small></div>";
​​​​​​​​​​​​str +="  <p>"+list[i].reply+"</p></div></li>";
​​​​​​​​}
​​​​​​​​replyUL.html(str);
​​​​​​​​});   // end function
​​​​​​​​}   // end showList
​​​​​​​​
​​​​​​​​... (생략) ...

 

▷ showList() 함수는 파라미터로 전달되는 page 변수를 이용해서 원하는 댓글 페이지를 가져오게 됨

▷ 이때 만일 page 번호가 -1로 전달되면 마지막 페이지를 찾아서 다시 호출함

▷ 사용자가 새로운 댓글을 추가하면 showList(-1); 을 호출하여 우선 전체 댓글의 숫자를 파악함

▷ 이 후에 다시 마지막 페이지를 호출해서 이동시키는 방식으로 동작시킴

이러한 방식은 여러번 서버를 호출해야하는 단점, 댓글의 등록 행위가 댓글 조회나 페이징에 비해서 적기 때문에 심각한 문제는 아닙니다.

◎ get.jsp

... (생략) ...
​​​​
​​​​modalRegisterBtn.on("click", function(e){
​​​​​​​​
​​​​​​​​var reply= {
​​​​​​​​​​​​reply: modalInputReply.val(),
​​​​​​​​​​​​replyer:modalInputReplyer.val(),
​​​​​​​​​​​​bno:bnoValue
​​​​​​​​};
​​​​​​​​replyService.add(reply, function(result){
​​​​​​​​​​​​alert(result);
​​​​​​​​​​​​
​​​​​​​​​​​​modal.find("input").val("");
​​​​​​​​​​​​modal.modal("hide");
​​​​​​​​​​​​
​​​​​​​​​​​​// showList(1);
​​​​​​​​​​​​showList(-1);
​​​​​​​​});
​​​​});
​​​​
​​​​... (생략) ...

 

댓글은 화면상에서 댓글이 출력되는 영역의 아래쪽에 <div class='panel-footer'>를 하나 추가하고 <div>의 아래쪽에 추가.

 

◎ get.jsp 내용 수정

... (생략) ...
​​​​
​​​​<!-- /.panel-heading -->
​​​​<div class="panel-body">
​​​​​​​​<ul class="chat">
​​​​​​​​​​​​
​​​​​​​​​​​​... (생략) ...
​​​​​​​​​​​​​​​​
​​​​​​​​​​​​​​​​</ul>
​​​​​​​​​​​​<!-- /. end ul -->
​​​​​​​​​​​​</div>
​​​​​​​​​​​​<!-- /.panel .chat-panel -->
​​​​​​​​​​​​<div class="panel-footer">
​​​​​​​​​​​​​​​​
​​​​​​​​​​​​</div>
​​​​​​​​​​​​</div>
​​​​​​​​​​​​</div>
​​​​​​​​​​​​<!-- ./ end row -->
​​​​​​​​​​​​</div>

 

추가된 <div class='panel-footer'>에 댓글 페이지 번호를 출력하는 로직은 showReplyPage()는 아래와 같음

 

◎ get.jsp 내용 수정

... (생략) ...
​​​​
});   // end function
}   // end showList

var pageNum = 1;
var replyPageFooter = $(".panel-footer");

function showReplyPage(replyCnt) {
​​​​
​​​​var endNum = Math.ceil(pageNum / 10.0) * 10;
​​​​var startNum = endNum - 9;
​​​​
​​​​var prev = startNum != 1;
​​​​var next = false;
​​​​
​​​​if(endNum * 10 >= replyCnt) {
​​​​​​​​endNum = Math.ceil(replyCnt/10.0);
​​​​}
​​​​if(endNum * 10 < replyCnt){
​​​​​​​​next = true;
​​​​}
​​​​var str = "<ul class='pagination pull-right'>";
​​​​
​​​​if(prev){
​​​​​​​​str+= "<li class='page-item'><a class='page-link' href='"+(starNum -1)+"'>Previous</a></li>";
​​​​}
​​​​
​​​​for(var i = startNum; i<= endNum; i++){
​​​​​​​​var active = pageNum == i? "active":"";
​​​​​​​​str+= "<li class='page-item "+active+" '><a class='page-link' href='"+i+"'>"+i"</a></li>";
​​​​}
​​​​
​​​​if(next){
​​​​​​​​str+="<li class='page-item'><a class='page-link' href='"+(endNum + 1)+"'>Next</a></li>";
​​​​}
​​​​str += "</ul></div>";
​​​​
​​​​console.log(str);
​​​​replyPageFooter.html(str);
}
... (생략) ...

▷ showReplyPage( ) 는 기존에 Java로 작성되는 PageMaker의 JavaScript 버전에 해당함
▷ 댓글 페이지를 문자열로 구성한 후 <div>의 innerHTML로 추가함
▷ showList()의 마지막에 페이지를 출력하도록 수정함

// get.jsp

... 생략 ...
​​​​
​​​​replyUL.html(str);

showReplyPage(replyCnt);
});   // end function
}   // end showList

... 생략 ...

 

실제 화면상에는 CSS의 구성으로 인해 아래쪽에 추가

 

◎ 페이지 번호를 클릭했을 때 새로운 댓글을 가져오도록 get.jsp 내용 수정

... (생략) ...
​​​​
​​​​replyPageFooter.on("click","li a", function(e){
​​​​​​​​e.preventDefault();
​​​​​​​​console.log("page click");
​​​​​​​​
​​​​​​​​var targetPageNum = $(this).attr("href");
​​​​​​​​
​​​​​​​​console.log("targetPageNum: " + targetPageNum);
​​​​​​​​
​​​​​​​​pageNum = targetPageNum;
​​​​​​​​
​​​​​​​​showList(pageNum);
​​​​});
​​​​
​​​​... (생략) ...

 

댓글의 페이지 번호는 <a> 태그 내에 존재하므로 이벤트 처리에서는 <a> 태그의 기본동작을 제한하고(preventDefault()) 댓글 페이지 번호를 변경한 후 해당 페이지의 댓글을 가져오도록 함

 

 

(2) 댓글의 수정과 삭제

   ▷ 댓글이 페이지 처리되면 댓글의 수정과 삭제 시에도 현재 댓글이 포함된 페이지로 이동하도록 수정함.

 

◎ get.jsp 내용 추가

... (생략) ...
​​​​
​​​​modalModBtn.on("click", function(e){
​​​​​​​​var reply = {rno:modal.data("rno"), reply: modalInputReply.val()};
​​​​​​​​
​​​​​​​​replyService.update(reply, function(result){
​​​​​​​​​​​​alert(result);
​​​​​​​​​​​​modal.modal("hide");
​​​​​​​​​​​​showList(pageNum);
​​​​​​​​});
​​​​});
​​​​
​​​​modalRemoveBtn.on("click", function (e) {
​​​​​​​​var rno = modal.data("rno");
​​​​​​​​replyService.remove(rno, function(result) {
​​​​​​​​​​​​alert(result);
​​​​​​​​​​​​modal.modal("hide");
​​​​​​​​​​​​showList(pageNum);
​​​​​​​​});
​​​​});
​​​​
​​​​... (생략) ...

 

기존과 달라진 점은 showList() 를 호출 할 때 현재 보고 있는 댓글 페이지의 번호를 호출 한다는 점입니다.

브라우저에서 댓글의 등록, 수정, 삭제 작업은 모두 페이지 이동을 하게 됩니다.

 

 

댓글 페이지의 화면 처리를 구현해 보았습니다. 오래된 댓글들을 1페이지에 보여주고 해당 페이지의 게시물을 가져올 때 해당 게시물의 댓글의 숫자를 파악해서 댓글의 페이지 번호를 출력하는 등 여러가지 기능들을 구현해보았습니다.

 

이렇게 스프링 공부를 해보았지만 아직 MVC에 대해서 자세히 이해하지를 못해서 그런지 확실하게 이해되는 것은 없네요,,

 

처음부터 책을 다시 한 번 읽어보고 따라해봐야 겠어요!!

 

다음은 스프링 부트에 대해서 공부해볼게요!!

 

많은 분들의 피드백은 언제나 환영합니다!  많은 댓글 부탁드려요~~