지난 포스팅에서는 RESTful API의 개념과 RESTful에서 자주 사용되는 메소드인 GET, POST, PUT, DELETE 에 대한 설명을 하였다. 본 포스팅에서는 지난번 설명한 RESTful 메소드인 GET을 node.js를 활용하여 프로그래밍 하도록 하겠다. 이번 포스팅에서 GET 메소드를 구현하기 위해서는 node의 웹 개발 프레임워크인 express 모듈을 사용할 것이며, 자세한 설명 및 express의 설치 방법은 지난번 포스팅을 참고하기 바란다.
참고: https://neosla.tistory.com/17?category=804553
포스팅에 앞서 지난번 설명한 GET에 대하여 설명하자면, GET 방식은 간단히 말해 인터넷을 페이지를 이용할때 인터넷 주소를 활용하는 방식으로 어떠한 정보를 가져와서 조회하기 위해 사용되는 방식이다. URL에 데이터를 포함시켜 요청하며 http://ip주소:포트번호/경로 방식으로 접속이 가능하다.
1. html 이란??
node에서 RESTful API GET을 구현하기 위해서는 .html 파일을 먼저 구현해줘야 한다. html은Hyper Text Markup Language의 약자로써 월드와이드웹 문서를 작성하는 언어이다. 일반 텍스트 문서와 같이 작성하면 되며 .html 확장자로 저장을 하면 웹브라우저가 인터넷 문서임을 인식하고 화면에 뿌려주게 된다. html 문서의 기본적인 골격은 다음과 같다.
<html>
<head> <title> 타이틀 </title> </head>
<body>
본문 내용
</body>
</html>
일반적으로 html 형식은 시작을 알리는 태그와 끝을 알리는 태그로 이루어지며, 그 안에 태그를 제어할 수 있는 속성들로 구성이 되어 있다.
<html> </html>
: 항상 문서의 맨 처음과 끝에 위치하며, 인터넷 문서의 시작과 끝을 알리는 역할을 함.
<head> </head>
: 문서를 설명하는 태그로 제목이나 키워드 같은 정보를 담으며, <title>, <meta>, <link>, <script>, <base> 등의 헤드 요소들을 담는 컨테이너 역할할을 한다. 본 프로그래밍에서는 title과 meta에 대해서 다룬다.
<title> </title>
: 문서의 제목을 나타내주는 태그로써 head 안에 포함되는 헤드 요소이다. 브라우저 탭 부분에 문서의 제목을 나타낸다.
<body> </body>
: 문서의 본문과 끝을 알려주는 태그이며 본 포스팅에서는 form 형식을 사용하여 꾸미도록 한다.
2. 결과
: 프로그래밍을 하기전 본 포스팅에서 최종으로 만들 get 메소드의 결과물을 첨부하여 결과먼저 설명하도록 하겠다. 파일은 index.html과 express.js 파일 두개를 설계하였으며, 포트는 8081포트 설정과 아마존 ec2를 사용하기 때문에 크롬에서 접속할때의 url을 표현하였다.
처음 get 메소드의 경로는 / 로 이용했으며 최초 접속 화면이다. 필자는 AWS EC2를 사용했기 때문에 크롬에서 admin.neostack.co.kr:8081/ 로 접속을 하였지만, 일반적인 서버에서의 접속의 경우 서버IP:8081/ 로 접속하면 된다.
express.js라는 파일에서 html 파일을 읽어들여 화면에 보여준 상황이다. html 파일에서 form형식과 title을 설정해서 보여줬으며 express.js에서 /user 로 접속을해야 보여주도록 get 메소드로 설정했다.
first Name과 last Name을 설정하고 submit 을 클릭하였을때의 화면이다. get 메소드를 활용하였기 때문에 url에 입력한 정보가 출력되며, express.js에서 json 포맷으로 출력하도록 설정하였다.
3. html 프로그래밍
#vim index.html
////////////////////////////////////
<html>
<head>
<meta charset = "utf-8">
<title> title </title>
</head>
<body>
<form action = "http://admin.neostack.co.kr:8081/process_get" method = "GET">
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>
////////////////////////////////////
위의 코드는 index.html 파일의 코드이다. 앞서 설명한 html의 기본 골격으로 구성되어 있다. 기본 골격인 <html> 안에 <head>, <body> 로 구성되어 있으며 <head> 안에는 <meta>, <title> 속성이 들어 있으며, <body> 안에는 <form>, <input> 속성이 들어 있다.
2.1 <head> </head>
<head>
<meta charset = "utf-8">
<title> title </title>
</head>
: head 의 요소로 meta와 title이 있으며, <meta charset = "utf-8"> 는 html5 부터 나온 태그로 UTF-8로 html 문서를 인코딩을 하겠다는 의미이다. <head> 태그 안에 삽입하여 페이지 언어셋이 utf-8 임을 브라우저에 알린다.
<title> title </title> 의 경우에는 탭 부분에 문서의 제목을 알려주는 역할을 한다. 현재의 경우에는 탭 부분에 title이 출력된다.
2.2 <body> </body>
<body>
<form action = "http://admin.neostack.co.kr:8081/process_get" method = "GET">
first Name: <input type = "text" name = "first_name"> <br>
last Name: <input type = "text" name = "last_name">
<input type = "submit" value = "Submit">
</form>
</body>
: body의 요소로 form의 경우 유저의 입력된 데이터를 한번에 서버로 전송하여 처리하기 위해 틀을 만들때 주로 사용된다. form을 구성하는데에 다양한 속성이 존재하며 본 코드에서 사용한 속성인 action은 폼을 전송할 서버쪽 스크립트 파일을 지정하는 역할을 담당하며, method는 폼을 전송할 http 메소드를 정하는 역할로 GET, POST 로 설정이 가능하다.
본 코드의 <form action = "http://admin.neostack.co.kr:8081/process_get" method = "GET"> 의 경우 /process_get 서버쪽 스크립트 파일을 지정하며 http 메소드는 GET 방식으로 정의 한다.
4. express.js 프로그래밍
# vim express.js
////////////////////////////////////
var express = require('express');
var app = express();
app.use(express.static('public'));
app.get('/user', function (req, res) {
res.sendFile( __dirname + "/" + "index.html" );
})
app.get('/process_get', function (req, res) {
// Prepare output in JSON format
response = {
first_name:req.query.first_name,
last_name:req.query.last_name
};
console.log(response);
res.end(JSON.stringify(response));
})
app.get('/', function(req,res){
console.log("Get request for the homepage");
res.send('NEOSTACK Homepage');
})
var server = app.listen(8081, function(){
var host = server.address().address
var port = server.address().port
console.log("Running http://%s:%s", host, port)
})
////////////////////////////////////
4.1 코드 설명
var express = require('express');
var app = express();
app.use(express.static('public'));
: 기존에 설치한 express 모듈을 활용하기 위해서 express 모듈을 포함시키며 express를 사용하는 어플리케이션을 생성한다. app.use(express.static('public')); 의 경우 이미지, css 및 자바스크립트 파일과 같은 정적 파일을 제공하기 위해 사용되며 public이라는 디렉토리에 포함된 이미지, css 파일을 로드 할 수 있게 해줌.
app.get('/user', function (req, res) {
res.sendFile( __dirname + "/" + "index.html" );
})
: app.get 함수의 첫번째 인자는 라우팅경로로 '/user' 의 경우 res.sendFile로 불러온 html 파일을 보여주기 위한 url 주소를 뜻하며 라우팅 경로를 /user로 선언하였기 때문에 내ip주소:8081/user 로 접속이 가능하게 설정이 되며, 두번째 인자는 request handler로 서버가 특정 요청을 받을 때마다 실행되는 함수이다.
app.get('/', function(req,res){
console.log("Get request for the homepage");
res.send('NEOSTACK Homepage');
})
: 앞전의 res.sendFile의 경우 기존에 설계한 index.html 파일 다운로드로 응답하는 반면 res.send('NEOSTACK Homepage'); 의 res.send의 경우 라우팅경로 / 로 접속할 경우 웹브라우저에 NEOSTACK Homepage인 문자열로 응답하며, console.log는 서버쪽에서의 수신 메시지를 정의한다.
app.get('/process_get', function (req, res) {
// Prepare output in JSON format
response = {
first_name:req.query.first_name,
last_name:req.query.last_name
};
console.log(response);
res.end(JSON.stringify(response));
})
: 라우팅 경로는 /process_get 으로 기존 설계한 html 파일 url에서 입력 데이터의 출력을 서버단에서 처리하여 /process_get 에서 json 형식으로 출력해주는 역할을 담당한다.
var server = app.listen(8081, function(){
var host = server.address().address
var port = server.address().port
console.log("Running http://%s:%s", host, port)
})
: 사용할 포트번호의 설정을 해주며, 현재 서버의 주소와 사용 포트를 서버단에서 출력해주는 역할을 담당한다.
본 포팅에서는 RESTful API의 GET 구현에 대하여 포스팅 하였다. node.js의 모듈인 express를 활용하였으며 app.get 을 이용해 설계 하였다. 다음 포스팅에서는 post 방식에 대한 설명과 post 구현을 진행하도록 하겠다.
'IoT Server 설계 > Node.js' 카테고리의 다른 글
| node.js + db 연동 (POSTman 확인) (1) (0) | 2018.12.02 |
|---|---|
| express를 활용한 RESTful API POST 구현 (2) (0) | 2018.11.25 |
| RESTful API 개념 및 node.js express 모듈 개념 (0) | 2018.11.14 |
| node.js NPM 설치 및 비동기 프로그래밍 설계 (0) | 2018.11.05 |
| node.js 이론 및 설치 (0) | 2018.11.04 |
