[유튜브 클론코딩] 10.1 API Registering a View part.2

10.1 API Registering a View part.2

😎이번 시간에 할 것

지난 시간에 백엔드에서 작성한 URL에 접근하기 위해 프론트엔드를 작성할 것이다.

 

assets > js > videoPlayer.js로 가서 코드 작성하기

우리가 비동기 통신으로 처리해줘야 할 기능이 조회수 기능과 덧글 기능이 있는데, 일단 지금 하는 조회수 기능은 fetch로 할 것이고 덧글기능을 위해서는 axios를 사용할 것이다.

 

동영상이 있는 페이지에서 console로 fetch("http://localhost:4000/api/60531411f3ca0d4f485c23ea/view")라고 치면 pending 상태의 promise가 뜬다. 이처럼 fetch는 promise를 반환한다.

 

const registerView = () => {

    fetch("http://localhost:4000/api/60531411f3ca0d4f485c23ea/view");

}

↑ videoPlayer.js

 

registerView가 기본적으로 해야하는건 fetch("!@#$어쩌고저쩌고 URL") 이런 것이다.

이건 우리가 원하면 await할 수 있다. 근데 사실 우린 결과를 그렇게 신경쓰지 않을 것이기 때문에 await 같은건 하지 않을 것이다. 보통 await은 뭔가를 끝나길 기다릴때 쓰는데, 이 경우에는 우린 view를 보내고 이게 끝났는지 그닥 신경쓰지 않기 때문이다.

 

const registerView = () => {

    fetch("/api/60531411f3ca0d4f485c23ea/view");

}

↑ videoPlayer.js

이렇게만 써도 작동을 한다. 왜냐면 우린 getRequest를 가지고 있기 때문이다.

 

apiRouter.get(routes.registerView, postRegisterView);

↑ apiRouter.js

이게 getRequest이다.  그런데 이걸 get -> post로 바꿔주겠다.

 

apiRouter.post(routes.registerView, postRegisterView);

↑ apiRouter.js

 

const registerView = () => {

    fetch("/api/60531411f3ca0d4f485c23ea/view", {

        method: "POST"

    });

}

↑ videoPlayer.js

 

postRequest가 필요한 이유는 다음과 같다. 만약 데이터베이스를 변경할 필요가 없으면 이건 getRequest여야하고 만약 데이터베이스를 변경해야 하면 그건 반드시 postRequest여야 하기 때문이다.

 

window.location.href 활용하여 videoid 얻기

근데 fetch안에 들어갈 URL을 다음과 같이 작성하면 비디오마다 저 중간에 들어갈 id가 다르기 때문에 모든 비디오에 적용이 될 수 없다. 그러므로 우리는 자바스크립트로 id를 받아올 방법을 찾아야 한다. 그것을 위해 window.location.href를 이용해보겠다.

 

콘솔에 window.location을 해보면 href가 들어있다. 즉 window.location.href를 가지고 url을 얻어올 수 있다

 

내가 하고 싶은건 id부분(/videos/비디오id <<이 부분)을 얻어보는 것이기 때문에

그래서 난 split라는 함수를 쓸 것이다.

split은 string을 가져와서 분할하는 메소드이다.

 

이렇게 split("4000")으로 쪼개면 "4000" 이전에 있는 string 한 개, "4000" 이후에 있는 string 한 개 이렇게 준다. 그리고 쪼개진 배열을 반환한다.

 

우리는 split("/videos/")로 나눌 것이다. 두번째 부분이 id가 된다. 이게 정확히 우리가 원하는 것이다.

 

const registerView = () => {

    const videoId = window.location.href.split("/videos/")[1];

    fetch(`/api/${videoId}/view`, {

        method: "POST"

    });

}

↑ videoPlayer.js

즉 우리는 이렇게 videoId를 얻어올 수 있고, fetch부분에서 비디오아이디를 변수로 가져올 수 있는 것이다.

 

init()안에서 registerView를 실행시키기

이제 init()에다가 registerView를 실행시켜야 작동할 수 있다.

우리는 비디오가 끝나야 view를 증가시키고 싶고,

비디오가 끝났을 때 동작하는 함수 handleEnded는 전에 만들어두었으니 handleEnded 안에서 registerView를 실행시키면 된다.

function init(){

    videoPlayer.volume = 0.5;

    playBtn.addEventListener("click", handlePlayClick);

    volumeBtn.addEventListener("click", handleVolumeClick);

    volumeRange.addEventListener("input", handleDrag);

    fullScreenBtn.addEventListener("click", goFullScreen);

    videoPlayer.addEventListener("loadedmetadata", setTotalTime);

    videoPlayer.addEventListener("ended", handleEnded);

}

↑ videoPlayer.js - 전에 작성해둔 init 함수

 

function handleEnded(){

    registerView();

    videoPlayer.currentTime = 0;

    playBtn.innerHTML = '<i class="fas fa-redo"></i>';

}

↑ videoPlayer.js

 

registerView를 실행하면 url로 부터 id를 얻어서 postRequest를 보내는 것이다.