🔖 강의 범위: #6.2~6.3

Preview

form 의 value 를 받아 서버의 데이터를 수정하는 방법에 대해 알아보자.
그러기 위해 form 과 HTTP 통신법에 대한 기초 이해가 필요하다.

Form

지금까지는 #3 Router 강의 부분에서 GET 으로 요청 받는 법만 배웠다.
POST 로 서버 데이터를 수정하는 법도 배워보자.

https://developer.mozilla.org/ko/docs/Web/HTML/Element/form

method: GET, POST, PATCH, DELETE

• form 의 method 속성은 form 과 서버가 소통하는 방식이다.
  GET, POST, PATCH, DELETE 등이 있다.

// home.pug

form(method="POST")
	input(type="text" name="firstName" placeholder="First Name")
    input(type="submit" value="Submit")

• method 속성을 따로 설정 안하면 GET 값이 디폴트이다.

• GET 과 POST 의 차이점:
  GET은 서버에서 값을 "가져오는" 것이고,
  POST 는 서버의 값을 "수정"하는 것이다.

• POST 사용시 form 하위 input 에 name 속성이 필요 하다.🌟

• action 속성 은 form 에서 받아온 데이터들을 '어느 url' 으로 보낼건지 결정한다. 따로 설정 안하면 요청이 들어온 곳의 주소(form 이 있는 곳의 주소)가 디폴트로 할당된다.

강의 내용

res.body

req.body에는 form을 통해 submit된 데이터의 키-값 쌍을 포함한다.
기본적으로는 undefined이며 express.json() 또는 express.urlencoded()와 같은 바디 파싱 미들웨어를 사용할 때 값을 받아온다.

// 애플리케이션/json 파싱
app.use(express.json());
// application/x-www-form-urlencoded파싱 (form데이터 파싱)
app.use(express.urlencoded({ extended: true }));

https://expressjs.com/ko/api.html#req.body

express.urlencoded

express.urlencoded([options])
Express에 내장된 미들웨어 기능으로, urlencoded 페이로드* 로 들어오는 요청을 구문 분석하고 바디 파서를 기반으로 한다.

*페이로드란: 전송하고 받는 데이터 그 자체. (참조)

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

솔직히 다 이해는 안되고 그냥 "res.body 사용에 필요한 설정 과정" 정도로만 이해했다.

예제

Mission: form 의 내용을 submit 했을 때
1. form 의 value 값으로 기존 데이터를 수정하고,
2. 원래 watch 페이지로 돌아가도록 설정

step 1-1) form 의 method=POST 다룰 수 있도록 express 에게 POST 알려주기

//server.js

app.use(express.urlencoded( { property : true } ))


app.use("/", globalRouter);
app.use("/users", userRouter);
app.use("/videos", videoRouter);

property 들은 선택적이며 의무가 아니다. 어떤 property 들이 있는지는 사이트에 들어가 확인해 볼 수 있다. 수업에서는 extended prop 을 사용했고, extended prop 은, 간단히 설명하면, 새로 들어온 요청을 자바스크립트 obj 형식으로(키-값) 예쁘게 정리해주는 역할을 해준다. 이렇게 정리된 obj 가 req.body 이다.

주의! app.use(express.urlencoded()) 는 무조건 다른 app.get() 또는 app.use() 보다 앞(위)에 설정해줘야한다. 그래야 해당 라우터를 통해 가는 페이지들에서 req.body 를 사용할 수 있게 된다.🌟

step 1-2) 라우터에서 .post 설정해주기

//router.js

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

Router.route() 는 같은 url 을 공유하는 http 통신 매서드를 한번에 사용할 수 있도록 정리해준다. 같은 라우터 주소에서 get 과 post 매서드를 둘 다 사용할 수 있게 되었다.

step 1-3) 컨트롤러에서 req.body 사용하여 클라에서 온 정보 받기

//controller.js

export const postEdit = (req, res) => {
  const {id} = req.params;
  const {title} = req.body;
  videos[id-1].title = title;			// 이 줄은 가짜 db 수정이므로 크게 의미가 없다.
}

req.body 사용이 가능해진 걸 알 수 있다.
req.body.title 인 이유는 받아온 정보의 출처 input name 속성을 title 이라고 지어줬기 때문이다.
다시 한 번 말하지만 req.body 를 사용하기 위해서는 받아올 정보를 입력하는 모든 input 에 name 속성이 있어야 한다.🌟

step 2) res.redirect() 로 기존 화면으로 돌아간다.

//controller.js

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

res.redirect(): () 안의 url 로 보내준다.

복습!
res 매서드로는 지난 시간
res.end(), res.send() 만 배웠었다.

추가 공부 ？

• express.urlencoded() 매서드 읽고 정리하기
• res.body 읽고 정리하기

요약

• 서버 데이터를 단지 받아오는 것(GET) 뿐 아니라 수정하는 것(POST)까지 배워보았다.
• 이를 위해 form 의 method 속성에 대해서 살펴보았다. method 속성 값을 POST 로 설정시 input 에는 반드시 name 속성을 주어야 한다. form 에 method 속성 외에 action 속성을 줄 수 도 있는데, 정보를 보내는 url 주소를 설정할 수 있다. 따로 설정하지 않으면 해당 정보를 보낸 곳의 주소로 설정된다.
• 또한 express.urlencoded() 를 통해 res.body 를 생성하여 form submit 으로 수정된 데이터를 쉽게 불러올 수 있다.
• 이외에 Router.route() 와 res.redirect() 라는 express 의 다른 미들웨어들도 조금씩 접해보았다.