Express GET과 POST

우리가 서버에 접속해서 서버에게 어떤 정보를 받아오는 것을 GET방식이라고 합니다. 더 정확히 표현해보자면 클라이언트 입장으로 보았을 때 우리가 서버에게 어떠한 정보를 가져오는(GET)것인 셈이죠.

그렇다면 POST방식은 무엇일까요? 우리는 지금까지 POST방식을 단 한번도 사용하지 않았습니다. POST는 대체적으로 내 정보를 서버에게 보내는 작업을 할 때 POST메서드를 사용하게 되어있습니다.
코드를 예를 들어 설명해보겠습니다.

1) GET방식

const express = require('express');

const app = express();

app.set('view engine', 'jade');
app.set('views', './views');
app.use(express.static('public'));

app.get('/form', function(req, res){
  res.render('form');
});

app.get('/form_receiver', function(req, res){
  var title = req.query.title;
  var description = req.query.description;
  res.send(title+','+description);
});

위 코드는 클라이언트가 서버의 /form이라는 PATH에 접근했을 때 2개의 입력을 받는 폼을 응답합니다.

<form action="/form_reciever" method="get">
  <input type="text", name="title" />
  <textarea name="description" />
  <input type="submit" />
</form>

보다시피 이 폼은 입력받고 제출버튼을 누르는 즉시 /form_reciever PATH로 이동하게 되며 get 메서드를 사용하게 됩니다. 예를들어 title input에는 아이디를 입력하고 description textarea에는 패스워드를 입력받아 제출되었을 때 우리는 /form_reciever?title="tsuel"&description="shiga"라는 url로 이동하며 서버에서는 /form_reciever에 해당하는 라우트의 get메서드를 실행하게 되어 페이지에는 tsuel, shiga라는 텍스트가 나오게 됩니다.

2) POST 방식

const express = require('express');
// bodyParser라는 미들웨어가 있어야 POST방식으로 클라이언트의 정보를 받아올 수 있다.
const bodyParser = require('body-parser');

const app = express();

app.set('view engine', 'jade');
app.set('views', './views');
app.use(express.static('public'));
app.use(bodyParser.urlencoded({ extended: false }))

app.get('/form', function(req, res){
  res.render('form');
});

app.get('/form_receiver', function(req, res){
  var title = req.query.title;
  var description = req.query.description;
  res.send(title+','+description);
});

app.post('/form_receiver', function(req, res){
  var title = req.body.title;
  var description = req.body.description;
  res.send(title+','+description);
});

POST방식에서 사용하는 Form은 다음과 같습니다.

<form action="/form_reciever" method="post">
  <input type="text", name="title" />
  <textarea name="description" />
  <input type="submit" />
</form>

method방식만 바뀌었지만 동작하는 방식은 180도 달라집니다.
먼저 GET방식과 다르게 이동하는 URL이 달라지는데 /form_reciever라는 URL로 이동하게 됩니다.
앞의 GET방식에서는 /form_reciever?title="tsuel"&description="shiga"와 같이 Query가 붙게 되지만 POST방식에서는 이를 숨기게 되는 것이죠. 이것말고는 GET방식과 다른점이 없는데 왜 POST를 사용해야 하는 것일까요?

우리가 POST방식으로 접근하게 된다면 클라이언트가 정보를 보낼 때 정보를 은닉하게 됩니다. 예를 들어 로그인 같은 작업을 GET방식으로 전송하게 된다면 URL에 ID와 PW와 같은 민감한 정보가 그대로 노출되게 됩니다. 만약 그렇게 정보가 노출된다면 누군가가 URL에서 정보를 빼내어 악용할 수도 있는 것이죠. 때문에 POST방식을 사용하는데 POST방식은 클라이언트로부터 정보를 받지만 위 사진과 같이 정보를 감추어(POST) 보내게 됩니다.

다시 위의 POST방식에서 클라이언트가 Form을 통해 정보를 전송하고 서버 측에서는 app.get메서드가 실행하는 것이 아닌 app.post메서드가 실행되어 shiga, tsuel이라는 text를 페이지에 출력할 수 있습니다.

참고로 POST메서드로 정보를 보내고 서버에서 req.body로 정보를 가져오려고 하면 다음과 같은 에러가 발생하는데

이는 정보를 감추기 때문에 발생하는 것입니다. 정보 자체는 제대로 서버에게 전송되었지만 Express에서 POST방식을 사용하기 위해서는 body-parser라는 미들웨어가 필요합니다. req.body로 받아온 정보를 parse해주는 역할을 하기 때문에 어떤 컨텐츠 정보라도 받아올 수 있습니다.(그 외에 파일을 받아오는 multer라는 미들웨어도 존재함)

body-parser를 사용한 후 req.body 출력하면 POST로 받아온 정보를 가져오는 것이 가능합니다.

출처: https://opentutorials.org/course/2136/11949