Express - Post

[ Get과 Post의 차이점 - Get ]

Get과 Post는 모두 서버에 요청을 보내는 메서드입니다. 서버에 요청을 보낼 때에는 클라이언트(사용자)가 파라미터와 함께 서버에 요청할 수 있는 상황이 있죠. (예를들어 로그인을 할 때, 아이디, 비밀번호를 로그인 요청과 함께 보내게 됩니다.) 이 때, 클라이언트(사용자)가 제공하는 파라미터를 URL에 포함시키느냐 시키지 않느냐가 Get과 Post의 차이입니다.

Get을 이용해 사용자가 보내는 정보를 서버에 저장해 보겠습니다. 먼저 보낼 수 있는 양식을 만들어야 하기때문에 jade 파일을 만들겠습니다. 파일 이름은 form.jade로 생성했습니다.

doctype html

html

head

meta(charset='utf-8')

body

form(action='/form_receiver')

p

input(type='text' name='title')

p

textarea(name='contents')

p

input(type='submit')

(meta(charset='utf-8') = utf-8 방식(얼마나 다양한 국가의 언어를 수용할 수 있는지)으로 인코딩 한다는 뜻. (가장 최신 방식) 

form(action='/from_receiver') = 브라우저에서 from태그 안에 있는 내용을 이용해 URL을 생성하고 보내는 태그 (action은 목적지)

input(type='text') = 한줄입력칸 생성

textarea =  여러줄을 입력할 수 있는 칸 생성

input(type = "submit") =  입력값을 보내는 버튼과 함께 전송하는 태그

submit을 누르면 action으로 가르키는 목적지와 각 name으로 된 query string을 담은 페이지(URL)로 이동한다.)

이제 html이 페이지에 보일 수 있도록 라우팅을 해줍니다.

const express = require('express');

const app = express();

//템플릿 엔진 설정('view engin' = 템플릿 사용 명령, 'jade' = jade를 템플릿 엔진으로 사용)

app.set('view engine', 'jade');

//jade파일을 찾을 폴더

app.set('views', './views')

//페이지 소스보기에서 html태그가 보기좋게 나옴

app.locals.pretty = true;

//get

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

res.render('form');

})

//port listen

app.listen(3000, function(){

console.log('Connected 3000 port');

})

localhost:3000/form 페이지에 작성 가능한 칸 두개와 Submit버튼이 생겼습니다. 그리고 submit을 누르면 Input값과 함께 URL을 만들어(query string) 해당 URL로 이동합니다. 예를들어 두개의 칸에 3과 3을 입력했습니다.

http://localhost:3000/form_receiver?title=3&contents=3

이런식으로 말이죠. Get 방식은 사용자가 보낸 정보는 각각 다른 URL(path는 같지만 query string은 다른..)에 존재하는거죠. 지금은 from_receiver라는 path 중에서 다른 내용을 보여주기 위해 title=3&contents=3이 추가된 URL을 형성하게 되는 겁니다. 이해하기가 힘들다면 그냥 form_receiver라는 "폴더"에 다른 이름을 가진 "파일"들이 생기고 그 파일들은 다른 "내용"을 가지고 있다고 생각하세요. 그리고 우리는 라우팅을 통해서 그 파일의 내용을 웹페이지에 띄우고 있는 겁니다.

예를들어 3과 6를 Input값으로 넣었다면 form_receiver의 path에 title=3&contents=6의 URL이 생길겁니다. 이 작업들은 같은 path에서 다른 요청을 보여주기 위함인데 위 예시에는 내용이 없습니다. title과 contents에 어떤 내용을 담아 request하느냐에 따라 다른 내용이 나오게 하기 위해 title과 contents의 내용을 출력해보겠습니다.

const express = require('express');

const app = express();

//템플릿 엔진 설정('view engin' = 템플릿 사용 명령, 'jade' = jade를 템플릿 엔진으로 사용)

app.set('view engine', 'jade');

//jade파일을 찾을 폴더

app.set('views', './views')

//페이지 소스보기에서 html태그가 보기좋게 나옴

app.locals.pretty = true;

//Post

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

res.render('form');

})

//form receiver

app.get('/form_receiver',function(req,res){

const title = req.query.title;

const contents = req.query.contents;

res.send(title+','+contents)

})

//port listen

app.listen(3000, function(){

console.log('Connected 3000 port');

})

이렇게 하면 query string을 가져옵니다. 즉, /form 에서 기입했던 값들이 페이지에 출력됩니다. 

[ Get과 Post의 차이점 - Post ]

Get으로 제공받고자 하는 정보를 보려면 모든 정보를 URL에 담아야 합니다.(query string으로 표현되죠.) 그렇게 했을 때, 모든 사람이 해당 URL을 통해 보는 정보가 동일하겠죠. (정보에 따라 고유의 URL이 생깁니다.)

Post는 Get처럼 요청한 정보를 보여주지만, URL에 정보가 담기지 않습니다. 

즉, Get은 템플릿 파일(여기에선 .jade)에 의해 생긴 정보를 URL에 포함시키고,  Post는 템플릿 파일에 parser를 통해 직접 접근해서 handling할 수 있는 것입니다.

