저기에 리스트를 쫙! 불러올것이다 !
HTML 의 구성은
이렇게 되어있고 자바스크립트로
빨간색 박스에 넣어줄 것이다 !
자바스크립트로 불러와 보자 !
주소는 여기이고
이렇게 서버에서 가져올 것이다
function showReplies(pageNum = 1) {
fetch(URL + '?boardNo=' + bno + '&pageNum=' + pageNum)
.then(res => res.json())
.then(replyMap => {
makeReplyDOM(replyMap);
});
}
function showReplies(pageNum = 1) {
showReplies 함수의 기본값은 1
fetch(URL + 'boardNo=' + bno + '&pageNum=' + pageNum)
이렇게 넣으면
.then(res => res.json()) .
then(replyMap => { makeReplyDOM(replyMap); }); }
그렇게 해서 나온 값이
replyMap 인데
그걸 makeReplyDOM 함수에 넣는다는 뜻 !
fetch(URL + 'boardNo=' + bno + '&pageNum=' + pageNum) 이 렇게 넣어야 하는 이유는 ?
get 일때 이 함수에 넣어줘야 하고
이 함수는 boardNo 게시판 글번호 , 그리고 몇페이지에있는 댓글인지 넣어줘야 불러온다 !
저 맵에는 뭐가 들어있을까 ?
댓글 정보를 가지고있는 replyList 와
page 정보로 페이지를 만들어주는 maker // 페이지 네이션 참고 해주길 바람
https://studyplan.tistory.com/162//
페이지네이션 , Pagination 만들어지는 과정 1
페이지 정보를 담을 page class 를 만든다 현재 페이지 값인 pageNum , 현재 페이지의 값을 담을 amount 기본적으로 들어갈 페이지 갯수 , 맨처음에 나올 화면 세팅 setPageNum setAmount 2. 페이지 메이커를만.
studyplan.tistory.com
댓글 총 갯수를 가져오는 Count 가 있다 !
이제
makeReplyDOM(replyMap); 이 함수를 볼 순서이다 !
이렇게 두 부분으로 나와있고 !
function makeReplyDOM({replyList,count,maker}) {
replyMap 안에 replyList,count,maker 이 값을 받아와서
// 각 댓글 하나의 태그
let tag = '';
if (replyList === null || replyList.length === 0) {
tag += "<div id='replyContent' class='card-body'>댓글이 아직 없습니다! ㅠㅠ</div>"; 댓글이 아무것도 없을수 있으니까 이런 함수를 만들고 !
있다면 !?
} else { 있다면
for (let rep of replyList) {
tag += "<div id='replyContent' class='card-body' data-replyId='" + rep.replyNo + "'>" + 댓글 번호 ! 세팅
" <div class='row user-block'>" +
" <span class='col-md-3'>" +
" <b>" + rep.replyWriter + "</b>" + 작성자 세팅
" </span>" +
" <span class='offset-md-6 col-md-3 text-right'><b>" + formatDate(rep.replyDate) + 날짜 변환
"</b></span>" +
" </div><br>" +
" <div class='row'>" +
" <div class='col-md-6'>" + rep.replyText + "</div>" + 댓글 내용 !
" <div class='offset-md-2 col-md-4 text-right'>" +
" <a id='replyModBtn' class='btn btn-sm btn-outline-dark' data-bs-toggle='modal' data-bs-target='#replyModifyModal'>수정</a> " +
" <a id='replyDelBtn' class='btn btn-sm btn-outline-dark' href='#'>삭제</a>" +
" </div>" +
" </div>" +
" </div>";
}
}
// 댓글 목록에 생성된 DOM 추가
document.getElementById('replyData').innerHTML = tag;
// 댓글 수 배치
document.getElementById('replyCnt').textContent = count;
// 페이지 렌더링
makePageDOM(maker);
이건 따로 .. 설명 안함 .. 페이지 네이션에서 많이 함.
formatDate(rep.replyDate)이게 궁금할수도 있는데 이건 따로 게시 해보려고 한다 !
완성 !
