#6.0-1 Array Database

data를 어떻게 백엔드에 post하는지 배워보자

📑 실습

1. 가짜 database에 있는 모든 비디오 나열하기 (이전 실습때 완료(mixin))✅
2. 유저가 하나의 비디오를 볼 수 있게 하기
3. 영상 수정 기능
4. 비디오 업로드 기능

---

2. 유저가 하나의 비디오를 볼 수 있게 하기

• home에 나열된 비디오 클릭 시 /video/id 넘버로 이동하게 하기

title 클릭 시 a태그로 넘겨주기 href에 video/id 링크를 걸어주는데 #{}기호를 쓰는 방식은 attribute(속성)에는 사용할 수 없기 때문에 템플릿 리터럴로 작성해서 변수를 불러온다.

video.pug

mixin video(video)
  div
    h4
      a(href=`/videos/${video.id}`)=video.title
    ul
      li #{ video.rating }/5.
      li #{ video.comments } comments.
      li Posted #{ video.createdAt }.
      li #{ video.views } views.

watch controller 수정

1. req.params에서 id를 받아
2. 이 id를 이용해서 비디오를 찾게하고
3. watch라는 template을 render해준다.
4. 모든 videoe들을 watch 템플릿에 보내주기

videoController.js

export const watch = (req, res) => {
  // const id = req.params.id; //URL에 id를 가지고 있기때문에 req.params를 출력할 수 있음
  const { id } = req.params; //위의 ES6버전
  const video = videos[id - 1]; //index는 0부터 시작하기때문에 -1
  return res.render("watch", { pageTitle: `Watching ${video.title}`, video });
};

✅ watch.pug 확인 시 이미 video title은 base에서 확인 할 수 있기 때문에 제목은 views로 해보자

watch.pug

extends base.pug

block content
  h3 #{ video.views } views

여기서 문제는 영어는 단수형, 복수형이 구분되어야 하기 때문에 조회수가 1일때를 생각해야된다.(ternary operator(삼항조건연산자) 사용)

watch.pug

extends base.pug

block content
  h3 #{ video.views } #{ video.views === 1 ? "view" : "views" }