Edit Video # 01

0_CyberLover_0·2022년 3월 29일

Node.JS # 02

목록 보기

15/19

videoRouter.js

const videoRouter = express.Router();
videoRouter.get("/:id(\\d+)/edit", edit);

videoController.js

export const edit = (req, res) =>
  res.render("Edit", { pageTitle: "Edit Videos" });

id/edit 경로가 router에 등록 되어 있다.

edit이라는 컨트롤러를 사용하는데 아직 하는 일이 없다.

기본적으로 watch에서 했던 걸 적용해 준다.

videoController.js

export const edit = (req, res) => {
  const { id } = req.params;
  const video = videos[id - 1];
  return res.render("Edit", { pageTitle: `Editing ${video.title}` });
};

이제 새로 고침 해보면 Editing 몇번째 video라고 뜬다.

이제 edit 템플릿을 수정해본다.

edit.pug

extends base.pug

block content 
   h4 Change Title of Video
   form(action="")
      input(placeholder="Video Title")
      input(value="Save",type="submit")

form은 action 속성을 가진다.

현재 save를 누르면 새로고침만 된다. 아무런 기능이 없기 때문이다.

edit.pug 에서

input(placeholder="Video Title",value=pageTitle)

pageTitle도 추가 해 주었다. 그러나 pageTitle에 editing이라는 단어가 있어서

video를 variable로 보내줘야 한다.

그래서 다시 수정해 준다.

videoController.js에서

export const edit = (req, res) => {
  const { id } = req.params;
  const video = videos[id - 1];
  return res.render("Edit", { pageTitle: `Editing ${video.title}`,video });
};

const video = videos[id - 1]; 현재 이 video object를 edit 템플릿에다가

보내주고 있다.

그리고 이제

edit.pug로 다시 이동해서

input(placeholder="Video Title",value=video.title)

value=video.title 로 변경해 준다.

그러면 이제 해당 id를 가진 video라고 뜬다.

그리고 required도 추가해준다.

(required의 기능은 해당하는 칸이 빈칸인 경우 넘어갈수 없다.)

input(placeholder="Video Title",value=video.title,required)

이제부터 back end로 보내는 방법에 대해서 알아 보도록 하겠다.

지근 하는건 back end에서 비디오를 얻는게 다이다.

save를 누르면 어딘가로 정보를 보내줘야 한다.

보내줘야 할 곳은 edit.pug에서 form(action="") 이라는 속성에 적혀있다.

어디로 보내야 하나 그 값이 action에 들어가는 값이다.

그 값은 url이 될 거다. 서버가 가져야 하는 url...

현재 서버는 이 url을 가지고 있다.

videoRouter 에서

videoRouter.get("/:id(\\d+)/edit", edit);

edit url 이다. 차이점이 뭐냐면 method이다.

get을 사용하고 있다. 지금 데이터를 똑같은 url에 보내고 싶으거니깐

action을 지워 준다. 그런데 method도 바꿔 준다.

method는 POST가 될것이다.

form(method="POST")

현재 이 method는 아직 서버가 이해하지 못한다.

새로고침 해보면 다른 페이지로 넘어 가는걸 알수 있다.

현재는 POST를 할 수 없다는 걸 알수 있다.

만약 action을 바꾸면 어떻게 변하는지 한번 적용해 보자.

edit.pug

form(action="/save-changes")

methodfmf post로 바꾸지 않았다.

새로고침을 한다음 save를 누르면 /save-changes로 이동한다.

그러나 GET request를 써서 이동했다.

get request 와 post request의 차이점을 알아보자.

이 둘의 차이점을 알아보려면 먼저 input에 이름을 지어줘야한다.

edit.pug 에서

input(name="title",placeholder="VideoTitle",value=video.title,required)

input 에다가 이름을 title 로 주었다.

새로고침 해서 url을 확인하면 /save-changes 로 이동하는데 title도 url에 들어 가 있다.

이게 바로 get이 하는 일이다. 기본값으로 method는 GET이다.

edit.pug에서

form(action="/save-changes", method="GET")

그렇다면 get 방식을 쓰는 form은 어떨 때 사용하는지 알아 보자.

예를 들어 구글이나 네이버에서 뭔가 검색을 할때 그 검색어가 주소창에 포함되어 있을 것이다.

그럼 post는 언제 사용될까?

post 방식은 파일을 보내거나, database 있는 값을 바꾸는 것을 보낼때 사용한다.

예를 들어서 get은 비디오를 검색하거나 할 때 사용 한다.

그런데 database를 바꿀 data를 보내거나 , file을 보낼때 , 웹사이트에 로그인 할때도 post를 사용한다.

로그인에는 get을 쓰지 않는다.

그래서 method="get" 을 post로 바꿔 준다.

edit.pug에서

form(action="/save-changes", method="POST")

새로고침해서 url을 확인해 보면 /save-change로 이동하는걸 알수 있다.

그리고 url 안을 보면 title이 없다.

그리고 /save-changes에 POST 할수 없다는 에러가 뜨는걸 볼수 있다.

별개의 url을 만들고 싶지 않으니 이 action은 지운다.

edit.pug 에서

form(method="POST")

이렇게 변견해 주고 새로고침해서 확인해 보면 똑같은 url로 가는데

다른점은 이번엔 POST 하고 있다는 것이다.

현재 서버는 post에 대해서 아무것도 데이터를 받아 들이지 않고 있다.

그러므로 서버에게 보내도록 해 보겠다.

videoRouter.js에서

const videoRouter = express.Router();
videoRouter.get("/:id(\\d+)/edit", Edit);
videoRouter.post("/:id(\\d+)/edit")

post를 해준다. edit이랑 같은 url을 해준다.

그리고 잊지 말고 function도 만들어 준다.

videoController.js 에서

export const postEdit = (req, res) => {};

edit function은 이미 있으니깐 postEdit으로 만들어 준다.

그리고 원래 있던 edit 은 getEdit으로 바꿔 준다.

export const getEdit = (req, res) => {
  const { id } = req.params;
  const video = videos[id - 1];
  return res.render("Edit", { pageTitle: `Editing: ${video.title}`, video });
};