비디오 array에서 비디오를 찾고 있고, watch 템플릿을 render하고 있다.
page title은 watching + video.title로 주고 있다.
이제 부터 모든 비디오들을 템플릿에 보내 줄거다.
그 템플릿의 이름은 watch이다 .
videoController.js
export const see = (req, res) => {
const { id } = req.params;
const video = videos[id - 1];
return res.render("watch", { pageTitle: `Watching ${video.title}`, video });
}; return res.render("watch", { pageTitle: `Watching ${video.title}`, video });여기서 video는 video:video와 같다. ES6을 사용해서 저렇게 짧게 쓸수 있다.
이제 watch 템플릿에 video object가 생겼다.
videoController.js
export const watch = (req, res) => {
const { id } = req.params;
const video = videos[id - 1];
return res.render("watch", { pageTitle: `Watching ${video.title}`, video });
};see 를 watch로 바꿔 줬다. function 이름을 바꿔 줘서 에러가 뜬다.
Error: Route.get() requires a callback function but got a [object Undefined]videoRouter.js
import {
watch,edit,upload,deleteVideo,}
from "../controllers/videoController";
const videoRouter = express.Router();
videoRouter.get("/upload", upload);
videoRouter.get("/:id(\\d+)", watch);see 부분을 watch로 바꿔 준다. 그러면 잘 작동 하게 된다.
watch.pug
block content
h1=video.titlewatch video 를 video.title로 바꿔 준다.
작동이 잘 되긴 하나 이미 title을 가지고 있으니 다른걸 정해 주도록 하자.
block content
h3 #{video.views} views조회수를 넣어 줬다. 예상 대로 작동이 잘되고 있다.
만약 조회수가 1회인 비디오가 있다면, 한국어는 해당이 안되지만 영어는 단수형 , 복수형이 있기 때문에 구분을 해줘야 한다.
1 views가 아닌 1 view여야 한다. 조건문을 만들어 본다.
if문을 사용해도 되지만, 여기선 ternary operator를 사용해 본다.
watch.pug
block content
h3 #{video.views} #{video.videws === 1 ? "view" : "views"}만약 video.views가 1 이랑 같다면 view라는 string으로 변환한다.
아니면 views로 변환한다. 작동해 보니 단수형, 복수형 둘다 잘 작동한다.
영상(게시물) 을 편집 할수 있는 페이지를 만들어 보자.
watch.pug
block content
h3 #{video.views} #{video.videws === 1 ? "view" : "views"}
a(href="") Edit Video이렇게 해주면 클릭시 넘어가는 링크를 만든거다. 해당 페이지는 아직 비어 있기에 안 넘어간다.
watch.pug
block content
h3 #{video.views} #{video.videws === 1 ? "view" : "views"}
a(href="") Edit Video → &rarr 를 추가해 주었다. 오른쪽 화살표이다. 왼쪽 화살표는 &lrarr 해주면 된다.
Edit Video 페이지는 videoRouter.js에 보면 get edit이 있다.
watch.pug
block content
h3 #{video.views} #{video.videws === 1 ? "view" : "views"}
a(href="edit") Edit Video →href=""안에다가 edit만 넣어주면 된다. 이렇게 하는 이유는 absolute와 relative url을 알려주기 위해서다.
클릭하면 넘어가긴 하지만 그저 http://localhost:4000/videos/edit videos/edit으로 넘어 간다.
해당 video의 edit으로 넘어가지 않는다. 좀더 보완을 해준다.
block content
h3 #{video.views} #{video.videws === 1 ? "view" : "views"}
a(href="/edit") Edit Video →/만 단지 추가 해줘 봤다. http://localhost:4000/edit 클릭하게 되면 이렇게 이동하게 된다.
이것이 바로 absoulte와 relative url의 차이점이다
만약 href의 앞머리 부분에 /를 넣게 되면 어디에 있든 상관 없이 root경로 + /edit으로 가게 된다.
그러나 /를 지우게 된다면 그건 relative url이 되는거다.
무슨 뜻이냐면 href="edit 이곳에 /가 없기 때문에 browser는 뒤에 edit을 붙인 경로로 보내주는 거다.
이제 일종의 relative url을 사용할거다. 왜냐하면 벌써 videos 안에 있기 때문이다.
일일이 위치를 적어줄 필요 없이 id값, edit만 입력해주면 되도록 한다.
block content
h3 #{video.views} #{video.videws === 1 ? "view" : "views"}
a(href=`${video.id}/edit`) Edit Video →새로고침 해서 확인해 보면 videos/id(해당값)/edit으로 잘 작동 하는걸 알수 있다.
