Views API

1. Views

 - 이번에 해볼건 조회수 관리임

 - 이번에는 랜더링하지 않는 views를 만들어 볼건데 이런걸 api views라고 함

 - 대부분 브라우저에서 이렇게 작동하고 있는데, 요즘 시대에는 백엔드에서 템플릿을 랜더링하지 않음

   - 대부분의 웹 앱은 프론트와 백을 정확히 나누고 있기 때문

   - 백엔드에서 db와 인증을 처리하고 프론트에서는 리액트 같은 걸로 만듦

 - 우리가 사용하고 있는 방식은 SSR(Server Side Rendering)

   - 즉 서버가 템플릿을 랜더링 하는 것까지 처리

   - 요즘은 리액트로 프론트를 만들고 nodejs로 백엔드를 처리

   - 사실 nodejs로 템플릿을 랜더링하지 않음

 - 지금 하게 될 새로운 방식의 views를 만들고 나면 차이를 알 수 있게 됨

 - api는 백엔드가 템플릿을 랜더링하지 않을 때 백엔드와 프론트가 통신하는 방법을 말함

 - 라우터파일 따로 만들고 지지고 복고는 하도 많이 했으니 알아서 함

 - 우리는 유저가 영상 시청을 마칠 때 마다 백엔드에 요청을 보내 조회수를 올릴거임

   - 하지만 요청으로 url을 바꾸지 않을거임

 - 지금까지 우리는 브라우저에서 url을 호출하는 것에 익숙해져 있었음

   - 홈에 가면 백엔드의 컨트롤러가 실행되었음

 - 하지만 interactive하게 이동없이 url을 호출할 수 있는 기본적인 방법을 배울거임

   - interactive하다는건 url의 변화없이 페이지에 변화가 생긴다는 것

   - 다른 웹사이트에서 댓글 같은걸 적었을때 페이지 변화가 없는 것

   - pug을 사용하는건 사실 전혀 interactive하지 않음

     - url을 바꿔 강제로 백엔드가 뭔가를 하게 만드는 유일한 방법이기 때문

 - 이제 클라이언트에서 비디오 플레이어에 url로 요청하는 이벤트를 추가할거임

2. Client

 - 우리가 추가하려는 이벤트는 유저가 영상 시청을 끝냈을 때 발생함

 - 하지만 잘 생각해보면 handleEnded 함수는 id를 모름

 - 템플릿을 랜더링하는 pug에게 영상의 정보를 남기라고 해야함

   - watch.pug에 힌트가 있는데 거기에 있는 코드가 백엔드에 의해 컴파일되면서 video 객체를 만들고 있기 때문

 - 가장 좋은 방법은 직접 데이터를 만들어서 html에 저장하는 방법

 - 여기서는 data attribute를 사용해야 함

 - data attribute는 data-로 시작하는 속성을 말하며, 여기에 우리가 원하는 걸 저장할 수 있음

   - html specification과도 문제 없음

 - 그리고 dataset을 이용하면 자바스크립트로 데이터에 쉽게 접근할 수 있음

const handleEnded = () => {
  const { id } = videoContainer.dataset;
  fetch(`/api/videos/${id}/view`, {
    method: "POST",
  });
};
video.addEventListener("ended", handleEnded);

3. sendStatus

 - status만 해서 api 응답이 잘 안보내질 수 있으므로 sendStatus를 사용

   - 필자는 잘되는데 강의에선 api 응답이 보내지질 않았음

 - 사실 우리는 지금 상태코드를 사용하고 

   - 심지어 조회수 기능에서는 꼭 사용하지 않아도 됨

 - 하지만 차후에 댓글 기능을 만들 때는 상태코드를 제대로 사용할 거임

   - 조회수의 경우 처리되지 않고 넘어가도 유저에게 전혀 지장이 없지만 댓글의 경우 작성이 잘 됐는지 확인을 해야 하기 때문

 - https://github.com/Daniel-Jeon/wetube-loaded/commit/8954e1246d2061ed1acfa7c8bd22bd2588e3f1f6

views api · Daniel-Jeon/wetube-loaded@8954e12