간단하게 전 파트 복습을 해보도록 한다.
이제 무엇을 해야 하냐면 다시 한번 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
도 그것과 굉장히 비슷하다.