<API AJAX> 조회수

AJAX

Ajax(Asynchronous JavaScript and XML, 에이잭스)는 비동기적인 웹 애플리케이션의 제작을 위해 아래와 같은 조합을 이용하는 웹 개발 기법이다.

• 표현 정보를 위한 HTML (또는 XHTML) 과 CSS
• 동적인 화면 출력 및 표시 정보와의 상호작용을 위한 DOM, 자바스크립트
• 웹 서버와 비동기적으로 데이터를 교환하고 조작하기 위한 XML, XSLT, XMLHttpRequest (Ajax 애플리케이션은 XML/XSLT 대신 미리 정의된 HTML이나 일반 텍스트, JSON, JSON-RPC를 이용할 수 있다).
  - 위키백과 -

prject

youtube
 *|app.js
 *|routes.js
  |routers
   +|apiRouter.js
  |controllers
   *|videoController.js
  

routes.js

• '/api'
  데이터 베이스를 변경하기 위한 URL
• '/api/:id/view'
  데이터 베이스중에서 비디오의 views를 변경하기 위한 URL

const API = '/api';
const REGISTER_VIEW = '/:id/view';

const routes = {
  api: API,
  rgisterView: REGISTER_VIEW,
};

export default routes;

videoController.js

• try catch finally
  try catch문은 흔하지만 finally사용하는 경우는 드문데요. finally는 에러 발생 여부와 관계없이 실행될 코드를 적어주면 됩니다.
• res.end()
  response를 종료한다고 생각하면 됩니다.

export const postRgisterView = async(req, res) => {
  const {params:{id}} = req;
  try{
    const video = await Video.findById(id);
    video.views += 1;
    video.save();
    //정상
    res.status(200);
  }catch(){
    //에러
    res.status(400);
  }finally{
    res.end();
  }
}

apiRouter.js

import express from 'express';
import routes from './routes';
import {postRegisterView} from '../controllers/videoController';

const apiRouter = express.Router();
apiRouter.post(routes.registerView, postRegisterView);

app.js

import apiRouter from './routers/apiRouter';

app.use(routes.api, apiRotuer);

fetch

fetch는 url에 get method로 요청을 보냅니다. 눈에 보이진 않지만 url에 접속하는거죠. 브라우저 콘솔에서 fetch('http://localhost:4000/api/:id/view', {method:'POST'})를 작성하고나서 새로고침후에 view를 확인하면 view가 1 늘어나있을 겁니다.

project

youtube
  |assets
    |js
     *|videoPlayer.js

videoPlayer.js

• fetch
  fetch를 await하면 결과를 받아올 수 있지만 우리는 현재 결과를 받아올 필요 없이 접속하기만 하면 되기 때문에 await는 하지 않았습니다. 또한 default method는 GET이기 때문에 POST method로 요청을 하기 위해서는 option값을 추가해주어야합니다.

• window.location.href
  현재 접속한 주소를 가지고 있습니다.

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

function init(){
   videoPlayer.addEventListener("ended", registerView);
}