[유튜브 클론코딩] 10.0 API Registering a View part.1

10.0 API Registering a View part.1

💩이번 시간에는 조회수 기능을 구현할 것이다.

조회수 기능을 위해서 Ajax라는 것을 사용할 것이다.

 

Ajax란?

Asynchronouse Javascript and XML , 비동기 JS, XML 통신이다.

 

예를 들면 이 video가 끝나면 JavaScript에 전달해서 서버 URL로 가도록 하고 그 URL은 이 비디오가 시청됐다고 등록하는 것이다. 이 기능은 그 URL에 어떤 템플릿이 필요한 것이 아니다. 즉, 화면을 렌더링하지 않고 서버와 통신하는 것이다.

 

이런 것이 흔히 말하는 Single Page Application의 기본이 된다. 우리가 잘 아는 넷플릭스와 유튜브도 이러한 방식으로 동작한다. 예를 들어, 유튜브를 보면 내가 홈에서 동영상을 클릭하면 보다시피 유튜브 바가 어디 다른데로 가지 않는다. 옆에 다른 영상을 눌러도 내용을 바꾸긴 하지만 어디 다른데로 가버리진 않는다. 이건 Javascript가 페이지 전체를 넘기는 것이 아니라 그냥 그 자리에서 video를 가져다가 보여주기 때문이다.

 

API를 위한 URL 추가하기(routes.js)

ajax를 하기 전에 우리가 해야할 것은 API를 위한 URL을 추가하는 것이다.

API를 위한 route를 만든다. 다시 말하지만 이것은 보여지는 페이지가 아니므로 어떤 것도 렌더링 되지 않으므로 user가 접근할 수 있는 url이 아니다. 단지 서버와 통신하기 위한 URL 이다.

 

//API

const API = "/api";

const REGISTER_VIEW = "/:id/view";

↑ routes.js

 

api : API,

registerView: REGISTER_VIEW

↑ routes.js (const routes 안에 다가 써준다)

만약 누가 /api/12/view로 간다고 하면 view 수를 하나 증가할 것이다.

 

API경로를 위한 라우터 만들기(routers > apiRouter.js 만들기)

routers 폴더 안에 apiRouter.js를 만들고 다음과 같이 작성한다.

import express from "express";

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

import routes from "../routes";

const apiRouter = express.Router();

apiRouter.get(routes.registerView, postRegisterView);



export default apiRouter;

↑ apiRouter.js

 

app.js에서 apiRouter를 추가해주기

import apiRouter from "./routers/apiRouter";

app.use(routes.api, apiRouter);

↑ app.js

app.js에 apiRouter를 import해주고 user하는 코드를 작성해준다.

 

 

postRegisterView 함수 작성하기(videoController.js)

export const postRegisterView = async(req, res) => {

    const { params : {id} } = req;

    try{

        const video = await Video.findById(id);

        video.views += 1;

        video.save();

        res.status(200) // Okay

        

    }catch(error){

        res.status(400); // 잘못된 요청

        

    }finally{

        res.end();

    }

}

↑ videoController.js

postRegisterView라는 함수는 비디오를 찾아야하기 때문에 async 비동기로 작성해준다.

그리고 try-catch 구문으로 작성해준다. 원하면 finally까지 작성해도 된다.

이건 비디오를 찾으면 조회수를 하나 증가시킬 것이다.

즉, 누군가가 만약 저 url로 가면 우리는 findById를 이용해서 비디오를 하나 얻고, 그 비디오의 views를 하나 증가시키고 video를 저장한다.

만약 이게 잘 동작하면 status code를 200으로 설정한다. 200은 okay를 의미한다. 만약에 여기에 에러가 있으면 우리 status를 400으로 해줄거고 그리고 무슨 일이 일어나던 finally 구문에서 우린 우리 요청을 끝낼 것이다.

계속 이야기하지만 여기 보듯이 이것과 연결된 템플릿이 없다. 이건 그냥 API View인 것이다. 이 의미는 서버하고만 소통한다는 뜻이다.

 

임시로 실행해보기

localhost:4000/api/비디오id/view

이 루트로 접속해보면  하얀 화면이 나오는데, 이게 잘못된 것은 아니다.

그리고 다시 비디오로 돌아오면 조회수가 0 -> 1로 바뀌어있다!

 

(다음 시간에 프론트엔드 부분에서 API URL로 접근하는 부분을 작성할 예정이다.

그 부분 이전에 수동으로 테스트해보기 위해서 해당 URL을 직접 주소창에 쳐서 들어가본 것이다.)