NodeJS - form에 입력한 데이터를 서버에 보내기(POST요청)

저번엔 GET요청을 하는 법을 포스팅했었다.
이번에는 POST요청을 해본다.
POST요청은 주로 글쓰기, 회원정보 입력 등에 사용한다.
HTML 내 form태그 내부의 정보들을 서버로 보내려면?

 <form action="/add" method="POST">
        <div class="form-group">
          <label>오늘의 할일</label>
          <input type="text" class="form-control" name="title" />
        </div>
        <div class="form-group">
          <label>날짜</label>
          <input type="text" class="form-control" name="date" />
        </div>
        <button type="submit" class="btn btn-outline-secondary">Submit</button>
      </form>

백엔드에서

form 태그 내의 action과 method는 항상 필수!

action은 "데이터를 전송할 경로가 어디인지"
method 는 "데이터를 어떤 형태로 전송할지(POST일지 GET일지 등등)"

그리고 input 태그 내에 name속성을 추가해줌으로써
정보를 전달받았을 때 이 정보가 어떤 input에 적혔던 것인지 구분할 수 있게 한다.
input태그가 여러개면 어느 input에서 온 정보인지 구분이 안갈테니까.

그리고나면

body-parser 를 설치해준다.

body-parser는 데이터를 쉽게 처리할 수 있게 돕는 라이브러리이다.
1. npm install body-parser 혹은 yarn add body-parser를 터미널에 입력 후

2. 내 서버.js파일 상단에

const bodyParser= require('body-parser')
app.use(bodyParser.urlencoded({extended: true})) 

를 추가해준다.

• body-parser는 express라이브러리에 기본내장되어있기 때문에 따로 npm 설치할 필요 없이
  app.use(express.urlencoded({extended: true})) 만 추가해주면 된다.

form의 데이터를 전송하기 위해 POST요청하는 코드 작성하기

GET요청과 비슷한 형태로

app.post('/add', function(요청, 응답){
  console.log(요청.body);
  응답.send('전송완료')
});

.get()대신 .post()를 해준다.
위 코드는
"누군가 /add 경로로 post요청을 할 때 콘솔에 "요청.body"를 출력한다"
요청.body 에는 내가 폼에 입력한 title과 date 데이터가 들어있다.
(그리고 응답.send("어쩌구")를 통해 전달성공했다는 메시지를 브라우저에 전달해준다.)

를 입력하고 Submit해주면
{ title: '숨쉬기', date: '2022.02.07' }
라고 콘솔에 데이터가 출력된다.

요청.body.title 을 쓰면 "숨쉬기"가 출력될 것이다.