#6.1-2 Edit Video part One

data를 어떻게 백엔드에 post하는지 배워보자

📑 실습

1. 가짜 database에 있는 모든 비디오 나열하기 (이전 실습때 완료(mixin)) ✅
2. 유저가 하나의 비디오를 볼 수 있게 하기(완료) ✅
3. 영상 수정 기능
4. 비디오 업로드 기능

---

3. 영상 수정 기능

• 수정된 Title을 어떻게 Back end로 보내는지 학습(지금까지는 비디오를 얻은게 다임)

• submit 버큰을 클릭할 때, form의 행동을 어떻게 통제하는지

• method는 form과 back end 사이의 정보 전송에 관한 방식

• 전송한 데이터는 form(action="")에 들어갈 것임. 그 값은 서버가 가져야 하는 url이고 url은 이미 가지고 있음(/:id(\\d+)/edit)

• 다만 url을 가지고 있는게 get이기 때문에 post router를 만들어줘야함

1. a링크 만들기

extends base.pug

block content
  h3 #{ video.views } #{ video.views === 1 ? "view" : "views" }
  a(href=`${video.id}/edit`) Edit Video →
  //-${video.id}/edit만 적는 이유는 absolute와 relative url을 알려주기 위함(/video/안적음)

absolute url(/eidit) - 내가 어디있든 root경로 + /edit
ex) http://localhost:4000/edit
relative url(edit) - 내가있는 경로 + /edit
ex) http://localhost:4000/videos/edit

2. edit controller 수정

videoController.js

export const getEdit = (req, res) => {
  // const id = req.params.id; //URL에 id를 가지고 있기때문에 req.params를 출력할 수 있음
  const { id } = req.params; //위의 ES6버전
  const video = videos[id - 1]; //index는 0부터 시작하기때문에 -1
  return res.render("edit", { pageTitle: `Editing: ${video.title}`, video });
};

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

3. edit Router 수정

videoRouter.js

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

4. edit template 수정

• form의 기본값은 get이기 때문에 method를 post로 지정해줘야함

edit.pug

extends base.pug

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

method 방식에 따른 form사용

• get 방식: 검색을 할 때(검색 시 검색어가 주소창에 포함되어있음)
  https://www.google.com/search?q=nomadcoders&oq=nomadcoders
• post 방식: 로그인하거나, 파일을 보내거나, database에 있는 값을 바꾸는 뭔가를 보낼 때