사용자 정보와 같은 "보안성"이 요구되는 요청, "정보의 양"이 많은 요청은 URL을 생성하면 안되고 템플릿 파일에 직접 접근해야하는 것이죠.

(일반적으로 우리가 페이지에 접근하는 방식인 주소창에 URL을 적는 행위는 모두 Get으로 처리합니다. 그래서 Get은 고유의 URL을 만듭니다. 그리고 Post는 템플릿 파일에 있는 form의 action을 통해서만 이동할 수 있습니다. 대충 느낌이 오실거라 생각합니다.)

자, Post 방식을 사용해 보겠습니다.

doctype html

html

head

meta(charset='utf-8')

body

form(action='/form_receiver')

p

input(type='text' name='title')

p

textarea(name='contents')

p

input(type='submit')

위에서 사용한 jade파일을 다시보면 form(action='/form_receiver')로 사용했습니다. 여기서 method를 따로 쓰지 않았는데요. 쓰지 않으면 get방식을 사용하겠다는 의미입니다.

doctype html

html

head

meta(charset='utf-8')

body

form(action='/form_receiver' method='post')

p

input(type='text' name='title')

p

textarea(name='contents')

p

input(type='submit')

이렇게 특정해주면 "Post"방식을 사용하겠다는 의미입니다. 메서드를 post로 바꾼 뒤 /form에서 다시 submit을 해보면 /from_receiver에 Cannot POST라고 뜹니다. 그 이유는 라우터가 없기 때문입니다. 우리는 위에서 /form_receiver 페이지에 대해

//form receiver

app.get('/form_receiver',function(req,res){

const title = req.query.title;

const contents = req.query.contents;

res.send(title+','+contents)

})

와 같은 라우터를 썼습니다. "app.get()"을 사용하고 있기 때문에 라우터를 찾지 못한 것이죠. 그렇다면 jade파일에서 form태그의 method 부분은 post 메서드 중에서 '/form_receiver'에 걸려있는 라우터를 이용하겠다는 뜻이 되겠죠. post메서드를 사용한 '/form_receiver'의 라우터를 만들어 주면 이제 잘 보입니다. 

const express = require('express');

const app = express();

//템플릿 엔진 설정('view engin' = 템플릿 사용 명령, 'jade' = jade를 템플릿 엔진으로 사용)

app.set('view engine', 'jade');

//jade파일을 찾을 폴더

app.set('views', './views')

//페이지 소스보기에서 html태그가 보기좋게 나옴

app.locals.pretty = true;

//Post

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

res.render('form');

})

//from receiver(using post)

app.post('/form_receiver',function(req,res){

const title = req.body.title;

const contents = req.body.contents;

res.send();

})

//port listen

app.listen(3000, function(){

console.log('Connected 3000 port');

})

post메서드를 사용해서 요청한 값을 가져오려면 query가 아닌 body를 써야합니다.

하지만 이렇게 바꿔서 실행해보면 title이 정의되지 않았다고 나옵니다. 분명 title을 정의 해줬는데..? 라는 생각을 하실겁니다. 문제는 body라는 메서드에 있습니다. 

Post 방식으로 요청된 작업을 수행하기 위해서는 미들웨어라는 것이 필요합니다. 미들웨어는 요청과 응답의 사이에서 필요한 동작을 처리해주는 역할을 합니다. 미들웨어에 대해서는 다음에 더 자세히 다뤄보도록 하고 일단은 이렇게만 이해하고 넘어가죠. form에서 전송되는 Post값을 사용할 수 있게 하는 미들웨어는 body-parser입니다. body-parser를 사용하기 위해서 설치해줍니다.

$ npm install body-parser

이제 모든 request는 body-parser라는 미들웨어를 지나서 라우터가 작동합니다. 그리고 지금은 body라는 메서드를 사용할 수 있게 됐죠.

const express = require('express');

const app = express();

//템플릿 엔진 설정('view engin' = 템플릿 사용 명령, 'jade' = jade를 템플릿 엔진으로 사용)

app.set('view engine', 'jade');

//jade파일을 찾을 폴더

app.set('views', './views')

//페이지 소스보기에서 html태그가 보기좋게 나옴

app.locals.pretty = true;

//Post

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

res.render('form');

})

//from receiver(using post)

const bodyParser = require('body-parser')

app.use(bodyParser.urlencoded({extended : false}))

app.post('/form_receiver',function(req,res){

const title = req.body.title;

const contents = req.body.contents;

res.send('title :' + title + ' ' +'contents :' + contents);

})

//port listen

app.listen(3000, function(){

console.log('Connected 3000 port');

})

body-parser라는 미들웨어를 불러와서(require()) 사용하게 끔(app.use()) 만들었습니다. 이제 post로 요청을 보낼 때, body-parser 미들웨어를 거쳐간 라우터는 body 메서드를 사용할 수 있고, body 메서드를 통해 form_receiver 페이지의 body부분(jade로 작성한 body)의 title 내용을 가져올 수 있습니다.