[유튜브 클론코딩] 10.3 API Adding a Comment part.2

10.3 API Adding a Comment part.2

🍓이번시간에 할 것

덧글(Comment) 기능의 프론트엔드부분을 구현할 것이다.

---

comment를 하나 만들어보자 이번에는 Ajax로 보내보자

 

videoDetail.pug에서 id 추가하기

.video__comments

            if video.comments.length === 1

                span.video__comment-number 1 comment

            else

                span.video__comment-number #{video.comments.length} comments 

            form.add__comment#jsAddComment

                    input(type="text", placeholder="Add a comment", name="comment")

            ul.video__comments-list 

                each comment in video.comments

                    span comment.text 

↑ videoDetail.pug

덧글작성폼에 자바스크립트 작성을 위한 id를 추가한다.(#jsAddComment)

 

assets > js > addComment.js 만들어서 작성하기

당연히 main.js에 import해주는거 잊지말자.

const addCommentForm = document.getElementById("jsAddComment");

const handleSubmit = (event) => {

    event.preventDefault();

    const commentInput = addCommentForm.querySelector("input");

    const comment = commentInput.value;

}

function init(){

    addCommentForm.addEventListener("submit", handleSubmit);

}

if(addCommentForm){

    init();

}

↑ addComment.js

늘 그랬듯이 addCommentForm이 있다면 init을 실행하도록 하고 init에 작성하는 식으로 한다.

comment form을 addCommentForm으로 가져와서 , submit되었을 때 handleSubmit 함수가 실행되도록 하고, handleSubmit에서는 event를 받아와서 preventDefault 메소드를 이용해서 원래 이벤트의 기본 동작을 제어한다. 원래 form에서는 submit하면 새로고침 되는데 새로고침이 안되게 하고 싶어서 이다. (이거 예전에 TO-DO 리스트 만들기에서도 이렇게 했었음!)

 

이제 함수를 하나 만들건데, 이 함수는 이걸 api로 보내주는 기능을 할 것이다.

우리는 axios를 이전에 이미 설치했었다. axios를 import 해준다.

import axios from "axios";

 

 

const addCommentForm = document.getElementById("jsAddComment");



const sendComment = (comment) => {

    console.log(comment);

}

const handleSubmit = (event) => {

    event.preventDefault();

    const commentInput = addCommentForm.querySelector("input");

    const comment = commentInput.value;

    sendComment(comment);

    commentInput.value = "";

}

function init(){

    addCommentForm.addEventListener("submit", handleSubmit);

}

if(addCommentForm){

    init();

}

↑ addComment.js

comment는 commentInput의 value이고 그걸 가지고 sendComment(comment)를 실행시킨후 commentInput의 value는 아무것도 없게 바꾼다. 일단은 comment를 콘솔로 확인하도록 작성한다.

여기까지 해보고 실행해보면 콘솔에 comment가 잘 보인다.

 

const sendComment = async (comment) => {

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

    const response = await axios({

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

        method: "POST",

        data: {

            comment

        }

    });

    console.log(response);

}

↑ addComment.js

axios를 사용하기 위해 URL을 먼저 얻어와야 하는데, id를 얻을 필요가 있다.

이건 저번에 했었으니까 그걸 그대로 복붙하면 된다.

그리고 이건 비동기로 작성을 하면 되고, fetch에서 했던 것처럼 url을 작성하면 되는데 저렇게 그냥 한번에 url:하고서 넣어줘도 된다. data가 comment라는 것은 덧글 폼에서 submit했을 때 handleSubmit 함수가 실행되고, 그 안에서 작성한 내용인 comment를 가지고 sendComment 함수를 실행한다고 했으니, sendComment로 전달받은 파라미터인 덧글 내용이 되겠다.

 

여기까지 한 후 실행해보면, response가 콘솔에 잘 뜬다.

(그런데 꼭 로그인을 하고 하길 바란다!! 우리가 일전에 코드를 작성할 때 req.user도 가져왔었기 때문에 로그인을 안하면 오류가 난다. comment의 creator로 req.user.id가 들어가기 때문에)

(그리고 videoDetail.pug에서 span부분도 span=comment.text 이렇게 '='을 붙여주면 덧글까지 보인다. )