POST (백엔드로 보내기)

HTTP 메서드 중에 get을 사용하고 있었다. 이는 백엔드로부터 정보를 가져오는 것으로, 화면을 띄울때, 검색을 할때 등등 사용된다. 하지만 우리는 어떤 정보를 수정해야할 때 이 정보를 백엔드로 보내서 수정해야하는데 이때 사용하는 것이 post 이다.

내 프로젝트에서는 동영상 제목 수정 시, post를 사용했다.

일단 퍼그에 다음과 같은 코드를 작성했다. 이는 동영상 제목을 수정하기 위한 form 이다.

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

이제 버튼을 누르면, post request를 백엔드로 보내게된다. 하지만 아직 백엔드는 post를 처리할 방법을 모른다. 따라서 라우터를 추가하여 post하는 방법을 알려줘야 한다.

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

이 처럼 작성하면 이제 백엔드는 post를 처리할 방법을 알고 postEdit함수를 호출한다.

export const postEdit = (req, res) => {
  const id = req.params.id;
  const title = req.body.title;
  videos[id - 1].title = title;
  return res.redirect(`/videos/${id}`);
}

postEdit 함수는 위와 같다. 우리가 퍼그에서 만든 form의 value를 가지고오기 위해 req.body를 사용해야 한다. 하지만 이는 

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

이러한 코드를 작성해 주어야 사용 가능하다. 이 코드가 HTML의 form을 이해하고 우리가 사용할 수 있는 자바스크립트 객체로 통역해준다.

req.body 에는 title이 있다는 것을 아는데 , 이는 input의 name이 title 인 것이 있기 때문이다. 따라서 name 이 없다면 req.body에는 아무것도 들어 있지 않다.