view +1 API

API라는 것을 이용해보려고한다. 
API를 사용하면 URL이 바뀌지 않아도 페이지에서 변화가 생긴다.

interactive하게 만들수 있는 가장 기본적 방법이다. 
예를들어 이 페이지에 댓글을 달아도 URL이 바뀌지 않는다. 어떠한 API가 발생한 것이다.

이번에 프론트엔드에서 자바스크립트로 요청을 해볼것이다.

 

video element에는 특별한 event가 있다.  ended이다. 미디어가 끝까지 재생완료된 시점에 발생한다.

fetch()를 활용할 것인데 
기본적으로 '/'만 적어도 (http://localhost8080) 우리 웹사이트에 요청을 보낼 수 있다.

하지만 handleEnded함수에서 비디오의 id를 알 수 있는 방법이 없다.

id의 정보를 pug가 남기도록 해야한다. 여기서 data attribute를 활용할 수 있다.

data-로 시작하는 어트리뷰트를말한다. 원하는것 무엇이든지 저장이 가능하다.
data attribute에 접근하려면 dataset을 이용하면 된다. 
백엔드와 프론트엔드에서 데이터를 공유하는 가장 쉬운 방법이다.

정리하자면 pug가 템플릿에 어떤 정보를 남겼고 프론트엔드에서 자바스크립트로 그 정보에 접근할 수 있게 되었다.

fetch를 통해서 서버로 요청을 보낼 수 있다. 뒤에 option에 method를 POST로 해주고 보내자 그렇지 않으면

기본적으로 GET Method가 실행된다.

 

video가 끝나면 이제 front는 api를통해 http://localhost8080/api/videos/id/vp 로 POST request를 보내게된다.

이 url을 서버에서 받는 것을 만들어보자

 

apiRouter.js

apiRouter.js를 만들고

vp handler를 만들어주자. 

url에 들어있는 값을 req.params로 받아오고

findById를 통해 찾은 뒤 video가 없다면 404 에러 메시지를 보내고 아니라면

views를 +1해준뒤 끝내도록 해주었다.

 

여기서 주의해야할 점이 있다.

만약 res.status()만 적으면 끝난 것이 아니다. 이건 응답에 상태코드를 추가하기만 했을 뿐이다.
뒤에 render()를 같이 써줘야 status()를 추가한 의미가 있다. 이렇게만 해주면 vp api는 pending상태에 있을 것이다.  

 

그래서 sendStatus()를써야한다. 이건 상태코드를 보내고 연결을 끊는다.

이렇게 간단하게 api를 만들어보았다.

나중에 댓글 api를 만들어볼 때 한번 더 다뤄볼 수 있을거같다.!!