이번엔 영상을 삭제할수 있는 버튼을 만들어 본다.
이건 정말 좋은 연습(?)이 될거다. 왜냐하면 template,controller,router 다 사용해야 한다.
첫번째 스텝은 watch 페이지로 가서 watch.pug 이다.
여기에 보면 Edit Video링크가 있다. 똑같이 할건데 다만 이번엔 Delete Video로 변경 한다.
extends base
block content
div
p=video.description
small=video.createdAt
a(href=`${video.id}/edit`) Edit Video →
br
a(href=`${video.id}/delete`) Delete Video → 사이에 br을 하나 넣어주고 이런식으로 말이다.
테스트 해본다. 새로고침해서 비디오를 클릭하면 이제 Edit Video와 Delete Video가 있다.
Delete video를 눌러 보면 당연히 작동을 안한다.
이번엔 아무것도 post하지 않을거다. 단순히 url을 방문할 뿐이다.
그리고 url을 방문하면 영상이 삭제 될거다. 기본적인 작동 방식이다.
두번째 스텝으로써 아직 만들어지지 않은 Delete Video 의 function의
라우터와 컨트롤러를 만들어야 한다.
그러면
router를 먼저 만들어 본다.
videoRouters.js로 가서
이것도 똑같은 url을 쓸거다. 다만 delete라고 명칭을 쓸거다.
import express from "express";
import { get } from "express/lib/response";
import {
watch,
getEdit,
postEdit,
getUpload,
postUpload,
deleteVideo,
} from "../controllers/videoController";
const videoRouter = express.Router();
videoRouter.get("/:id([0-9a-f]{24})", watch);
videoRouter.route("/:id([0-9a-f]{24})/edit").get(getEdit).post(postEdit);
videoRouter.route("/:id([0-9a-f]{24})/delete").get(deleteVideo);
videoRouter.route("/upload").get(getUpload).post(postUpload);
export default videoRouter;그리고 getEdit 대신에 비디오 컨트롤러 안에 새로운 function을 만들어야 한다.
그 function의 이름이 뭐냐면
videoController.js에서
export const deleteVideo = async (req, res) => {
const { id } = req.params;
console.log(id);
// delete video
return res.redirect("/");
};그리고 request와 response를 받을 거라는 걸 안다. Mongoose를 쓸 것도 이미 알고 있다.
그래서 async도 입력해 주었다. 이제 deleteVideo function이 export되니깐
import도 해줬다. 그리고 get의 function에다가 deleteVideo를 입력 해 주었다.
지금 생각중인 방법은
export const deleteVideo = async (req, res) => {이곳으로 와서 url로 부터 id를 가져오는 거다.
videoRouter.route("/:id([0-9a-f]{24})/delete").get(deleteVideo);그래서
console.log(id);이렇게 해주고 id는 req,params에서 가져올수 있다.
const { id } = req.params;그리고 영상을 삭제 할 거고 삭제되고 나면 볼 수있는게 없으니 home으로 돌아 오게 해준다.
return res.redirect("/");여기까지 정상적으로 작동하는지 보기 위해서 id가 제대로 출력되는 지만 테스트 해본다.
복습하자면 video.id에 delete라는 새로운 링크를 만들었다.
이제 Delete Video를 클릭하면 delete 으로 가게 될거고 라우터를 통해서
videoRouter.route("/:id([0-9a-f]{24})/delete").get(deleteVideo);이곳으로 가게 되고 그러면 deleteVideo 페이지를 갖게 되겠지만
아무것도 렌더링 하지는 않을거다. 단순히 id를 console.log하고 redirect가 제대로 작동하는지만
확인 할거다. 새로고침하고 보면 home으로 돌아 간다.
이제 이
function을 사용 할거다.
https://mongoosejs.com/docs/api/model.html#model_Model.findByIdAndDelete
Model.findByIdAndDelete() 를 보면 findOneAndDelete를 줄인 것뿐이다.
결국엔 둘다 똑같다. 이제 해야 할건 await부터 쓰도록 한다.
export const deleteVideo = async (req, res) => {
const { id } = req.params;
await Video.findByIdAndDelete(id);
// delete video
return res.redirect("/");
};이렇게 해준다. vsc에서 findByIdAndDelete와 findByIdAndRemove를 띄우는데
일단 findByIdAndDelete부터 해준다. id는 params에서 가져올거다.
왜냐하면 params가 url에 있다는 걸 알 것이기 때문이다.
이제 테스트를 해본다. 비디오를 선택하고 deleteVideo를 해주면 home으로 이동하고
비디오는 삭제 된다. 제대로 작동한다.
그리고 궁금한점
delete와remove의 차이점은 무엇 일까?
documents를 보면 설명이 되어 있다.
findOneAndDelete은 findOneAndRemove랑 조금 다르다.
간단히 말하면 findOneAndDelete를 써야 한다. 쓰면 안 될 간절한 이유가 있지 않은 이상 말이다.
대부분의 경우에는 상관없다. 그러니까 항상 findOneAndDelete를 써준다.
이 경우에는 findByIdAndDelete가 되겠다.
findByIdAndDelete은 단순히 findOneAndDelete를 줄인 거라는 걸 기억해야 한다.
그래서 이젠 영상을 만들었고, 영상을 불러오고 , 영상을 업데이트 할수 있고 ,삭제 할수도 있다.
이젠 다른 페이지를 처음부터 다시 만들건데 그건 영상을 검색하는데 사용 될거다.
