지난 포스팅에서는 RESTful API에서 자주 사용되는 메소드인 GET 을 구현 하였다. 본 포스팅에서는 node.js의 express 모듈을 활용하여 POST 메소드를 구현하도록 하겠다. 앞서 POST를 구현하기 전에 HTML과 express를 활용한 GET 메소드를 구현해보지 않는 사람들은 지난번 포스팅을 참고하기 바란다.
참고: https://neosla.tistory.com/20?category=804553
포스팅에 앞서 RESTful API 개념에 대해서 설명했던 포스팅에서 오늘 구현할 POST 방식 개념에 대해서 요약하자면 URL에 데이터를 포함시켜 클라이언트의 요청 값을 보여주는 방식인 GET (어떠한 정보를 조회하기 위해 사용) 과 다르게 POST 방식은 URL에 데이터를 노출하지 않고 전송하며 데이터를 body에 포함시켜 전송하는 방식이다. 일반적으로 데이터를 서버로 제출하여 추가 또는 수정을하기 위해 데이터를 전송하는 방식을 뜻한다.
GET 방식
POST 방식
위의 그림은 GET방식과 POST 방식의 과를 보여준다 동일하게 웹 상에서 클라이언트의 입력을 받아 웹에서 출력을 해주고 있다. 차이점으로 GET 방식의 경우 클라이언트가 입력한 정보에 대해서 URL에 입력 정보가 들어가지만, POST 방식의 경우 body에 클라이언트 데이터를 포함시켜 전송하기 때문에 html과 node 에서 미리 설정한 output 링크로 이동하여 내용만 출력되는것을 확인할 수 있다. 본 포스팅에서는 이러한 post 메소드 방식 구현에 대해서 진행한다.
1. 결과
: 프로그래밍을 하기전 본 포스팅에서 최종으로 만들 post 메소드의 과물을 첨부하여 결과 먼저 설명하도록 하겠다. 파일은 지난번 get 메소드 구현 시 파일과 겹치지 않게 하기 위해 post를 붙여 index_post.html과 express_post.js 두개를 설계 하였으며, 지난번과 동일하게 포트는 8081 설정 아마존 ec2를 사용해 크롬에서 접속할때의 결과를 보여준다.
처음 get의 메소드 경로는 express_node.js에서 input으로 설정하였으며 ip:port번호/input 으로 접속 시 html 파일을 불러와 미리 설정한 html 파일의 화면을 보여준다.
해당 페이지에서 post 결과를 보기 위해 first name과 last name을 입력하면 다음과 같은 post 결과값을 확인할 수 있다.
앞서 설명한거와 같이 데이터를 body에 포함하기 때문에 클라이언트 입력 정보가 URL에 노출되지 않고 웹상에서 JSON 형태로 출력되는걸 확인할 수 있다. express_post.js 에서 post 함수내에서 JSON 형식으로 파싱해주고 html와 같이 output 페이지에서 출력할 수 있게 설정 하였다.
1. html 프로그래밍
# vim index_post.html
////////////////////////////////////////
<html>
<body>
<form action = "http://admin.neostack.co.kr/output" method = "POST">
First Name: <input type = "text" name = "first_name"> <br>
Last Name: <input type = "text" name = "last_name">
<input type = "submit" value = "Submit">
</form>
</body>
</html>
////////////////////////////////////////
기존의 구조와 동일하며, method 부분을 post로 바꿔준것 말고는 차이점이 없다. 해당 html에 대한 구조와 html 설명을 보고 싶다면 이전 GET 메소드를 구현했던 포스팅을 참고 바란다.
2. express.js 프로그래밍
# vim express_post.js
////////////////////////////////////////
var express = require('express');
var app = express();
var bodyParser = require('body-parser');
Create application/x-www-form-urlencoded parser
var urlencodedParser = bodyParser.urlencoded({ extended: false })
app.use(express.static('public'));
app.get('/input', function (req, res) {
res.sendFile( __dirname + "/" + "index.htm" );
})
app.post('/output', urlencodedParser, function (req, res) {
Prepare output in JSON format
response = {
first_name:req.body.first_name,
last_name:req.body.last_name
};
console.log(response);
res.end(JSON.stringify(response));
})
var server = app.listen(8081, function () {
var host = server.address().address
var port = server.address().port
console.log("Example app listening at http://%s:%s", host, port)
})
////////////////////////////////////////
3. 코드 설명
var express = require('express');
var app = express();
var bodyParser = require('body-parser');
var urlencodedParser = bodyParser.urlencoded({ extended: false })
: 기존에 설치한한 express 모듈을 포함시키며 express를 사용하는 어플리케이션을 생성하는 것은 get 방식의 선언과 동일하다. post 방식에서의 경우 body-parser 모듈이 추가로 들어간것을 확인할 수 있다. post 요청 데이터를 추출하는 미들웨어로 request body를 json 형식으로 변환이 가능하게 해주는 모듈이다. # npm install body-parser 명령어로 간단히 설치가 가능하다. require로로 body-parse 모듈을 호출할 수 있다.
var urlencodedParser = bodyParser.urlencoded({ extended: false })
body-parser를 사용시 bodyParser.urlencoded() 를 등록하면 자동으로 req에 body 속성이 추가되어 저장돠며 인코딩도 default로 UTF-8로 해준다. app.post() 에서 보면 인자로 urlencoded를 활용해서 함수 안에서 req.body 를 활용하는 것을 볼 수 있다.
extended 옵션은 내부적으로 true를 하면 qs 모듈을 사용하고, false면 query-string 을 사용한다. true 혹은 false 중 하나의 옵션을 사용해야한다.
app.use(express.static('public'));
일반적으로 app.use() 의 경우 미들웨어 함수를 로드하기 위해 사용되며 미들웨어 함수를 지정하여 app.use()를 호출하는 방식이다. 한마디로 위의 코드는 express를 포함하고 있는 기본 패키지의 public이라는 디렉토리에 포함된 파일을 로드한다는 의미이다.
해당 디렉토리에 포함된 css 파일 및 자바스크립트 같은 정적 파일을 제공하는것이 가능하다.
app.get('/input', function (req, res) {
res.sendFile( __dirname + "/" + "index_post.htm" );
})
get 메소드 호출을 하는 부분으로 /input url로 접속할 경우 기존에 설정한 index_post.html 파일을 불러와 웹 페이지에 html 파일을 출력해주는 역할을 한다.
app.post('/output', urlencodedParser, function (req, res) {
Prepare output in JSON format
response = {
first_name:req.body.first_name,
last_name:req.body.last_name
};
console.log(response);
res.end(JSON.stringify(response));
})
post 메소드 호출하는 부분으로 클라이언트 입력이 되고 post가 호출할시 json 형식으로 웹페이지와 서버사이드에 출력을 하게끔 설정을 하였다. app.post() 에 urlencodedParser를 사용함으로써 req.body를 활용해 body를 파싱하고 파싱한 데이터를 res.end(JSON.stringify(response)) 를 통해서 json 형식의 출력이 가능하다.
var server = app.listen(8081, function () {
var host = server.address().address
var port = server.address().port
console.log("Example app listening at http://%s:%s", host, port)
})
단순하게 접속할 포트번호를 설정해주고 서버사이드에서 console 출력을 담당하는 부분이다.
본 포스팅에서는 post 메소드 설계와 결과를 확인하였다. RESTful API에서는 GET과 POST 에대한 이해가 필요하기 때문에 2번의 포스팅을 통해서 확인하였다.
다음 포스팅에서는 본 포스팅에서 배운 POST 방식을 활용하여 POSTman 으로 post 요청을 보내고 요청을 받은 서버의 프로그램에서 미리 설계해둔 DB에 데이터를 저장하는 방식에 대해서 포스팅 하도록 하겠다.
'IoT Server 설계 > Node.js' 카테고리의 다른 글
| node.js + db 연동 (POSTman 확인) (2) (0) | 2019.03.30 |
|---|---|
| node.js + db 연동 (POSTman 확인) (1) (0) | 2018.12.02 |
| express를 활용한 RESTful API GET 구현 (1) (0) | 2018.11.25 |
| RESTful API 개념 및 node.js express 모듈 개념 (0) | 2018.11.14 |
| node.js NPM 설치 및 비동기 프로그래밍 설계 (0) | 2018.11.05 |
