Express Post 요청 받기

글을 업로드하기 위해서는 html에서 POST요청을 해야한다.
html에서 직접적으로 데이터를 보낼수 없기 때문에 그에 대한 라이브러리를 설치해야한다

body-parser

Node.js쓰이는 모듈로 클라이언트 POST request data의 body로 부터 파라미터를 추출한다.

그렇기에 Node.js로 서비스를 하는데 업로드가 안된다면 body-parser가 설치되어 있는지 확인해 봐야한다

body-parser install

npm install body-parser

server.js 내용 추가

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

app.post('/add', function(req, res){
  console.log(req.body.title);
  console.log(req.body.date);
});

이것은 외울 필요는 없고 사이트에 들어가서 사용법만 들어가보면 알수있다.

이제 html에 아래 내용을 추가해보자

<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 예시를 가져와서 추가 내용을 추가한것이다.

우선 form에서 내용을 받기위해서는 form에 action="/add" method="POST"을 추가해야 body-parser를 사용할수 있다.

그리고 각 input란에 name으로 title, date를 적어주면 이제 body.title, body.date로 내용이 추출된다.

버튼을 누르면 이걸 추출해주세요 하고 보내게되고, API에서는 요청, body에서 데이터가 오는데 형태가 Object로 데이터가 입력된다. 그렇다면 우리는 내용만을 추출해야하기 때문에 key 벨류까지 지정해서 데이터를 추출해야한다. 그래서 내용을 req.body.title, req.body.name 으로 하면 console창에서 적은 내용이 그대로 올라오게 된다.