Realtime Comment

1. Realtime Comment
 - fetch는 백엔드로 가고 백엔드는 db랑 뭔가를 하고 나서 상태코드를 리턴하고 이후 우리에게 돌아오는데 이때 시간이 소요됨
   - 그렇기에 fetch에 await을 사용
 - 이게 없어도 작동은 하지만 페이지가 새로고침 됐는데 fetch가 끝나지 않으면 시간이 그만큼 충분하지 않았다는 거임
 - 조회수는 간단하기에 필요없지만 지금은 필요함
 - fetch는 Promise를 리턴하는데 이게 시간이 좀 걸림
   - 그래서 fetch 이후의 코드는 fetch 동작이 끝났을 때만 실행되도록 함
 - 끝났다라는 표현은 동작이 성공했다는 것과는 다른 개념임

 - 우리가 만든 videoController를 보면 때로는 404 상태코드를 리턴하기도 했음

   - 404 상태코드를 받아도 어쨋든 fetch는 끝남

 - fetch가 끝나기를 기다리는 것 뿐만 아니라 백엔드가 어떤 응답을 주는지도 알고 싶음

 - fetch를 보면 Promise를 리턴하는데 기다리면 Response를 준다고 되있으니 이게 뭔지 확인

 - 이걸 통해 Response안에 상태코드가 있다는걸 알게 되었음

 - 아니면 Response안에서 상태코드를 받을 수도 있음

 - 댓글을 작성하니 가짜라는 메시지가 잘 나옴

 - 가짜라고 한 의미는, 서버가 댓글이 만들어졌다고 응답한다면, 댓글 목록에 새로운 댓글을 생성하고 싶은 것

   - 즉 html 입장에선 리스트가 추가 된다는 것

   - 이걸 하기 위해 댓글의 구조가 어떤지 염두해 둬야함

   - 당장은 pug에서 댓글이 만들어지고 있는데 이걸 JS에서 새로고침이 필요없게 만들거임

 - 이렇게 하면 가라로 실시간 댓글을 구현할 수 있는데 문제는 제일 밑에 댓글이 달림

   - 이 문제는 마지막에 append대신 prepend를 쓰면 해결

2. Comment Ids

 - 작성한 댓글을 지울 수 있는 기능이 당연히도 있어야 함

 - 삭제 버튼을 만들고 클릭을 하면 fetch request를 보내서 댓글을 지우게 해야함

   - 즉 api 라우터, 컨트롤러를 만들고 유저가 댓글의 주인이 맞는지 지우기 전에 확인해야 하고, 또한 버튼이 모두에게 보이면 안됨

   - 댓글의 삭제권하는 댓글을 작성한 유저나, 영상의 주인이 되어야 함

 - fetch를 사용하는데 method로 get post가 아닌 것, 즉 delete도 보낼 수 있음

 - 또한 내가 댓글을 달았다면, 당연하게도 삭제버튼을 바로 가져야함

   - 하지만 페이지가 새로고침이 된것이 아니고 방금 댓글을 작성하고 그 댓글을 삭제하려고 하면 에러가 발생함

   - 내가 지우려는 댓글의 id를 알아야 하는데 페이지가 새로고침이 안되면 알 수가 없음

   - 만약 댓글이 pug에서 온다면 우리가 컨테이너에서 했던 방식대로 하면 됨

 - 하지만 이렇게 가라 댓글이 작성되고 나면 그 순간에는 id가 없으니 삭제를 시도하면 에러가 발생

 - 그래서 방금 작성된 댓글의 id를 알아보는 방법을 해볼거임

 - 우리는 videoController에서 새로 작성한 댓글에 접근이 가능하다는걸 알고 있음

 - 그래서 201 상태코드만 보내는 것 대신에 상태코드에 json을 더해줄거임

return res.status(201).json({ newComment: comment._id });

 - 전에는 상태코드만 받았는데 이젠 response를 받고 있는데 이걸 추출을 해야함

 - 1번에서 봤듯 fetch를 하면 response를 리턴해줌

 - 하지만 response안에는 id가 없음

   - response안에 body에서 추출, 즉 response의 json을 얻어야 함

 - 일부러 가라 댓글엔 삭제버튼을 표기 안했는데 id가 잘 나옴

 - https://github.com/Daniel-Jeon/wetube-loaded/commit/0f13646f972ce3830d3ace20287d3e740a444d34

80% complete comment section · Daniel-Jeon/wetube-loaded@0f13646