3_ [node.js] form 데이터를 서버로 전송하기

form 데이터를 서버로 전송할 때는 먼저 form태그를 셋팅해야 한다.

form태그 안에

<form action="/add" method="POST">
  <input type="text" name="todoTitle" />

위 코드처럼 전송 방법을 명시해주고, input같은 입력태그 안에 name속성으로 각각 입력태그에 이름을 넣어준다.

input의 이름에 따라 각 입력된 데이터가 따로 들어가게 만들어 주는 것

body-parser

위처럼 각 태그들에 이름을 넣어줬다면 쉽게 데이터를 전송하는게 가능한데,
body-parser를 이용하면 쉽게 할 수 있다.
원래 이 친구는 따로 npm해서 받아줬어야하는데 21년이후에는 express에 기본으로 포함되서 그냥 사용하면된다.

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

위 코드를 server.js에 입력해주면 사용할 수 있다.

POST요청 처리하는 코드

위에 body-parser를 이용해서 post요청을 처리해보자.

app.get이랑 매우 유사한데

app.post('/add', function(req, res){
  console.log(req.body);
  res.send('전송완료')
});

위 처럼 작성해주면 간단하게 POST요청을 처리할 수 있다.
누군가 /add 경로로 post요청 시 함수안을 처리해주는 코드이다.

위처럼 server.js를 작성하고 입력폼에 대충 입력한다음에 submit해주면 서버에 전송이 완료된다.

server쪽 콘솔

브라우저에서 확인