TIL

2020-07-09 Post Register API

Hoon1994 2020. 7. 9. 20:22

#Node.js

 

어제 작업했던 코드를 get에서 post로 변경하고 (데이터를 변경하기 위해),  함수 하나를 추가해줬다.

 

const registerView = () => {
  const videoId = window.location.href.split("/videos/")[1];
  fetch(`/api/${videoId}/view`, {
    method: "POST"
  });
};

function handleEnded() {
  registerView();
  videoPlayer.currentTime = 0;
  playBtn.innerHTML = '<i class="fas fa-play"></i>';
}

 

현재 url을 가져온 후 /videos/를 기준으로 split하고, 1에 해당하는 배열을 가져온다. 

1에 해당하는 배열은 video의 id가 되고, fetch를 해당 api/id/view로 요청한다. 이 때 메소드는 post가 된다. 

 

그리고 비디오가 끝날 때 handleEnded 함수가 실행되게끔 했는데, 이 함수 안에 작성한 registerView() 함수를 추가한다.

비디오가 끝날 때 api를 호출하게 되고, View Count가 1증가하게 된다! 

 

다음은 통신 라이브러리인 axios를 사용하여 코멘트 작성 기능을 구현하는 강의를 볼 계획이다. 

'TIL' 카테고리의 다른 글

2020-08-18 Vue Dynamic Store  (0) 2020.08.18
2020-08-04 Life Cycle  (0) 2020.08.04
2020-07-08 Register API  (0) 2020.07.08
2020-07-06 Volume & Modal Router  (0) 2020.07.06
2020-07-02 Customize Video Player  (0) 2020.07.02