폼에 입력한 데이터를 서버에 전송하는 법(POST)

해당 글은 이전 글들의 작업을 이어서 진행되고 있는 글입니다.

 

준비물: 우선 부스트스트랩으로 ToDoList 폼을 만들어보자. 

<h4 class="container mt-4"><strong>글 작성페이지</strong></h4>

<div class="container mt-3">
  <form>
    <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>
</div>

 

 

 

STEP01 - form 태그 셋팅

[write.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>

 

action="/add" method="POST" : /add 경로로 POST를 요청함.

 

위의 세팅과 더불어 각각의 input 태그 내부에는 name을 작성해주어야 body-parser로 정확한 데이터를 뽑아내서 사용할 수 있다.

---

STEP02 - body-parser 설치

[server.js]

const express = require('express')
const app = express()

//body parser 라이브러리 설치
const bodyParser= require('body-parser')
app.use(bodyParser.urlencoded({extended: true}))

app.listen(8080, function() {
    console.log('listening on 8080')
})

app.get('/', function(request, response) { 
  response.sendFile(__dirname +'/index.html')
})

app.get('/write', function(request, response) { 
    response.sendFile(__dirname +'/write.html')
});

// /add라는 경로로 누군가 들어오면 전송완료라는 문구를 나타내줘라.
app.post('/add', function(request, response)
  console.log(request.body);
  response.send('전송완료')
});

 

body-parser : POST request data의 body로부터 파라미터를 편리하게 추출

---

STEP03 - body-parser 사용해서 데이터 추출하기

 

 

 

위와 같이 폼을 입력하고 제출하면 아래와 같이 request에서 데이터를 뽑아서 사용가능하다.

request.body // {title: node.js 공부하기, date: 2020.08.25}
request.body.title // title: node.js 공부하기
request.body.date // date: 2020.08.25

 

위의 데이터를 이용해서 /add 페이지에서 다양하게 활용하면 된다.