POST method

1. POST

 - 그동안은 router에서 get만 했었지만 backend에 post까지 하는 방법을 배워야함

 - 우선 현재의 목표는 db에 있는 모든 것들을 나열

   - 이미 home.pug에서 구현이 된 상태

 - 유저가 한번에 1개의 영상만 볼 수 있도록 해야함

 - 그 다음으로는 영상을 업로드 할 수 있어야 함

 - https://github.com/Daniel-Jeon/wetube-loaded/commit/997d75b5d7fa8c0c90b5008f17d92954d2af83ee

Study post(1) :) · Daniel-Jeon/wetube-loaded@997d75b

 

// watch.pug
extends base.pug

block content
    h3 #{video.views} #{video.views === 1 ? "veiw" : "views"}
    a(href=`${video.id}/edit`) Edit Video →

 - URL에는 절대경로와 상대경로가 있음

   - 절대경로는 URL의 시작을 /로 하게 될 경우를 말하며, 최상위를 기준으로 함

   - 상대경로는 해당 파일의 위치를 기준으로 함

 - edit.pug 수정

// edit.pug
extends base.pug

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

 - save를 누르면 action의 값으로 이동함

   - 데이터가 어디로 보내져야 하는지를 결정

 - 우리가 시청중인 영상을 수정하기 위해 /edit으로 이동했고, 그때 GET method를 사용했음

 - 하지만 영상을 수정하면서 같은 URL에 데이터를 보내므로, POST method로 변경해야함

    form(method="POST")

 - 이전과 다르게 Cannot GET이 아닌 POST 에러가 발생

extends base.pug

block content
    h4 Change Title of Video
    form(action="/save-change", method="GET")
        input(name="title", placeholder="Video Title", value=video.title, required)
        input(value="Save", type="submit")

 - 다시 이렇게 수정해보면 Cannot GET 에러가 발생되고, URL에 title이 추가됨

   - 기본적으로 method는 GET임

   - 우리가 웹에서 검색을 하고 URL을 보면 검색한 내용이 URL에 포함되어 있음

 - POST는 파일을 업로드하거나, DB의 값이 변경될 때 사용

   - method를 POST로 변경하고 save해보면 URL에 title이 추가되지 않고 에러는 그대로 발생

 - https://github.com/Daniel-Jeon/wetube-loaded/commit/7c21ef97ecfb06168071b65da0be6d36ecdd2764

Study post(2) :) · Daniel-Jeon/wetube-loaded@7c21ef9

 

2.  Route

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

// route를 사용하여 한줄로 줄일 수 있음
videoRouter.route("/:id(\\d+)/edit").get(getEdit).post(postEdit);

// videoController.js
export const postEdit = (req, res) => {
  const { id } = req.params;
  return res.redirect(`/videos/${id}`);
};

- redirect는 브라우저가 해당 URL로 바로 이동하도록 함

  - 수정이 되고나면 다시 해당 영상으로 이동

- 이제 form으로부터 변경된 영상의 제목을 가져와야함

- 하지만 현 상태에선 express application은 form을 어떻게 다루는지 모름

 

3. express.urlenconded

 - https://expressjs.com/ko/4x/api.html#express.urlencoded

Express - Node.js web application framework

 - extended는 body에 있는 정보를 보기 좋게 형식을 갖춰줌(javascript object)

 - extended를 사용하기전 명심해야 할건, routes를 사용하기 전에 middleware를 사용해야 함

   - 그래야 middleware가 form을 이해하고 javascript로 변형시키고 그걸 개발자가 사용

// server.js
app.use(logger);
app.use(express.urlencoded({ extended: true }));
app.use("/", globalRouter);
app.use("/videos", videoRouter);
app.use("/users", userRouter);

// 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는 form에 있는 value의 javascript representation(javascript식으로 표현)

   - 이 것을 사용하기 위해 app.use(express.urlencoded({ extended: true })) 라는 middleware를 설정했음

   - request에 name이 없다면 데이터를 볼 수 없으므로 깜빡하지 말고 input에 name을 작성