AJAX - API of increasing views

소개

  나는 웹페이지의 이동 없이 video 시청이 끝나면 view를 1증가시키고 싶다. 그러기 위해서 사용하는 것이 AJAX다. AJAX는 웹 페이지에서 서버로부터 동적으로 데이터를 주고 받을 수 있다. 그래서 다른 웹 페이지에 가거나 새로고침을 하지 않아도 그 웹페이지의 데이터를 로드할 수가 있다. JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술이라고 할 수 있겠습니다.\

  AJAX는 SPA(Single Page Application)의 기본 토대가 된다. SPA는 서버로부터 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션이나 웹 사이트를 말한다.

routes.js

  AJAX는 다른 페이지를 접속하지 않고 데이터를 로드하는 방식이기 때문에, 일단 실제 페이지를 생성하긴 해야 한다.

routes.js - api

routes.js - registerView

apiRouter.js

apiRouter.js

app.js

app.js

apiController.js

   req.params.id는 url 경로에서 :id 값을 가져온다. 해당 id 값은 videoId 값이다. 이 값으로 DB에서 video를 찾는다. 해당 video의 view 값을 1 증가 시키고 저장한다. finally로 res.end()를 해줘야 한다. 그렇지 않다면 videoDetail 페이지에서 view 페이지를 load를 계속 할 것이다. load하자마자 종료시켜야 원하는 데이터만 가져올 수 있다.

postRegisterView

설치

#npm i axios

  axios는 브라우저가 새로고침을 하지 않고 서버와 통신하여 페이지로부터 데이터를 로드할 수 있게 해주는 api다.

videoPlayer.js

  handleEnded는 영상이 끝나면 발생하는 event다. view를 등록하고 pause로 icon으로 되어 있는 playBtn을 다시 재생 버튼으로 바꾼다. 동시에 currentTime을 0으로 해서 playBtn을 누르면 다시 처음부터 재생하도록 하였다.

init()

handleEnded()

  먼저 window.location.href.split을 통해서 videoId 값을 가져온다. 그리고 axios api를 이용해서 페이지를 load한다. JS의 fetch와 유사한데 axios는 서버로 데이터를 보낼 수 있는 기능도 제공한다. 이 기능은 comment 부분에서 사용할 것이다. axios를 이용해서 DB의 view 값은 증가시켰지만 화면에는 바로 나타나지 않는다. 화면에서도 바로 view count가 증가하는 것을 보여주기 위해 upViewsCnt()를 사용했다.

global variables

registerView()

upViewsCnt

참고 자료

• 노마드 코더의 유튜브 클론 강의
• axios
• AJAX

소스 코드

github.com/zpskek/wetube-v3/commit/0f8192526357330d24cb681b456b826c67467393