[유튜브 클론코딩] 3.9 Editing a Video

3.9 Editing a Video

이번 시간에는 비디오 수정할 수 있는 버튼 만들기(edit video)를 할 것이다.

비디오를 수정할 수 있는 버튼을 만들어서, 일단은 모든 사람이 수정할 수 있도록 하고

나중에 유저부분에서 해당 버튼은 비디오를 업로드한 사람에게만 보일 수 있도록 수정할 것이다.

 

routes.js에서 editVideo도 함수 형식으로 바꾸기

editVideo: (id) => {

        if(id){

            return `/videos/${id}/edit`

        }else{

            return EDIT_VIDEO;

        }

    },

↑ routes.js

routes.js로 가서 editVideo 부분을 바꾼다.

editVideo도 id를 받아와야 하기 때문에 함수 형식으로 바꾸는 것이다.

 

videoDetail.pug에서 비디오를 수정할 수 있는 버튼을 만들기

extends layouts/main

block content 

    .video__player

        video(src=`/${video.fileUrl}`, width="30%", controls=true, autoplay=true)

    .video__info

        a(href=routes.editVideo(video.id)) Edit Video

        h5.video__title=video.title

        span.video__views=video.views

        p.video__description=video.description 

↑ videoDetail.pug

videoController에서 비디오 파일 통째로 줬는데 그 비디오는 id를 가지고 있을 것이므로 저렇게 작성하는 것이다.

 

 

import express from "express";

import { deleteVideo, editVideo, getUpload, postUpload, upload, videoDetail, videos } from '../controllers/videoController';

import { uploadVideo } from '../middlewares';

import routes from "../routes";

const videoRouter = express.Router();

videoRouter.get(routes.upload, getUpload);

videoRouter.post(routes.upload, uploadVideo, postUpload);

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

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

videoRouter.get(routes.deleteVideo, deleteVideo);



export default videoRouter;

↑ videoRouter.js

그리고 videoRouter에 가서도 함수를 실행해줘야 하므로 이렇게 수정해준다.

 

 

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

    res.render("editVideo", {pageTitle: "Edit Video"});

}

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

}

↑ videoController.js

이제 videoController로 가서 editVideo 부분을 수정해준다.

기존의 editVideo 함수는 getEditVideo로 수정해주고 postEditVideo 함수를 새로 만든다.

 

import express from "express";

import { deleteVideo, editVideo, getEditVideo, getUpload, postEditVideo, postUpload, upload, videoDetail, videos } from '../controllers/videoController';

import { uploadVideo } from '../middlewares';

import routes from "../routes";

const videoRouter = express.Router();

videoRouter.get(routes.upload, getUpload);

videoRouter.post(routes.upload, uploadVideo, postUpload);

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

videoRouter.get(routes.editVideo(), getEditVideo);

videoRouter.post(routes.editVideo(), postEditVideo);

videoRouter.get(routes.deleteVideo, deleteVideo);



export default videoRouter;

↑ videoRouter.js

videoRouter로 가서 당연히 이 부분도 수정해준다.

 

어떤 비디오를 수정하는지 알아야 하기 때문에 videoDetail에서 id를 받아온 것처럼 editVideo에서도 id를 받아올 것이다. 그리고 내가 비디오를 수정하려고 한다면 지금처럼 빈칸이 아니라 title과 description이 현재의 제목과 설명으로 채워져있기를 원한다.

 

getEditVideo 작성하기

 

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

    const {params: {id}} = req;

    try{

        const video = await Video.findById(id);

        res.render("editVideo", {pageTitle: `Edit ${video.title}`, video});

    }catch(error){

        res.redirect(routes.home);

    }

    

}

↑ videoController.js

우선 URL로부터 parameter를 받아오도록 한다.

편집할 비디오의 id를 받아와서 그 비디오의 현재의 title과 description을 보여주는 일은 get이 해야하는 일이므로 getEditVideo에서 작성한다.

findById메소드를 통해 id로 찾은 video를 템플릿 변수를 통해 전달해줬기 때문에 이제 저 video를 가지고 editVideo.pug로 간다.

 

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=`/videos${routes.deleteVideo}`) Delete Video

↑ editVideo.pug

textarea는 value가 없기 때문에 다음과 같이 작성하면 된다.

여기까지 하면 get 부분은 마무리 되었고 이제 post 부분을 작성한다.

 

postEditVideo 작성하기

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

    const {

        params: {id},

        body : {title,description}} = req;

    try{

        await Video.findOneAndUpdate({ _id: id },{ title, description});

        res.redirect(routes.videoDetail(id));

    }catch(error){

        res.redirect(routes.home);

    }

}

_id 이렇게 한 것은 mongoose에서 id를 _id라고 되어있기 때문인 것이다.

findOneAndUpdate 메소드를 통해 id를 기준으로 비디오를 찾고, title과 description를 업데이트 하도록 작성했다. 업데이트가 끝나면 해당 id로 비디오 상세페이지로 redirect 하도록 한다.

만약 에러가 생긴다면 home으로 redirect하도록 작성한다.