Upload Video를 누르는 순간post requesr를 /videos/upload url에 보내게 된다.
그리고 videoRouter.js에 route를 만들어 놨다.
videoRouter.route("/upload").get(getUpload).post(postUpload);
이부분이 post request를 다뤄 준다.
그리고 controller를 가지고 있다. controller는 딱 하나의 일만 한다.
videoController.js 에서
export const postUpload = (req, res) => {
// here we will add a video to the videos array.
return res.redirect("/");
};바로 이 부분이다.
그건 바로 홈페이지로 redirect 해주는 거다. 지금은 그것만 하고 있지만 나중에 바꿔 줄거다.
upload video를 누르는 순간 현재의 url로 post request를 보낸다.
원한다면 얼마든지 바꿀수 있다. 예를 들어 action을 써서 post request를
videos/.. 다른 url에 보내 줄 수도 있다.
form(method="POST", action="/videos/upload")그치만 그러지 않을거다. 왜냐하면 get request 랑 post request 둘 다 지금 가지고 있는
url로(/videos/upload) 받기 때문에 action을 해줄 필요가 없다.
그치만 action을 사용하고 싶다면 지금 사용하고 있는 url을 입력해도 된다.
하지만 이건 기본값(디폴트) 이다. 상관 없으니깐 그냥 놔둔다. 기억하기 위해서 이다.
이제 upload video를 버튼을 눌러주면 홈페이지로 돌아 간다.
확실히 해두자면, 홈페이지를 render한게 아니다.
그저 url을 바꿔 준거 뿐이다.
직접 페이지를 보여준게 아니라, controller가 browser를 redirect해준거다.
그러면 일단은 browser는 /videos/upload로 가게 된다.
browser가 거기로 데려다 준다. 그리고 controller는 browser에게 어딘가로 가라고 말하고 있다.
그러니까 browser는 두 군데를 가야하는 거다.
하나는 post request로 /videos/upload로 가는 거고,
다른 하나는 get request로 홈페이지인 / 로 가는 거다.
어떻게 하면
input에서data를 얻을 수 있을까?
videoController.js에서
export const postEdit = (req, res) => {
const { id } = req.params;
const { title } = req.body;
videos[id - 1].title = title;
return res.redirect(`/videos/${id}`);
};req.body를 사용함으로써 유저가 input에 작성한 data를 얻을수 있다.
유저가 input에 작성한 data를 얻을수 있다. 지금부터 console.log(req.body)를 해보자.
export const postUpload = (req, res) => {
console.log(req.body);
return res.redirect("/");
};새로고침한 다음 upload video를 새로운 이름으로 작성 한다음 console.log를 확인해 보니
텅 비어 있다. 왜냐하면 input에 이름을 지정하지 않았기 때문이다.
이름을 지정해 준다.
upload.pug에서
input(name="title", placeholder="Title", requried, type="text")그리고 다시 시도를 하면 console.log에 이름이 지정되는걸 확인할수 있다.
이제부터 할건 새로운 비디오를 만들어서 그 비디오를 videos array에 넣어 주는 거다.
export const postUpload = (req, res) => {
const { title } = req.body;
const newVideo = {
title,
rating: 0,
comments: 0,
createdAt: "just now",
views: 0,
id: videos.length + 1,
};
videos.push(newVideo);비디오 구조는 원래 가지고 있던 구조 그대로 재현해 본다.
지금 하고 있는건 실제 database가 아니니 너무 신경 써서 할 필요는 없다.
잘 작동 되는지만 확인하는 작업이다.
const { title } = req.body;
const newVideo = {
title, 이렇게 작성해 주면 자바스크립트가 알아서 title을 적용해 준다.
videos.push(newVideo); array 안에 새로운 비디오를 넣어주는 기능을 한다.
여기서 어떤 일이 일어나냐면
/vidoes/upload url에 post request를 보내게 된다.
그럼 postUpload라는 function 이 호출 되는 거다.
이제 input에는 name이 있기 때문에 req.body로 부터 이름(title)으로 데이터를 받을 수 있다.
그런 다음에 newVideo라고 하는 새로운 object를 만들어서 가짜 데이터인데
이 title만은 진짜 유저가 입력한 내용이 되는 거다.
그리고 새 비디오를 실제 존재하지 않는 database에 추가 하게 된다.
그런 다음에 browser에게 홈으로 돌아가 달라고 하는거다.
browser는 홈페이지로 돌아가고 trending controller가 호출되는 거다.
그래서 비디오가 하나 더 추가 되면 trending이 실행되고 videos를 써서
home(템플릿)을 render하게 되면 videos에는 총 4개의 비디오가 있게 된다.
이제 새로고침을 해서 확인해본다.
이렇게 해주고 나면 upload video로 가서 새로 작성을 해주면 새 비디오가 추가 된다.
물론 새로운 비디오도 이름을 수정 할 수도 있다. 그러나 아직 까지는 서버가 재시작하면
당연히 새로운 비디오는 없어진다. 아직 까지 데이터를 받아 오는게 아닌 메모리에서
저장한걸 가져오기 때문이다.
