[유튜브 클론코딩] 3.10 Deleting a Video

3.10 Deleting a Video

 

이번시간에는 비디오를 삭제하는 것을 해볼 것이다.

비디오 추가(upload), 비디오 수정(editVideo), 비디오 시청(videoDetail)은 했으니

비디오 삭제(deleteVideo)를 할 시간이다.

 

비디오 삭제 만들기(deleteVideo)

누군가 비디오 삭제를 누른다면 URL로 가서 이 부분의 URL을 가져와서 해당하는 비디오를 삭제할 것이다.

그러기 위해서는 URL에서 id를 받아와야 하므로 routes.js에서 deleteVideo도 함수 형식으로 바꾸어 주어야 한다.

 

deleteVideo: (id) => {

        if(id){

            return `/videos/${id}/delete`;

        }else{

            return  DELETE_VIDEO;

        }

    }

↑ routes.js

routes.js에서 deleteVideo도 함수 형식으로 바꾸어 준다.

 

//delete video

videoRouter.get(routes.deleteVideo(), deleteVideo);

↑ videoRouter.js

videoRouter에서도 함수형식으로 ()를 추가해준다.

 

extends layouts/main

block content 

    .form-container 

        form(action=routes.editVideo(video.id), method="post")

            input(type="text", placeholder="Title", name="title", value=video.title)

            textarea(name="description", placeholder="Description")=video.description

            input(type="submit" value="Update Video")

    a.form-container__link.form-container__link--delete(href=routes.deleteVideo(video.id)) Delete Video

↑ editVideo.pug

그리고 editVideo.pug에서도 다음과 같이 수정해준다.

 

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

    const { params: {id}} = req;

    try{

        await Video.findOneAndRemove({_id:id});

    }catch(error){

    }

    res.redirect(routes.home); //비디오 삭제가 성공하던 실패하던 home으로 간다.

}

↑ videoController.js

deleteVideo 함수를 다음과 같이 수정한다.

비디오 삭제는 get만 있으면 된다. 왜냐하면 post를 할 일이 없기 때문이다.

findOneAndRemove라는 메소드를 통해 id를 기준으로 비디오를 찾아서 삭제를 한다.

deleteVideo는 따로 화면을 보여줄 필요가 없기 때문에 render를 하지 않고 대신 비디오 삭제가 성공하던 실패하던 home으로 redirect를 해주도록 작성한다.

 

최근에 올린 순으로 비디오를 정렬해서 보여주기

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

    try{

        const videos = await Video.find({}).sort({_id: -1});

        res.render("home", {pageTitle: "Home", videos});

    }catch(error){

        console.log(error);

        res.render("home", {pageTitle: "Home", videos :[]});

    }

        

};

↑ videoController.js

.sort({_id: -1}) 코드를 통해서 비디오를 최근에 올린 순으로 정렬해서 보여줄 수 있다.