리플출력 창 만들기/ 페이징 만들기

• 출력창을 만드는건 매우 어려웠다, 내가 원하는 스타일이 있어서 그 안에 div가 굉장히 많이 들어갔는데 그것을 jquery로 일일히 태그로 생성하려니 원하는 모양이 도통 나오지 않았다.
• 그러다가 단순하게 text로 한줄씩 추가하는것으로 원하는 영역에 영역이름.html()로 넣어주면 간단하다는것을 알게되었다.
• 그래서 내가 만든 jquery 함수는 다음과 같다

  function printReply(bookNo,userId,rPage){
  var replyArea = $('.view-relply');
  $.ajax({
  	url:"/book/originBookAllReply",
  	data:{"bookNo":bookNo, rPage:rPage},
  	type:"post",
  	success:function(result){
  			replyArea[0].innerHTML = '';
  			for(var i in result){
  				$('#replyLength').html(result[0].totalCount);	
  				var str ='<div class="row  d-flex justify-content-center repleOne mt-2" id="'+result[i].replyNo+'">';
  				str+='<div class="card p-3">';	
  				str+='<div class="d-flex row justify-content-between align-items-center">';
  				str+='<div class="user col-12 d-flex flex-row align-items-center">';
  				str+='<span class="col-md-1 col-3 d-inline-block text-truncate">';
  				str+='<small class="font-weight-bold username">'+result[i].mNickName+'</small>';
  				str+='</span>';
  				str+='<span class="col-md-11 col-8">';
  				str+='<small class="font-weight-bold">';
  				str+=result[i].reContents;
  				str+='</small>';
  				str+='</span>';
  				str+='</div></div>';
  				str+='<div class="mt-2">';
  				str+='<div class="reply row">';
  				str+='<div class="col-6">';
  					if(userId==result[i].memberId){
  						str+='<span class="modify-del-button"> <smalltoken operator">+result[i].replyNo+','+rPage+');">삭제</small> <smalltoken operator">+result[i].replyNo+','+rPage+');">수정</small>';
  					}
  				str+='</span></div>';
  				str+='<div class="text-truncate col-6 date">';
  				str+='<small>'+result[i].insertDate+'</small>';
  				str+='</div></div></div>';
  				
  				replyArea[0].innerHTML += str;
  				 
  				 }
  				 
  				 var page = "";
  				 if (rPage != 1){
  				 	page +='<spantoken operator">+bookNo+',\''+userId+'\','+(rPage-1)+')"> < </span>';
  				 }
  				 for(var i =result[0].startNavi; i<=result[0].endNavi; i++){
  				 	if( i == rPage){
  				 		page+= '<small class="nowPage"> &nbsp; </small>';
  				 	}else{
  					 page+= '<smalltoken operator">+bookNo+',\''+userId+'\','+i+')"> &nbsp; </small>';}
  				 }
  				 if(rPage != result[0].maxPage){
  					 page +='<spantoken operator">+bookNo+',\''+userId+'\','+(rPage+1)+')"> > </span>';
  				 }
  				$('#page').html(page);
  			 		 
  			},
  	error:function(){}
  	});
  };

• 자세히 보면 내가 미리 만들어 놓은 태그를 나열한것을 알수있다.
  • ‘+변수명+’ 을 통해 내가 전달받은 변수의 값을 넣어주었다.
  • 함수에 현재페이지값, 지금 책의 번호값 userId값을 받아주었다. 나중엔 너무 어려워서 html안에 script를 만들어 해당 변수들만 정의해 필요할때마다 그 값을 사용하였다.
• 리스트를 받은 뒤 page영역도 받았다.
  • 페이지에 글씨가 나타나지 않게 만들고 싶어서   를 이용하였다.
  • 원래 c:if로 활용하던 페이징 기법을 모두 js if태그로 처리해주었다.
  • 변수를 받아오는 방법은 후술

페이징용 변수 받아오기

public BookPage boardList(Integer page, int totalCount, int boardLimit) {
		// @RequestParam(value="page", required=false)의 값은 page이지만
		// required=false 필수값은 아니라는 뜻

		int currentPage = (page != null) ? page : 1;
		// 현재 페이지
		// 만약 page값이 없으면 기본형 1로 출력할것, 아니면 받아온 page의 값을 준다.
		// 삼항연상자 사용

		int naviLimit = 5; // 한 화면에 출력할 게시판 페이지 수
		int maxPage; // 게시판의 총 페이지 수
		int startNavi; // 한 화면에 출력되는 게시판 페이지의 처음 수
		int endNavi;// 한 화면에 출력되는 게시판 페이지의 마지막 수

		maxPage = (int) ((double) totalCount / boardLimit + 0.9);
		startNavi = ((int) ((double) currentPage / naviLimit + 0.9) - 1) * naviLimit + 1;
		endNavi = startNavi + naviLimit - 1;

		// endNavi가 maxNavi보다 커지는 오류방지
		if (maxPage < endNavi) {
			endNavi = maxPage;
		}

		BookPage bPage = new BookPage();
		bPage.setCurrentPage(currentPage);
		bPage.setEndNavi(endNavi);;
		bPage.setMaxPage(maxPage);;
		bPage.setStartNavi(startNavi);;
		
		return bPage;
	}

• 페이징용 메소드를 만들어 현재 페이지, 페이징할 리플, 혹은 게시물의 토탈값, 한페이지에 보일 게시물의 갯수를 보내주었다.
• 나머지는 이 메소드에서 자동계산한다.
• BookPage 클래스 안에 해당 변수를 게터세터로 저장하여 반환시켰다.

controller에서 반환

		// 리플 수계산하기
		int totalCount = rService.getTotalCount(bookNo);
		// 페이지당 출력될 변수 메소드로 가져오기
		int boardLimit = 10;// 출력될 리플수
		String navi = boardList(rPage, totalCount, boardLimit);
		int startNavi = Integer.parseInt(navi.split(",")[0]);
		int endNavi = Integer.parseInt(navi.split(",")[1]);
		int maxPage = Integer.parseInt(navi.split(",")[2]);
		int currentPage = Integer.parseInt(navi.split(",")[3]);

		// 리플목록 가져오기
		List<OriginBookReply> obReply = rService.OriBookReply(bookNo, currentPage, boardLimit);

		obReply.get(0).setEndNavi(endNavi);
		obReply.get(0).setStartNavi(startNavi);
		obReply.get(0).setMaxPage(maxPage);
		obReply.get(0).setCurrentPage(currentPage);
		obReply.get(0).setTotalCount(totalCount);

		// 가져온 리플목록에 닉네임 추가하기
		for (int i = 0; i < obReply.size(); i++) {
			String mNickName = rService.getMemberNickName(obReply.get(i).getMemberId());
			obReply.get(i).setmNickName(mNickName);

		}

		// 가져온 리플목록 반환하기
		if (!obReply.isEmpty()) {

			Gson gson = new GsonBuilder().setDateFormat("yyyy-MM-dd").create();

			return gson.toJson(obReply);

		}

• 받아온 page의 변수는 리플목록 쿼리문으로 전달하여 반환받도록 하고 paging할수 있게 해주는 변수들은 리플 클래스에 새로운 변수를 담아 0번째 인덱스에 저장하여 반환해 사용하였다.
• 자세한 페이징 방법은 63. 스프링으로 게시물 리스트 페이징하기 (velog.io) 여기에서 볼수있다.