(Node.js-express) get, post요청 처리/body-parser deprecated

---

(Node.js-express) post시 submit한 값 가져오기

---

포스팅 요약

1. body-parser deprecated에 관해서

2. post 요청 처리법

3. 간단한 예제

예제 1)

예제 2)

---

1. body-parser deprecated에 관해서

> 원래는 post시 get에서 값을 받아올 때 상단에 "var bodyParser = require('body-parser')" 로 모듈을 불러와야 됐지만, 현재는 모듈을 불러오지 않아도 된다.

> 물론 npm install body-parser도 안해도 된다.

> 4.16.0버전 이상부터, express.json() 및 express.urlencoded() 메서드 내부에 body-parser이 포함되어 있습니다. 

 

---

2. post 요청 처리법

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

app.use(express.json())
app.use(express.unlencoded({extended: true}))

app.post('/position', (request, response)=>{
	response.json(request.body); // or response.send(request.body);
});

 

---

3. 간단한 예제

> get 에서 버튼을 눌렀을시,  post에서는 어떤 버튼을 눌렀는지 알 수 있게 처리해 줄겁니다.

(자세한 사항은 예제를 참고해주세요)

예제 1)

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

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

app.get('/', (req, res) => {
  res.send(`
  <form action="/" method="post">
    <input type="submit" name="position" value="문과생">
    <input type="submit" name="position" value="이과생">
  </form>
  `);
});

app.post('/', (req, res) => {
  console.log(req.body);
});

app.listen(3000, () => {
  console.log('3000 포트에서 서버 시작');
});​

* form 안의 action은 데이터를 처리할 가리킴.

* post요청을 해야되는 경우, form안에 method속성을 "post"로 줘야됨.

(안줄 경우 method ="get"이 기본값으로 들어가 있음)

 

<결과>

* 여기서 알 수 있는 것 !!! 

req.body에는 태그 속성 중 name 있는 값을 key값으로,

value에 있는 값을 value값으로 객체 형식으로 받아온다!!

---

예제 2)

> 전달 받은 값이 많을때 사용하기 좋게 정리하기

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

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

app.get('/', (req, res) => {
  res.send(`
  <form action="/" method="post">
    <input type="submit" name="position" value="문과생">
    <input type="submit" name="position" value="이과생">
  </form>
  `);
});

app.post('/', (req, res) => {
  const {
    body: { position },
  } = req;
  
  res.send(
    `<script>alert("${position}"); window.location.href = "/"; </script>`
    //알림창이 뜨면서 확인 클릭 시 "localhost:3000/"으로 이동
  );
});
app.listen(3000, () => {
  console.log('3000 포트에서 서버 시작');
});

* 현재는 전달받은 값이 하나밖에 없지만, 값이 많아졌을때  const { body: {position, title, description...},} = req; 형식으로 사용하면 된다. 

*value 값을 설정하고 싶을때는, const{ body:{position: "의대생", title, description...},} = req; 형식으로 사용하면 된다.

 

<결과>

이과생 버튼을 눌렀을때,

문과생 버튼을 눌렀을때,