📃 결과물

viedeo upload와 edit가 가능

📃 목표

• video detail 화면
• 비디오 삭제 수정 업로드 가능.

📃 과정

비디오 업로드

전 과정까지 우리는 video를 upload 할 수있지만 link 들이 깨져 나타나지 않는다 이문제를 해결해보자.

우선 video가 업로드 되는 경로를 수정한다 videos/ 폴더를 지우고 , middleware에서 'videos/'가 아닌 'uploads/videos/'로 수정한다
const multerVideo = multer({dest: "uploads/videos/"});

여기서 주의해야할건 "/uploads/videos/" 와 같이 작성하면 컴퓨터의 root에 uploads 폴더가 생긴다. 경로를 잘못 쓰지 않게 주의 해야 한다.

mongo db의 잘못된 데이터 삭제가 가능

$mongo

$use <db_name>
>switched to db db_name

$show colloections
>Videos

$db.video.remove({})

해당 주소는 얻어오지만 404 오류가 뜬다. upload를 위한 route가 없기때문에 upload 관련 라우터를 추가 해준다.

//middleware
...
app.use("/uploads", express.static("uploads"));
app.use(cookieParser());
... 
app.use(routes.users, userRouter);
app.use(routes.videos, videoRouter);

누군가 /uploads로 접속하면 directory에서 file을 보내주는 미들웨어 function 인 express.static()을 이용해서 'upload'라는 directory안으로 들어간다.

지금은 우리는 file을 한개의 서버에서 다루고 있다 . 한개의 서버를 다루는건 문제가 너무 많다. 예를 들어서 한 사용자가 엄청나게 큰 파일을 서버에 올린다면 서버가 막힐 수도 있고 다른사람들도 우리 서버에 접근하지 못하게 된다. 이런 방식으로 fole을 다루면 문제가 너무 많다. 이 과정들은 시범으로 static file을 사용하는게 멋지다는것을 보여준 것이다.

user file 들을 웹사이트에 저장하지 않고 server의 새로운 version이 나오면 엣날서버와는 작별인사를 해서 새로운 서버로 redirect만 시킨다.이 강좌의 끝에는 그렇게 할것이다.

static filed은 주로 front-end에서 쓰이는 javascript나 css 로고 file 이다.

Getting Video by ID

home에서 video를 클릭 했을때 나오는 Video Detail 페이지 화면을 만든다.
비디오 영상과 제목 조회수 설명이 화면에 표시 된다.
클릭한 video의 id를 알아야 한다.route의 '/:id' 를 통해서 가져온다.url로 부터 정보를 가져오는 유일한 방법 이다. console.log(req.params); 를 통해서 parameter 에 id 값이 들어가는걸 확인 할 수 있다.

findById 를 사용해서 Video 변수에 담아서 id,title,description 을 템플릿에 전해준다.
존재하지 않는 url로 가면 home 으로 redirect 되게 error 처리 해준다.

export const postEditVideo = async(req, res) =>{
    const{
        params: {id},
        body: {title, description}
    } = req;
    try{
      await Video.findByIdAndUpdate({id},{title, description});
      res.redirect(routes.videoDetail);
    } catch(error){
        res.redirect(routes.home);
    }
};

위의 코드를 이용해서 비디오 변수에 담아온 제목,조회수,설명이 템플릿에 표시된다.

비디오 수정

editVideo: id => {
      if(id){
        return `/videos/${id}/edit`;
      } else {
        return EDIT_VIDEO;
      }
    },

routes.editVideo 는 더 이상 string이 아니다 function 이다.

비디오 수정시 새로운 파일이 업로드가 아니라 이미 올라와 있는 현재의 파일을 업데이트해 현재의 제목과 설명을 가져오는 작업을 해준다.

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}); 
        //pagetitle은 edit 그리고 editVide.pug 비디오를 넘겨줌
    } catch(error){
        res.redirect(routes.home);
    }
};

export const postEditVideo = async(req, res) =>{
    const{
        params: {id},
        body: {title, description}
    } = req;
    try{
      await Video.findByIdAndUpdate({_id:id},{title, description});
      res.redirect(routes.videoDetail(id));
    } catch(error){
        res.redirect(routes.home);
    }
};

editVideo.pug 에 video object를 넘겨준다.

//editVideo.pug
 .fotm-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

비디오 삭제

export const deleteVideo = async(req, res) =>{
    const{
        params: {id}
    } = req;
    try{
        await Video.findOneAndRemove({_id: id});
    } catch(error){
       
    }
    res.redirect(routes.home);
};

누군가 비디오 삭제를 할때는 url 로가서 해당하는 비디오를 지운다.
비디오 삭제는 get 만 있으면 된다.

📃 전체코드