Comment API

1. Error solution

 - 이전 상황에서 req.body를 했는데 아무것도 나오지 않았음

   - 우리는 서버가 이해할만한 것들을 보내고 있지 않기 때문

   - upload에서 form안의 input에 req.body를 사용해서 접근했음

   - server.js의 express.urlencoded({extended:true}) 미들웨어를 사용했기에 서버가 form으로부터 오는 데이터를 이해할 수 있었음

 - 이것과 비슷하게 서버가 fetch로부터 오는 데이터를 이해할수 있도록 가르쳐줘야 함

   - 우리가 fetch를 통해 보내는 데이터는 json 타입임

 - 그래서 우리는 fetch의 body를 받아서 stringify 해줘야 함

   - 알아둬야 할 것은 js는 객체를 보낼 수 없음

   - 브라우저나 서버는 이걸 받아서 string으로 만들기 때문

     - 댓글이 작성 될때마다 관리자도구의 네트워크를 보면 comment 요청이 string으로 바뀜

     - body: { text } 가 아닌 body: text를 보내야 함

 - [object object]가 아닌 댓글 내용이 잘 출력되지만 서버에서는 여전히 비어 있음

app.use(express.text());

 - 웹사이트에 request로 들어오는 text를 이해할 수 있는 미들웨어를 만들었음

   - 이제 서버 콘솔에도 댓글 내용이 잘 나오므로 프론트엔드에서 백엔드로 데이터를 보낼 수 있음

   - 하지만 지금은 text 한가지만 보내기에 문제없지만, 하나 이상의 것을 보낼 땐 문제가 됨

   - 그럴때는 객체를 보내야 하는데 이 때 JSON.stringify를 사용

  fetch(`/api/videos/${videoId}/comment`, {
    method: "POST",
    body: JSON.stringify(text),
  });

 - 여기서 의문점은 객체의 각 프로퍼티에 접근할 수 있느냐임

   - body에 2개 이상의 프로퍼티를 넣고 로그를 확인하면 이상하게도 정의되지 않았다고 나옴

   - 이유는 js의 객체가 아니기 때문

     - { id: '67430fabbc64af4727e45145' } // '{"text":"lala","rating":"55"}'

 - text 하나만 받는다면 좀전에 만든 미들웨어처럼 사용해도 되지만 프로퍼티가 많다면 text로 받으면 안됨
 - express는 쿨하게도 string을 받아서 json으로 바꿔주는 미들웨어가 있음

app.use(express.json());

 - 이 미들웨어는 string으로 변한 객체를 다시 json으로 바꿔줌

   - JSON.stringify()로 string으로 만들고, 미들웨어는 JSON.parse()로 JSON 형식의 문자열을 js 객체로 만듦

 - 하지만 아직도 req.body는 비어있음

   - 역시나 해결할려면 express에게 json을 보내고 있다고 알려줘야함

  fetch(`/api/videos/${videoId}/comment`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ text: "lala", rating: "55" }),
  });

 - 이렇게 하고 나니 이제야 req.body의 값이 잘 나옴

 - 우리는 js 객체를 받아서 string으로 바꾸고 브라우저로 보낼 수 있도록 했음

   - 그리고 서버에 도착하면 string을 js 객체로 다시 바꿔서 req.body 같은 것들을 할 수 있게 됨

   - 이 과정이 프론트엔드와 백엔드간에 큰 객체를 보낼 때 사용하는 방법

   - 백엔드에서는 미들웨어 덕분에 string을 json 형식의 문자열을 js 객체로 변환해서 사용할 거라고 이해하게 됨

 - 그리고 이제 textarea가 비어있으면 request를 보내지 않게 할거임

2. Commenting

 - 이제 백엔드는 댓글을 달기 위해 필요한 모든 것을 가지고 있음

 - 남은건 댓글을 작성한 유저가 누군지 알아야 함

 - 백엔드로 보내는 모든 request는 쿠키와 함께 온다는 걸 기억해야 함

 - 관리자 도구를 보면 댓글을 작성할 때 network request가 많은 것들과 함께 보내짐

 - 우리는 백엔드에 쿠키를 보내고 있는 거임

   - 쿠키를 보내면 백엔드는 세션을 찾아봄

   - 우리는 유저를 세션에 이미 추가해뒀음

 - 그 말은 그냥 fetch만 하면 브라우저의 작동원리에 의해 쿠키는 자동으로 부라우저에 전송되고 videoController에서 쓸 수 있는 뭔가가 있다는 것

 - 별다른걸 하지 않아도 댓글을 작성하니 작성한 유저의 세션정보를 가져옴

   - 이건 localhost:4000에서 localhost:4000으로 fetch request를 보내기 때문에 가능

   - 브라우저는 같은 프론트엔드에서 백엔드로 보낸다는 것을 알기에 쿠키의 원칙에 의해 우린 쿠키를 자동으로 받을 수 있음

   - 그리고 백엔드가 쿠키를 이해할 수 있도록 설정하였기 때문에 쿠키의 유저정보를 받을 수 있음

 - 다음으로 할건 백엔드 부분임

 - 댓글이 작성됐을때 댓글이 바로 나타나게 하는 것도 구현해야함

3. Rendering Comment

 - db.comment에는 댓글이 작성되있지만 user를 보면 댓글 배열이 비어져있음

const video = await Video.findById(id).populate("owner").populate("comments");

 - 이렇게 하면 해결되나 싶었지만 여전히 안됨

 - 이유는 id를  영상에 넣어줘야 하는데, 즉 댓글이 작성되면 영상이 업데이트 되야함

 - 실시간으로 보이길 원하면 handleSubmit안에서 async await을 해볼 수 있지만 나중에 할거임

 - 임시로 이렇게 할 수는 있지만 화면이 깜빡거린다는건 새로고침 한단 소리임