[Node.js_study] 폼에 입력한 데이터를 서버에 전송하기 (POST요청)

1. form 태그 셋팅

  > form 데이터를 서버로 전송

 

HTML의 form 내의 input들에 입력한 데이터들을 서버로 전송할 수 있다.

전송하고 싶다면 여러분이 form 태그에 여러가지 전송 방법들을 명시해주면 된다.

 

* form 형식 예시 코드

<form action="/write" method="POST">
  <div class="form-box">
    <label for="title">Title</label>
    <input type="text" name="title" id="title">
  </div>
  <div class="form-box">
    <label for="content">Content</label>
    <input type="text" name="content" id="content">
  </div>
  <button type="submit">Submit</button>
</form>

 

* form submit 버튼을 누를 시 /write 라는 경로로 POST 요청을 하는 form이다.

* form태그의 method 속성은 GET/POST중에서 어떤 요청을 할 건지 작성해주는 부분

* action은 어떤 경로로 요청을 할건지 정해주는 부분

* 각각의input마다 name속성을 주어서 어떤 input에서 작성된 데이터인지 알 수 있다.

---

2. body-parser 설치

1번까지 해도 데이터가 잘 전송되긴 한다.

하지만 body-parser라는 라이브러리가 있어야 우리가 보낸 데이터들 처리가 쉽게 가능합니다. 

 

* npm install body-parser 혹은 yarn add body-parser

(2021년 이후로 설치한 프로젝트들은 body-parser 라이브러리가 express에 기본 포함되어있어서 

따로 npm으로 설치할 필요가 없습니다. )

 

* 아래의 코드만 추가하면 된다.

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

* 이전 프로젝트는 아래와 같이 코드를 추가

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

 

---

3. POST 요청 처리

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

* post를 이용해서 submit하였을 때 input에 적은 정보 콜백함수의 요청 파라미터안에 담겨 있다. 

 

* /write 경로로 post 요청을 할 때 터미널 콘솔창에 req.body를 출력해볼 수 있습니다. 

req.body는 폼에서 입력한 title과 content 데이터가 들어가있을 것입니다.

 

* res.send() 라는 함수로 성공했다는 메세지를 브라우저에 전달가능