자바스크립트 비동기 fetch(), .then() GET 방식 // 댓글 리스트 불러오기 /리스트 구조 만들기

 

 

 

 

 

                                                                   html  구조 ! 

댓글 불러오기 !

const boardNo = 300;

        const url = 'http://localhost:8183/api/v1/replies';

        fetch(url + '?boardNo=' + boardNo)

            .then(res => res.json())

            .then(replyMap => {

                makeReplyDOM(replyMap.replyList);

            });

-------------------------------------------------------------------------------

 

  fetch(url + '?boardNo=' + boardNo) //

http://localhost:8183/api/v1/replies'에 boardNo 인 데이터를 가져옴

then. 그래서 가져온게 

res 인데 

res를 json() 제이슨으로 바꿈 

그렇게 바꾼게 

replyMap 이다 

그래서 

 makeReplyDOM 이라는 함수에 replyMap안에있는 replyList 를 넣어라  라는뜻 

 

 makeReplyDOM  함수 설명 

function makeReplyDOM(replyList) {

            const $ul = document.getElementById('replies');

            replyList.forEach(rep => {

                const {replyWriter, replyText, replyNo} = rep;

                const $li = document.createElement('li');

                $li.dataset.rno = replyNo;

                $li.textContent = `작성자: ${replyWriter}, 내용: ${replyText}`;

                const $delBtn = document.createElement('button');

                $delBtn.classList.add('del-btn');

                $delBtn.textContent = '삭제';

               

                $li.appendChild($delBtn);

                $ul.appendChild($li);

            });

 

 const $ul = document.getElementById('replies');

id 가 replies 인 ul 태그를 잡아옴 

 

   replyList.forEach(rep => { 

   잡아온 replyList 를 for 문을 돌린다 ! 모두 ! 

그 결과는 rep 인데

                const {replyWriter, replyText, replyNo} = rep;

replyWriter, replyText, replyNo 이것만 쓰겠다 

                const $li = document.createElement('li');

<li> 를 추가하겠다 

                $li.dataset.rno = replyNo;

<li> 안에 데이터를 넣을건데 rno로 넣을꺼고 그 값은  rep 안에 있는 replyNo 라는 숫자를 붙여준다 

                $li.textContent = `작성자: ${replyWriter}, 내용: ${replyText}`;

말은 작성자 : 내용 : 이런식으로 나오고 그 값은 rep 에서 떼어온 

{replyWriter} 과 replyText 이다 

                const $delBtn = document.createElement('button');

요소 하나 더 추가하는데 이름은 delBtn 이거인 버튼이다 

                $delBtn.classList.add('del-btn');

그 버튼에 class="del-btn" 라는 속성을 달아줄것이다 

                $delBtn.textContent = '삭제';

delBtn버튼에 이름은 '삭제' 이다  

                $li.appendChild($delBtn);

delBtn 을 li 에 붙여주고  

                $ul.appendChild($li);

그 li 를 ul 밑에 붙여준다

 

작성자 : replyWriter 내용 : replyText / 삭제 delBtn 

 

ul 안에 > li 포함 , 버튼 , dataset 까지 완성 된걸 볼수있다