Express - HTTP Method GET, POST 데이터 처리

Express - HTTP Method GET, POST 데이터 처리

이번 시간에는 HTTP Method 중 GET과 POST 방식으로의 데이터를 처리하는 방법을 알아볼 것이다.

GET, POST 방식이란 HTTP 통신의 처리 방식인데 클라이언트와 서버간의 HTTP 통신 처리 방식을 의미한다.

HTTP 통신 처리 방식은 GET과 POST외에도 PUT, DELETE등이 존재한다.

이번 시간에는 GET과 POST방식을 처리하는 방법을 알아볼 것이다.

먼저 처리하는 방법을 들어가기에 앞서 GET과 POST가 어떠한 차이점이 있는지 알아보자.

HTTP 통신 Method	GET	POST	설명
특징	간단한 데이터를 처리하는데 용이 쿼리스트링의 길이 제한으로 대용량 데이터를 처리할 수가 없음	대용량 데이터를 처리하는데 용이	리소스(데이터)로 구분/조회하는 작업은 GET 리소스(데이터)를 생성(등록)하는 작업은 POST
	쿼리스트링에 데이터가 노출됨	쿼리스트링에 데이터가 노출되지 않음	쿼리스트링에 데이터가 노출됨으로 인해 보안성은 취약하다는 특징이 있음 그렇다고 POST방식이 보안성이 뛰어나다는 것은 아님
	데이터를 재활용할 수가 있음	한번 처리된 데이터는 재활용할 수 없음	GET은 쿼리스트링에 존재하기 때문에 요청 발생 시 서버에서 데이터를 재활용할 수 있음 POST는 쿼리스트링에 존재하지 않기 때문에 요청 발생 시 서버에서 데이터를 재활용할 수 없음

 GET 메소드 처리

GET 메소드로 사용자로부터 요청을 받고 데이터를 처리하는 방법을 알아보자.

메인 애플리케이션(app.js)에 아래의 코드를 작성하자.

// form 예제(type: GET)
app.get('/form_get', (req, res) => {
    res.render('form_get');
});
app.get('/form_get_receiver', (req, res) => {
    var title = req.query.title;
    var description = req.query.description;
    res.send(title + ',' + description);
});

2~4번 줄 - 

Express의 "get()"메소드를 이용해 form_get.pug라는 뷰 페이지로 이동시키는 기능을 작성한다.

pug템플릿 파일로 이동시키기 때문에 render()함수를 이용하여 페이지 이동을 처리한다.

5~9번 줄 -

form_get.pug페이지에서 form데이터를 HTTP통신으로 GET 메소드로 처리할 것이다.

사용자로부터 title과 description이라는 데이터를 전달받을 것이고 그 데이터를 화면에 출력해줄 것이다.

request객체의 query속성을 이용하여 GET 메소드로 전달된 데이터들에 접근한다.

views폴더 하위에 form_get.pug라는 파일을 생성한다.

그리고 아래의 코드를 작성한다.

pug템플릿은 !DOCTYPE html 선언을 1번줄로 처리할 수 있다.

pug템플릿에서 HTML태그 속성 처리는 '()'괄호를 이용해서 처리할 수 있다.

자세한 내용은 pug 홈페이지에서 API문서를 보도록 하자.

https://pugjs.org/language/attributes.html

핵심은 바로 form태그로 input태그들과 textarea태그를 감싸고 있다는 것이다.

HTTP통신으로 GET메소드나 POST메소드로 통신을 처리하기 위해서는 일단 form태그로 전달하고자 하는 데이터 항목들을 감싸고 있어야한다.

그리고 form태그의 action속성으로 데이터를 전달할 서버 스크립트 파일을 지정한다.

form태그의 method속성으로 GET메소드 방식의 통신인지 POST메소드 방식의 통신인지를 지정해준다.

"localhost:9000/form_get"으로 브라우저를 통해서 접속해보면 아래와 같은 폼이 만들어지는 것을 알 수 있다.

각 폼에 데이터를 작성하고 제출버튼을 눌러보자.

제출 버튼을 클릭하면 form_get_receiver 서버 스크립트 페이지로 이동되며 쿼리스트링에 key=value 형식으로 데이터가 노출된다.

Chrome으로 개발자툴을 열어 네트워크에서 통신된 데이터를 열어보면 자세한 정보를 알 수 있다.

Request URL에 서버 스크립트 페이지와 쿼리스트링으로 키=값 형식으로 데이터가 등록되어있는 것을 볼 수 있다.

Request Method로 GET으로 통신했다는 것을 보여주고 있다.

맨 아래 Query String Parameters에서 데이터 정보를 좀 더 보기 좋게 정리해서 보여준다.

요약하자면 form태그의 method속성에 따라 GET메소드 방식인 경우 쿼리스트링에 데이터를 포함하여 서버 스크립트 파일로 통신을 시도한다.

 POST 메소드 처리

POST 메소드로 사용자로부터 요청을 받고 데이터를 처리하는 방법을 알아보자.

메인 애플리케이션(app.js)에 아래의 코드를 작성하자.

// form 예제(type: POST)
app.get('/form_post', (req, res) => {
    res.render('form_post');
});
app.post('/form_post_receiver', (req, res) => {
    var title = req.body.title;
    var description = req.body.description;
    res.send(title + ',' + description);
});

2~4번 줄 -

Express의 "get()"메소드를 이용해 form_post.pug라는 뷰 페이지로 이동시키는 기능을 작성한다.

pug템플릿 파일로 이동시키기 때문에 render()함수를 이용하여 페이지 이동을 처리한다.

5~9번 줄 - 

