#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 |