node-Express POST request

POST 요청을 처리하는 방법

//edit.pug

extends base.pug

block content
    h3 Edit
    h4 Title
    form(method="POST") 
        input(name="title", placeholder="new title", value="enter",required)
        input(type="submit", value="Save")

form 안의 input에 입력된 값을 database로 post 한다. = database를 update한다.

아직까지는 node.js app이 post요청을 어떻게 처리할지 모르기 때문에 라우터를 추가해야 한다.
(form에 action을 따로 지정하지 않아서 post url은 그대로 유지됨)

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

:id(\d+)/edit url에서 get 요청시 getEdit, post 요청시 postEdit을 수행한다.

위 코드는 아래 두 줄의 코드를 합친것과 같다.

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

라우터를 지정해뒀으면 이제 post요청을 받았을때 어떻게 처리해야 할지 node.JS app이 알고있다. 하지만 아직 postEdit을 정의하지 않았으므로 controller를 추가해준다.

export const postEdit = (req, res) => {
  const { title } = req.body; // form 의 내용을 javascript object로 변환하여 돌려준다.
  const { id } = req.params;
  videosInfo[id - 1].title = title;
  return res.redirect(`/videos/${id}`); // res.redirect("/") 자동으로 url 경로를 "/"로 이동
};

database의 title을 form에서 받은 값으로 변환하고 url을 /videos/${id}로 자동 변경한다.

새로운 컨트롤러를 만들었을 때 export와 import 하는 것을 잊지 말자.

이 때 req.body를 사용하려면 express에 추가적인 작업이 필요한데 이 때, middleware를 통해서 라우터를 실행하기 전에 거치도록 코드 작성 순서에 신경써야한다.

app.use(express.urlencoded({ extended: true })); // express 앱이 form의 value를 이해하게한다.

추가로 input에 name을 지정하지 않으면 req.body를 받아올 수 없음.