Comment 2 (delete)

addComment의 함수를 살펴보자.

이건 댓글창에 실시간으로 댓글이 작성되어 보이도록 해주는 기능이다. 이걸 굳이 만들지 않고

window.location.reload()를해주면 새로고침이 되는데 새로고침이 되면 mixin이 video.comments에서 값을 받아와 자동으로 댓글을 만들어 주지만 새로고침이 되는 창이 거슬리기 때문에 바로바로 realtime으로 만들어주는 기능을 구현한 것이다.

watch.pug

❌표시는 현재 로그인 되어있는 유저와 댓글 작성자가 일치할 경우에만 보이도록 해주었다.

위의 watch.pug에 있는 li를 만들어주는 함수이다. 받아온 text값과 commentId의 값을 

각 각 정해진 자리에 입력을 해준뒤 만들어주면된다. 

 

여기서 특별한 부분은 span2에 handelDelete를 넣는 것이다. 

이건 그 댓글을 삭제해주는 기능인데 단순히 브라우저에서만 지우는 것이아니라

mongoDB에 있는 데이터까지 삭제해야하기때문에 commentId가 필요하다. 따라서 commentId를 굳이 가져와서 dataset.id에 집어넣어준 것이다.

liParent는 span ❌를 클릭하면 그의 부모요소인 li를 가져오게되고,

li에는 comment의 id가 들어있으니 이를 활용할 수 있다.

fetch를 통해서commentId를 Url에 담아 보낸다. method는 delete를 해주었다.

 

apiRouter.js

videoContorller.js

commentId값을 params에서 가져온 뒤 comment를 찾고 현재 로그인 되어있는 유저와 댓글의 작성자가 일치하지 않으면 돌려보내는 분기와 comment가 존재하지 않는 경우에 돌려보내는 분기문을 만들어 주고 해당사항이 없으면

findByIdAndDelete를 사용하여 없애주었다. 그리고 다시 handleDelete로 돌아가서 그 response의 값이 200인 경우에는

liParent.remove()를 통하여 브라우저에서도 보이지 않도록 지워주었다.