[Node.js / MongoDB] POST 요청해보기

💡 실습 포인트!

• 이번에는 글쓰기 페이지에서 폼 내용을 작성한 후, POST 요청을 해보았다.
• POST 요청을 했을 때, 내가 작성한 내용들이 제대로 전송이 되는 것이 목표! 

---

💜 form 태그 셋팅하기

<form action="/add" method="POST">
    <div class="form-group my-4">
      <label class="mb-2">오늘의 할일</label>
      <input type="text" class="form-control" name="content">
    </div>
    <div class="form-group my-4">
      <label class="mb-2">날짜</label>
      <input type="text" class="form-control" name="date">
    </div>
    <button type="submit" class="btn btn-danger fw-bold">Submit</button>
</form>

• form 태그에 action 과 method 속성을 넣어, Submit 버튼을 누를 때 /add 라는 경로에 POST 요청을 하도록 설정해주었다.
• action 은 어떤 경로로 요청을 할 것인지, method 는 어떤 요청을 할 것인지를 정해주는 부분에 해당한다.
• 또한, input 이 여러 개이므로 name 이라는 속성을 넣어, 서버가 어느 input 의 데이터인지 구별을 할 수 있게끔 해주었다.

---

💜 body-parser 설치하기

• 2021년 이전에 설치한 프로젝트들은 body-parser 라는 라이브러리가 있어야 데이터 처리가 용이하다.
• 터미널에 npm install body-parser 를 입력하면 body-parser 라이브러리가 설치된다.
• 설치가 완료되면 JavaScript 파일에 아래의 코드를 추가해주면 body-parser 설치가 완료된다.

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

• 2021년 이후에 설치한 프로젝트들은 body-parser 라이브러리가 express 에 기본으로 포함되어 있으므로 npm 으로 따로 설치할 필요가 없다.
• 대신 아래의 코드를 JavaScript 파일에 추가하면 된다.

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

---

💜 POST 요청 처리하는 코드 짜기

// 누군가가 글쓰기 페이지에서 폼을 작성한 후, Submit 버튼을 눌러 /add 경로로 POST 요청을 하면
app.post('/add', function(req, res){
	// '전송 완료' 라는 문구를 띄운다.
    console.log(req.body); // 폼에 작성한 데이터가 제대로 전송되는지 확인
    res.send('전송 완료')
  });

• 폼에 작성한 데이터가 제대로 전송되는지 확인하기 위해 console.log(req.body) 로 확인해보았다.

• 위와 같이 터미널에서 전송한 내용이 객체의 형태로 제대로 나오는 것을 확인할 수 있다.