간단하게 전 파트 복습을 해보도록 한다.
이제 무엇을 해야 하냐면 다시 한번 post request를 보내야 한다.
edit.pug에서
form(method="POST")http://localhost:4000/videos/6252a57c867de2bae69b9f31/edit
이 URL로 post request를 보낼거다. id/edit
router가 있다. video router
videoRouter.route("/:id([0-9a-f]{24})/edit").get(getEdit).post(postEdit);여길 보면 edit으로 오는 get과 post request를 둘다 처리 한다.
그리고 이(postEdit)function이 edit form에서 오는 post request를 처리한다.
edit.pug에서
h4 Update Video제목 부터 Update Video로 바꿔 준다.
이번엔 postEdit이 어떤 정보를 받을지 console.log 해 본다.
videoController.js에서
export const postEdit = (req, res) => {
const { id } = req.params;
console.log(req.body);
return res.redirect(`/videos/${id}`);
};req.body에 어떤 내용이 있나 확인해 준다. 그럼 여기까지 제대로 작동하는지 한번 확인 한다.
프론트 엔드부터 새로운 description을 저장해 주면 당연히 아무것도 업데이트 되지 않는다.
그냥 똑같은 ID로 다시 옮겨 왔을 뿐이다. 그러면 어떻게 출력 되었는지 본다.
제대로 정보를 받고 있다. 잘 작동 한다.
form의 내용을 다 받았다.
이제 무엇을 해야 하냐면 또 다시 한번 영상을 찾아야 한다.
export const postEdit = async (req, res) => {
const { id } = req.params;
const video = await Video.findById(id);
if (!video) {
return res.render("404", { pageTitle: "Video not found." });
}
return res.redirect(`/videos/${id}`);
};영상을 다시 검색하고 async도 적용시키고 그리곤 위에도 똑같이 한번 더 해주고
만약 영상이 검색되지 않을때에는 Video Not Found를 return할거다.
누군가가 존재하지 않는 영상 id로 request를 보낼수도 있기 때문이다.
만약 영상이 제대로 검색이 되었다면 이 다음은 어떤걸 해야 할까??
두가지 옵션이 있는데 첫번째는 모두 다 일일이 업데이트 하는거다.
그리고 그건 굉장히 짜증나는 작업이 될거다.
모든 영상엔 제목이 있으니까 여기에 video.title = 을 입력하고
export const postEdit = async (req, res) => {
const { id } = req.params;
const { title, description, hashtags } = req.body;
const video = await Video.findById(id);
if (!video) {
return res.render("404", { pageTitle: "Video not found." });
}
video.title = title;
video.description = description;
video.hashtags = hashtags.split(",").map((word) => `#${word}`);
return res.redirect(`/videos/${id}`);
};request body에서 타이틀을 가져올거다.
const { title, description, hashtags } = req.body;그래서 이렇게 써주고 그리고 영상 제목을 request body에서 찾은 title로 설정하고
description도 설정해주고 hashtags는 저렇게 해주고 심지어 hashtags는
또 손을 봐 줘야 한다. 이미 '#'을 가지고 있기 때문에 또 추가 하게 되서 에러가 발생 한다.
손대기전에 짚고 넘어가야 되는게 정말 굉장히 귀찮은 작업이다.
이렇게 하나 하나 설정을 해준다는 건 너무나도 귀찮다.
만약에 이거 보다 더 크고 복잡한 form이 있다고 생각해보면 정말 끔찍할 거다.
일단은 이대로 해본다. 이미 video가 있다.
video.title = title;
video.description = description;
video.hashtags = hashtags.split(",").map((word) => `#${word}`);
await video.save();
return res.redirect(`/videos/${id}`);
};이렇게 await video.save(); 입력만 하면 된다. 방금 영상 정보를 업데이트 한거다.
첫째 영상을 검색하고 영상이 존재하는지 확인하고 만약 없다면 404를 렌더하면 된다.
그리고 영상 정보를 업데이트 하면 된다. 그 다음엔 video.title을 title로 업데이트 한다.
video.description을 description으로 업데이트 하고
video.hashtags을 hashtags function을 써서 업데이트 하고
그리고 변경된 사항들을 video.save로 저장하면 된다.
다만 여기서 await를 사용했기 때문에 에러가 생길수 있다.
원래대로라면 try-catch를 사용해야 하겠지만 그건 나중에 수정 하기로 하고
일단 요점은 지금은 3줄이니까 이렇게 해도 별 문제가 없다.
하지만 나중에 form의 항목이 50가지가 넘을수도 있고 아니면 3줄뿐이라도 조금더
개선된 방법으로 처리 할수 있다. 지금은 이대로 해본다.
일단 이대로 테스트를 해본 다음에 만약 제대로 작동하면 그때 좀더 효율적으로 video를 update하는 방법을 알아 본다.
지금 작성한 코드는 굉장히 직관적이다. 이해하기 굉장히 쉽다. 하지만 굉장히 긴 코드가 될수도 있다.
새로고침해서 edit 하면 작동은 잘 한다. 하지만 분명 더 개선할 수 있다.
그리고 hashtags를 저장 할때 마다 다시 수정을 해줘야 한다. 안그러면 한개씩 더 붙는다.
hashtags가 없을때만 hashtags를 추가 하게 하고 싶다.
hashtags가 없으면 hashtags를 하나만 추가 하고
이미 hashtags가 있으면 아무것도 추가 안 하는 거다.
이제
function을 수정해 보도록 한다.
제일 먼저 할일은 태그가 #로 시작하는지 아닌지 체크를 하는 거다.
video.hashtags = hashtags
.split(",")
.map((word) => (word.startsWith("#") ? word : `#${word}`));그리고 만약 그렇다면 아무것도 추가 하지 않는거다. 그래서 이렇게 코드를 작성 하였다.
그러니까 쉼표로 구분되어져 있는 hashtags를 받아서 그걸 array로 변환하고
각각의 해시태그들이 뭐로 시작하는지 확인 하는거다. 만약 #으로 시작 한다면 그대로
return 하고 아무것도 하지 않는거다. 아닐 경우엔 앞에 #을 붙여서 return한다.
테스트 해본다. 잘 작동 한다. #이 있고 없고에 따라 잘 작동 한다.
하지만 문제가 있다. 여기서 한것을 그대로 가져와서 복붙해야 한다.
왜냐하면 postUpload에서도 똑같은 과정이 있기 때문이다.
코드를 그대로 붙여 넣기 하는건 좋은 방법이 아니다.
다음 파트에서 복붙하지 않고 처리 할수 있는 방법을 알아 본다.
그리고
video.title = title;
video.description = description;
video.hashtags = hashtags이 부분도 좀더 나은 방법으로 바꾸는 방법도 알아 본다.
처음에 영상을 만들고 그 다음에 그 영상을 저장했다.
하지만 이번엔 영상을 만들고 저장 하는걸 하나의 function에서 다 마무리 할거다.
video.create을 쓰기 전에는 영상을 new Video()방식으로 생성했다.
그리고 모든 정보들을 거기다가 집어 넣었다.
그 다음에 그걸 video.create으로 대체 하는 방법을 보여줬다.
video.update도 그것과 굉장히 비슷하다.
