[유튜브 클론코딩] 10.4 API Adding a Comment part.3

10.4 API Adding a Comment part.3

🍒이번시간에 할 것

댓글 추가를 페이크(fake)로 할 것이다.

무슨 말이냐면, 누군가 댓글을 달면 덧글 수가 하나 추가된 거처럼 보이고, 방금 작성한 덧글이 보이도록 할 것이다.

(그러니까 지금 현재 덧글을 작성하면 새로고침을 해야 반영이 되니까 새로고침하지 않고도 바로 반영이 된 것처럼 보이고 싶어서 그러는 것이다 → 리얼타임처럼 보이고 싶어서 페이크를 하는 것)

 

🍒 axios의 status code를 listen할 거고 status code가 200이면 그때 댓글이 추가됐다는 거니까 즉 댓글을 페이크로 달 것이다.

---

addComment 함수 만들기(addComment.js)

const addComment = (comment) => {

    const li = document.createElement("li");

    const span = document.createElement("span");

    span.innerHTML = comment;

    li.appendChild(span);

}

이렇게 만든 후 sendComment 함수에서 호출한다.

 

const sendComment = async (comment) => {

    const videoId = window.location.href.split("/videos/")[1];

    const response = await axios({

        url: `/api/${videoId}/comment`,

        method: "POST",

        data: {

            comment

        }

    });

    if(response.status === 200){

        addComment(comment);

    }

}

오직 status가 200이여서 OK일 때에만 addComment함수를 호출하는 것이다.

 

 

 ul.video__comments-list#jsCommentList

                each comment in video.comments

                    li

                        span=comment.text

↑ videoDetail.pug

comment list에 해당하는 부분에 아이디를 추가한다.(#jsCommentList)

 

const commentList = document.getElementById("jsCommentList");



const addComment = (comment) => {

    const li = document.createElement("li");

    const span = document.createElement("span");

    span.innerHTML = comment;

    li.appendChild(span);

    commentList.prepend(li);

}

↑ addComment.js

commentList를 가져온 다음, li를 자신의 첫번째 자식으로 삽입한다. (prepend면 첫번째 자식으로 삽입하는 것이고 append면 마지막 자식으로 삽입하는 것이다.)

 

숫자도 하나 늘은 것처럼 페이크하기

if video.comments.length === 1

   span.video__comment-number

        span#jsCommentNumber 1

            |comment

else

   span.video__comment-number

        span#jsCommentNumber=video.comments.length

            |comments 

videoDetail.pug

여기 비디오 덧글 수를 나타내는 span태그에 jsCommentNumber라는 아이디를 추가한다.

 

최신덧글부터 보이게 수정하기(.reverse())

 each comment in video.comments.reverse()

videoDetail.pug에서 이렇게 reverse()를 주면 최신덧글부터 보인다.(array에서 사용되는 reverse 메소드 그거 맞음)

 

🌭아무튼 이렇게 하고 실행을 해보면 마치 실제로는 리얼타임이 아니지만 리얼타임처럼 작동하는 것 처럼 보인다.