Recap Edit video

이전까지 데이터를 back end로 보내는지에 대해 알아 봤다.

edit.pug

extends base.pug

block content 
   h4 Change Title of Video
   form(method="POST")
      input(name="title", placeholder="Video Title",value=video.title,required)
      input(value="Save",type="submit")

form을 이용해서 해봤다. form 안에 input을 넣고, 각 input에 name을 줬다.

또 method는 post를 사용했다. 이렇게 하면 post request을 back end로 보내는 거다.

근데 back end는 어떻게 post request를 다뤄야 하는지 몰랐다.

하지만 지금은 어떻게 post request를 다루는지 안다.

videoRouter.js

videoRouter.route("/:id(\\d+)/edit").get(getEdit).post(postEdit);

왜냐하면 저 부분 .post(postEdit);을 작성해 주었기 때문이다.

get 과 post를 따로 쓰는 대신에 하나의 경로만 필요로 하는 route를 사용하기로 했다.

그래서 get request 와 post request (한 줄 코드로) 둘 다 다뤄지게 되었다.

videoRouter.route("/:id(\\d+)").get(watch);

일관성을 주기 위해서 이것도 route로 변경해 준다.

만약 이 방법을 더 선호한다면 쓰는걸 추천한다.

왜냐하면 이건 근본적으로 각 url을 위한 route를 만들고 그런 다음에 handler를 추가하는 거라서

get이나 post를 쓸 수 있고 delete나 patch같은것도 쓸수 있다.

HTTP method는 종류가 아주 많다. 이렇게 하는게 하나의 방법이다.

하지만 보통 2개 이상의 method를 사용하는게 아니면 route는 사용하지 않는다.

이제 back end는 post request를 이해 할수 있게 되었다.

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}`);
};

post edit이 뭘 하냐면 일단 먼저 req.params 로 부터 id를 받는다.

req.params는 videoRouter.js 에서 videoRouter.route("/:id(\\d+)").get(watch);

이중에서 /:id(\\d+) 바로 이 부분을 말하는 거다.

그리고 post request에는 params 말고 새로 나오는 부분이 있다.

그건 바로 req.body 이다.

videoController.js

  const { title } = req.body;

form 에 있는 value의 javaScript representation 이다.

edit.pug 에서

form(method="POST")
      input(name="title", placeholder="Video Title",value=video.title,required)
      input(value="Save",type="submit")

form안에 있는 value의 javaScript representation이다.

그건 req.body로 접근 할수 있다. 그치만 middleware를 설정해야만 가능한 일이다.

server.js에서

app.use(express.urlencoded({ extended: true }));

이 부분이다. 바로 이부분이 HTML form을 이해하고 그 form을 사용 할수 있는

javaScript object 형식으로 통역해준다. urlencoded가 해주는 일이다.

server.js

app.use(express.urlencoded({ extended: true }));
app.use("/", globalRouter);
app.use("/videos", videoRouter);

middleware가 videoRouter 전에 오기 때문에 어떤 request가 videoRouter.post에

이르렀을때 req.body가 이미 준비 되어 있다.

videoController.js

  const { title } = req.body;

바로 이부분이다. 아주 중요한 부분이다.

그 이유는 form을 javaScript으로 바꿔 주는 middleware가 route전에 있기 때문이다.

그 postEdit을 가지고 있는 videoRouter 전 이다.

req.body 에 접근하고 있고, 또 이 부분이 title을 갖고 있다는 것도 안다.

왜냐하면 이 input이 title이라는 name을 가지고 있기 때문이다.

그리고 다시 말하는데 에러는 늘 일어 나는 일이다. name넣는 걸 까먹으면 req.body에서 데이터를 볼수 없다.

그럴 경우 req.body는 텅 비어 있게 된다. 그러니 모든 input에 name을 넣어준다.

req.body에 접근이 가능해지면 비로소 비디오를 업데이트 할수 있다.

여기서 중요한 점!

videoController.js에서

  const video = videos[id - 1];
  const video = videos[id - 1];
  videos[id - 1].title = title;

이 부분들은 나중에 지워야 한다. 실제로 존재하는 database가 아니기 때문이다.

새롭게 database를 사용할때 그 때 수정 해준다. (실제 존재하는 database를 사용할때)

현재 코드에서 작동하는지 확인해 보면 EditVideo(제목 변경)까지 잘 되고 새로고침 해도 그 대로 적용 되고 있다.

그러나 서버를 재 시작하게 되면 다시 reset되는걸 알 수 있다.

실제로 적용되는 database가 아니기 때문이다.

mongodb, 그리고 mongoose라는 걸 쓸거다.

mongodb는 아주 멋진 database이다. 많은 업체에서도 사용하고 있다.

그리고 mongoose를 통해서 javaScript에서 mongodb와 상호 작용 할 거다.