<MongoDB> READ

웹사이트의 기본인 CRUD중에 CREATE를 완료했고 이번엔 READ를 해보겠습니다. 비디오를 클릭하면 비디오 상세 페이지로 이동하는데요. 상세 페이지에서 비디오를 볼 수 있게 만들겠습니다.

project

youtube
  |controllers
   *|videoController.js
  |views
   *|videoDetail.pug

videoController.js

비디오 상세페이지 주소: localhost:4000/videos/videoId
주소 뒤에 videoId를 express는 :id 형태의 변수로 받아들입니다. express는 이 변수에 대한 값을 req.params로 전달합니다. req.params로부터 videoId를 받고 이 id를 이용해 데이터베이스로부터 해당하는 Video element를 불러오겠습니다.
또한 불러온 video element를 videoDetail 탬플릿에 전달하겠습니다.

export const videoDetail = async (req, res) => {
	const {params:{id}} = req;
  	const video = await Video.findById(id);
  	res.render("videoDetail", {video});
}

videoDetail.pug

Video element를 전달해줬으므로 아래와 같이 video 에 대한 정보로 탬플릿을 구성할 수 있습니다.

extends layouts/main

block content
    .video__player
        video(src=`/${video.fileUrl}`, controls=true, autoplay=true)
    .video__info
        a(href=routes.editVideo) Edit Video
        h5.video__info__title #{video.title}
        span.video__info__views  #{video.views}
        p.video__info__description #{video.description}

위와 같이 하면 정상적인 동작을 확인할 수 있을텐데 한가지 주의 사항은 바로 video src입니다. src 맨앞에 /를 붙이면 root page로부터의 주소를 의미하고 붙이지 않으면 현재 page로부터의 주소를 의미하는데 home은 루트 페이지 이므로 /를 붙이나 안붙이나 root page로부터의 주소이지만 videoDetail 페이지에서는 /를 붙여야만 root page로부터 src를 찾을 수 있습니다.