-
정보의 전달(GET, POST)서버/Node.js 2017. 11. 27. 13:29
생활코딩의 내용을 복습하고 책에 있는 내용을 복습하도록 하자.
여기서 작성되는 HTML은 모두 pug(구 jade)의 문법을 따르므로 검색을 통해 문장을 보는 눈을 익혀두자.
먼저 생활코딩에서 배운 내용에 대해서 소개하자면, 생활코딩에서는 간단하게 폼(form)과 그것이 어떻게 서버로 전송되는 지를 구현해 보았다.
1. GET 방식
GET방식은 사용자가 서버로 URL을 통해 정보의 값을 전달하고 서버는 URL을 통해서 그 값을 받게 되는 구조이다. 여기서 먼저 GET방식을 익혀보자.<HTML>
html
head
meta(charset='utf-8')
body
form(action='/form_receiver') // form 태그로 묶으면 입력된 정보들이 action의 주소로 전송됨 ( ) 안에 method = 'get'이 생략됨
p
input(type='text' name='title') // name이라는 속성을 제공하여 input(type='text')와 textarea를 구분한다.
p
textarea(name='description')
p
input(type='submit') // submit을 통해 전달버튼이 형성됨
작성한 html을 실행시키면 다음 그림 1-1과 같이 화면에 출력되게 된다. 그림 1-1을 보면 input(type='submit')이라는 태그가 "제출"이라는 이름을 가진 버튼을 만드는 걸 확인할 수 있다. 여기서 내용을 입력하고 제출을 누르면 아래 그림 1-2와 같이 쿼리스트링이 작성되어 URL에 출력되는 것을 확인할 수 있다. 각각의 내용은 title과 description에 저장된다.
그림 1-1 HTML_form
그림 1-2 form으로 전달한 URL
그렇다면 이렇게 HTML을 통해서 전달한 내용을 서버에서 처리하도록 만들어 보자.
<app.js>
// 위의 HTML의 form의 정보를 받는 내용을 작성해보자.
app.get('/form_receiver', function(req, res){ // get방식으로 전달했기 때문에 .get 문을 작성해야한다.
var title = req.query.title
var description = req.query.description
res.send(title + ',' + description)
});
2. POST 방식
POST 방식은 사용자가 정보를 전달할 때 URL을 통해서 전달하는 게 아니기 때문에 URL의 변화가 없다. 또한 POST 방식으로 전달한 정보는 기본적으로 Undefined 상태이기 때문에 이를 활용하기 위해선 body-parser라는 모듈을 사용해야 한다. 다음의 예제를 살펴보자.
GET 방식에서 작성한 HTML을 그대로 사용하되, method = 'post'를 적어주자.
<HTML>
html
head
meta(charset='utf-8')
body
form(action='/form_receiver' method='post')
p
input(type='text' name='title')
p
textarea(name='description')
p
input(type='submit')
<app.js>
서버에서 HTML에서 전송한 데이터를 처리하기 위한 app.js를 작성해보자. 서버에서는 body-parser라는 모듈을 활용해야 POST 방식을 처리할 수 있기 때문에 이를 우선 설치해 보자.$ npm install body-parser설치가 완료되었다면 app.js 안에서 이를 사용해보자. 기본적인 부분은 GET 방식에서 작성한 app.js와 비슷하다. 변하는 부분에 주목해서 살펴보자.var bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({ extended: false })); // 미들웨어로 사용하겠다는 의미인데, 이 개념은 다른 포스팅 글을 확인하자.
// 위의 HTML의 form의 정보를 받는 내용을 작성해보자.
app.post('/form_receiver', function(req, res){ // .post로 바꿔주자
var title = req.body.title // body로 바꿔주자
var description = req.body.description
res.send(title + ',' + description)
});
이렇게 Node.js에서 HTML 내에서 어떻게 정보를 전달할 수 있는 부분을 구현할 수 있고, 이를 서버에서는 어떻게 처리하는 지를 알아보았다. 이를 활용하여 좀 더 구체적인 웹 어플리케이션을 만들어보도록 하자.
'서버 > Node.js' 카테고리의 다른 글
표준입출력 (0) 2020.02.06 미들웨어란? (4) 2017.12.01 MongoDB와 Node.js (0) 2017.11.25 MVC 흐름 (0) 2017.11.25 [Pug(구 Jade)] Error - Cannot read property 'length' of undefined (0) 2017.11.25
