영상 수정하기

extends base.pug
block content 
    h4 영상을 수정해보세요!
    form(method="POST")
        input(name="title", placeholder="Video Title" ,value=video.title,required)
        input(placeholder="영상 설명을 해주세요." , required,type="text",name="description",value=video.description)
        input(placeholder="해시태그, 여러개를 콤마로 구분하여 작성해보세요." , required,type="text",name="hashtags",value=video.hashtags.join())
        input(type="submit", value="Save")

일단 영상수정을 위한 HTML이 필요하기 떄문에 edit.pug 파일을 위와 같이 수정한다. 영상을 수정 할때에는 placeholder가 보이는것이 아니라, 수정하고자 하는 영상의 제목, 설명, 해시태그 들이 보이는게 좋기 때문에 value를 위와같이 설정해주었다.

 

videoRouter.route("/:id([0-9a-f]{24})/edit").get(getEdit).post(postEdit);

 

이런 코드로 인해 백엔드에서 POST 요청을 처리할 수 있기 때문에, postEdit함수를 고쳐준다.

export const postEdit = async (req, res) => {
  const id = req.params.id;
  const title = req.body.title;
  const description = req.body.description;
  const hashtags = req.body.hashtags;
  const video = await Video.exists({ _id: id });

  if (!video) {
    return res.render("404", { pageTitle: "Video Not Found" });
  }

  try {
    await Video.findByIdAndUpdate(id, {
      title,
      description,
      hashtags: Video.formathashtags(hashtags),
    });
    return res.redirect(`/videos/${id}`);
  } catch {
    return res.render("edit", { pageTitle: `이곳에서 영상을 수정하세요!`, video });
  }
}

 

일단 바뀌게 될, 즉 사용자가 새로 입력한 제목, 설명, 해시태그들을 새로운 변수로 받는다. 영상 수정의 핵심 부분인 try안을 보자.

일단 몽구스에서 제공하는 스키마.findByIdAndUpdate 함수를 이용한다. 이 함수는 첫번쨰 인자로 id, 두번째 인자로 수정할 내용을 받는다. 아까 새로운 변수에 받아두었던 내용을 새로 바꾸어준다. 

 

영상이 존재하는지 알기위한 exists함수는 bool형을 반환하여 영상이 있다면 true, 없다면 false를 반환한다. 따라서 if문을 작성해 영상이 없다면, 404페이지를 렌더링 하도록 만들었다.

 

추가로, 해시태그 부분은 새로운 형식인것을 알 수 있는데 이는 정적메서드를 이용한것이다.

몽구스에서 제공하는 static middleware이 그것이다. 이는 우리가 원하는 스키마가 모델링 되기전에, 즉, 

const Video = mongoose.model("Video", videoSchema);

이 코드가 실행 되기전에 작성해야한다. 또, 미들웨어 이므로 중간에 개입해서 값을 바꿀 수 있게된다. formathashtags 함수를 보면 다음과 같다.

videoSchema.static("formathashtags", function (hashtags) {
    return hashtags.split(",").map((word) => (word.startsWith("#") ? word : `#${word}`));
})​

스키마.static("함수이름", 함수작성) 의 형태로 구성된다. 위의 코드는 작성한 해시태그의 내용이 #으로 시작하면 #을 추가하지 않고(그대로 반환하고), #이 없다면 #을 추가해준다.