19.11.25 조회수 api 등록 (fetch 이용)

API 등록하기

비디오 플레이 버튼을 누를 때마다 VIEW (조회수) 상승시키기

1. 경로 설정

routes.js

// api

const API = "/api";
const REGISTER_VIEW = "/:id/view";
...
const routes = {
...,
  api: API,
  registerView: REGISTER_VIEW
}

2. 라우터 등록

apiRouter.js

import express from "express";
import routes from "../routes";
import { postRegisterView } from "../controllers/videoController";
const apiRouter = express.Router();

apiRouter.post(routes.registerView, postRegisterView)

export default apiRouter;

• routes.registerView 경로로 페이지가 이동시
  postRegisterView 함수 실행

3. 컨트롤러 연결

videoController.js

export const postRegisterView = async (req,res) => {
    const {
        params : { id }
    } = req;
    try {
    	// 성공시 비디오 (id값으로 찾아서) view 숫자 증가
        const video = await Video.findById(id);
        video.views += 1;
        video.save();
        res.status(200);
    } catch (error) {
        res.status(400);
    } finally {
    	// 성공이든 실패든 응답 종료시킴
        res.end();
    }
}

4. 프론트단 fetch 설정하여 api 경로로 이동

ex) http://localhost:4000/videos/{video id}/view

videoPlayer.js

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

• 비디오 함수 클릭시 registerView 함수 실행
• registerView 함수 : http://localhost:4000/videos/{video id}/view 로 페이지를 post 시킴
  -> 라우터&컨트롤러 작동
  -> view +1