[유튜브 클론코딩] 3.8 Getting Video by ID

3.8 Getting Video by ID

이번 시간에는 비디오 링크를 클릭하면 해당 비디오의 상세정보 페이지로 이동하게 하는 것을 할 것이다. (즉 videoDetail 화면을 수정할 것)

 

videoDetail 수정하기(controller)

비디오 링크를 클릭하면 해당 비디오의 상세정보 페이지로 이동하도록 하기 위해서는

해당 비디오의 id를 받아와야 한다.

이것은 req.params로 받을 수 있다.

search에 req.query에서 term을 받은 것처럼 video id를 받는 것이다.

 

export const videoDetail = (req, res) => {

    console.log(req.params);

    res.render("videoDetail", {pageTitle: "Video Detail"});

}

↑ videoController.js

여기를 이렇게 수정하고 videoDetail 화면을 들어가면 params가 콘솔에 출력된다.

이게 id인 이유는 routes.js에서 id라고 설정했기 때문이다.

즉 :id가 변수라는 것이다.

만약 /:id/edit으로 간다면 edit이라는 parameter로는 어떤 것도 받지 않을 것이다.(edit는 변수가 아니니까)

**즉, 만약 controller에서 어떤 데이터를 가지고 있다는 것을 표현하고 싶다면 더블콜론(:)과 이름을 넣으면 된다

 

export const videoDetail = (req, res) => {

    // console.log(req.params.id);

    const { params: {id}} = req;

    console.log(id);

    res.render("videoDetail", {pageTitle: "Video Detail"});

}

req.params.id로 가져오는 대신 객체 비구조화 할당 문법으로

이렇게 가져온다.그러면 videoDetail을 접속했을때 콘솔창에 아이디가 가져와진다.

 

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

    // console.log(req.params.id);

    const { params: {id}} = req;

    const video = await Video.findById(id);

    console.log(video);

    res.render("videoDetail", {pageTitle: "Video Detail"});

}

위의 코드를 async를 이용해서 비동기로 고치고 비디오를 아이디로 찾아온다

그리고 console에 video 정보가 잘 뜬다.

그런데 id가 실제로 존재하지 않는 아이디라면 어떻게 될까 - 오류가 난다.

 

그러므로 우리는 try-catch를 이용할 것이다.

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

    const { params: {id}} = req;

    try{

        const video = await Video.findById(id);

        res.render("videoDetail", {pageTitle: "Video Detail"});

    }catch(error){

        console.log(error);

        res.redirect(routes.home);

    }

};

만약 존재하지 않는 id로 접속한다면

console에 error를 표시해주고 home으로 갈 수 있도록 한다

한번 시험해보면 없는 id로 접속하면 home으로 redirect된다.

 

그리고 이제 video(비디오 변수)를 템플릿에 전달한다

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

    const { params: {id}} = req;

    try{

        const video = await Video.findById(id);

        res.render("videoDetail", {pageTitle: "Video Detail", video});

    }catch(error){

        console.log(error);

        res.redirect(routes.home);

    }

};

 

videoDetail.pug 수정하기

이제 videoDetail의 view를 수정한다 videoDetail.pug

extends layouts/main

block content 

    .video__player

        video(src=`/${video.fileUrl}`)

    .video__info 

        h5.video__title=video.title

        span.video__views=video.views

        p.video__description=video.description 

이렇게 /를 붙이는 이유는 이게 서버에 있는 파일이라 그런 것이다.

 

 

 

잘 뜨는 걸 볼 수가 있다.