Express에서는 POST방식의 통신을 처리하기 위해서 "post()"라는 메소드를 지원하고 있다.

아직 Express 웹 프레임워크에 대해서 잘 모르므로 API를 보는 행위에 친숙해져야한다.

* POST()메소드 참고 http://expressjs.com/ko/4x/api.html#app.post.method

request객체의 body속성을 통해 POST메소드로 처리된 데이터에 접근한다.

* POST데이터 처리 방법 참고 http://expressjs.com/ko/4x/api.html#req.body

그런데 POST 데이터 처리 방법을 위해 request객체의 body속성에 대한 API문서를 보면 중요한 사실을 알 수가 있다.

"

request body에 submit된 데이터의 키-값 한 쌍이 들어있다.

기본적으로, request body는 정의되어있지 않으며, body-parser나 multer같은 body-parsing미들웨어를 사용할 때 채워진다.(정의된다.)

아래의 예제는 body-parsing 미들웨어로 req.body를 정의하는 방법을 보여준다.

"

라고 설명되어 있다.

좀 더 이해하기 쉽게 설명하자면 Express 웹 프레임워크는 기본적으로 HTTP POST 메소드 통신을 처리하기 위해 req.body라는 속성을 제공하지만 그 속성안에 기능을 포함하고 있지 않다는 것이다.

POST 메소드 통신을 처리하기 위해서 body-parser라는 미들웨어 외부 패키지를 애플리케이션에 주입시켜야 하며, 외부 패키지를 통해 req.body라는 속성에 기능들을 채워야 한다.

왜 Express 자체에서 req.body를 정의하지 않는 것인지, 왜 그렇게 유도하는건지 아직 잘 모르겠다...

어쨌든 일단 POST메소드 통신 시 데이터 처리를 위해서 body-parser라는 미들웨어 패키지가 필요한 것을 알게 되었으니 이를 설치해보자.

npm사이트를 통해 body-parser를 검색해보고 설치방법을 알아보자.

https://www.npmjs.com/package/body-parser

body-parser 패키지를 설명하는 내용을 조금만 내려보면 설치방법을 제공해주고 있다.

cmd를 통해 body-parser패키지를 설치하도록 하자.

설치를 완료했다면 npm사이트에서 예제를 보고 사용해보도록 하자.

가장 중요한 부분은 body-parser 패키지를 애플리케이션에 주입시키는 방법이다.

"require('body-parser')"를 통해 패키지를 애플리케이션에 불러오고 "use(bodyParser.urlencoded({ extended: false }))"를 통해 확장기능에 대한 설정과 함께 Exrpess의 req.body안에 기능들을 정의한다.

json처리는 현재 필요하지 않으니 정의하지 않는다.

npm body-parser페이지에서 api정보를 보면 urlencoded속성에 대한 설명이 나온다.

extended 옵션의 경우 false일 경우 (node.js의) querystring 내장 라이브러리를 사용하고 true일 경우 qs라는 외부 라이브러리를 사용한다고 한다.

일단 우리는 node.js 내장 라이브러리를 사용하여 처리하자.

app.js에 아래의 내용을 정의하자.

/** require()영역 */
// express 패키지 불러오기
var express = require('express');
// body-parser 패키지 불러오기
var bodyParser = require('body-parser');
 
/** use()영역 */
// express.static('path')정적인 파일이 위치할 디렉토리를 지정한다.
app.use(express.static('public'));
// express.req.body안에 body-parser기능들을 정의한다.
app.use(bodyParser.urlencoded({ extended: false }));

5번 줄 - 

body-parser를 애플리케이션에 불러온다.

* require를 수행하는 부분과 set() 혹은 use()를 수행하는 부분을 보기 좋게 나누어서 관리하도록 하자.

11번 줄 - 

"bodyParser.urlencoded({})"를 express.use()를 통해 req.body에 기능들을 정의한다.

여기까지 작업이 완료되었다면 이제 HTTP POST 통신을 하기위한 세팅까지 완료되었다.

이제 views폴더에 form_post.pug를 만들고 작성하자.

핵심은 form태그의 method속성이다. 

POST로 지정할 경우 form태그 안에 존재하는 input 데이터, textarea데이터 등등이 모두 Body에 form data로 전달된다는 것이다.

"localhost:9000/form_post"로 브라우저를 통해 접속하고 제목과 내용을 작성해서 제출을 클릭하자.

form_post_receiver로 서버 스크립트 페이지로 이동되고 난 후 URL을 확인해보면 쿼리스트링이 존재하지 않는 것을 알 수 있다.

그럼에도 화면에는 내가 전송한 제목과 내용이 출력되고 있다.

개발자툴을 열어서 네트워크란에서 통신된 내용을 열어보자.

핵심은 URL에 쿼리스트링으로 데이터가 포함되지 않고 통신이 됬다는 것이다.

그 요청 통신의 메소드가 POST로 수행되었다.

POST로 통신하게 될 경우 Request Header정보에 Content-Type이 추가되며 서버에서 어떠한 데이터인지를 판단할 수 있도록 application/x-www-form-urlencoded라는 데이터 타입 정보를 서버에게 알려준다.

그리고 데이터는 Form Data로 전달된다는 것을 알 수가 있다.

POST메소드 방식인 경우 BODY에 form data로 데이터를 포함하여 전달하며 이를 "Content-Type"이라는 헤더 필드 정보를 통해 서버 스크립트가 해석할 수 있도록 한다.

오랜만에 GET과 POST의 HTTP 통신을 다시한번 복습하며 정리해봤는데 글이 많이 어수선한 것 같다.

그만큼 기본이면서 복잡한 내용을 포함하고 있고 그것을 설명하기가 쉽지 않은 것 같다.