node.js express 연습하기
Node (또는 더 공식적으로는 Node.js) 는 오픈소스, 크로스 플랫폼이며, 개발자가 모든 종류의 서버 사이드
도구들과 어플리케이션을 JavaScript로 만들수 있도록 해주는 런타임 환경이다.
NodeJS의 웹프레임워크를 사용하면 간편하게 웹서버를 구축 할 수 있으며. 웹프레임워크 종류는 대표적으로
Express, Koa, Hapi 등이 있다.
이 포스트에선 Express를 사용해볼것이다.
1. 익스프레스를 사용한 가장 단순한 샘플
// Express 기본 모듈 불러오기
var express = require('express')
, http = require('http');
// 익스프레스 객체 생성
var app = express();
// 99번 포트를 app 객체에 속성으로 설정
app.set('port', process.env.PORT || 33);
// Express 서버 시작
http.createServer(app).listen(app.get('port'), function(){
console.log('익스프레스 서버를 시작했습니다 : ' + app.get('port'));
});2~3줄
먼저 Express 라이브러리를 로드한다. 이는 require('express')으로 수행할 수 있으며,
로드된 변수 express를 사용하여 Express 기능을 이용할 수 있다.
express 모듈은 웹 서버를 위해 만들어진 것으로 http 모듈 위에서 동작한다.
따라서 express 모듈을 사용할 때는 항상 http 모듈도 함께 불러들여야 한다.
6줄
최초에 실행하는 것은 애플리케이션의 객체를 준비이다. 이는 express 함수를 호출한다. 이 함수는 Express
애플리케이션인 'Application' 객체를 생성하고 반환한다.
9줄
env 객체에 PORT속성이 있으면 사용하고 없으면 99번 포트를 사용하라는 코드이다.
12~14줄
http 모듈로 웹 서버를 만들 때 createerver()메소드로 웹 서버 객체를 만들고, listen() 메소드를 호출하여
클라이언트의 요청을 대기하도록 설정한다.
creatServer() 메소드에 전달되는 app 객체는 express() 메소드 호출로 만들어지는 익스프레스 서버 객체이다.
그런데 웹 브라우저에서 [http://localhost:33] 주소로 접속해보면 아무런 응답이 없다.
이것은 아직 어떤 응답을 할 것인지 지정하지 않았기 때문이다.
2. 익스프레스에 미들웨어 만들어 설정하기
// Express 기본 모듈 불러오기
var express = require('express')
, http = require('http');
// 익스프레스 객체 생성
var app = express();
// 직접 미들웨어 객체를 만들어 설정
app.use(function(req, res, next) { //use ->미들웨어라고 한다. 나눠서 처리하는 기법이다. 리퀘스트 처리
console.log('첫번째 미들웨어에서 요청을 처리함.');
res.writeHead('200', {'Content-Type':'text/html;charset=utf8'});
res.end('<h1>Express 서버에서 응답한 결과입니다.</h1>');
});
// Express 서버 시작
http.createServer(app).listen(34, function(){
console.log('Express 서버가 34번 포트에서 시작됨.');
});
use() 메소드를 사용하여 미들웨어를 설정하는 방법을 알아보자.
미들웨어란?
미들웨어나 라우터는 하나의 독립된 기능을 가진 함수라고 볼수있다.
익스프레스에서는 웹 요청과 응답에 관한 정보를 사용해 필요한 처리를 진행할 수 있도록 독립된 함수로 분리한다.
이렇게 분리한 각각의 것들을 미들웨어라고 부른다.
익스프레스 서버를 간단한 형태로 만들었으며 use() 메소드를 호출하여 미들웨어를 하나 등록하였다.
메소드로 등록한 함수들은 등록 순서에 따라 클라이언트 요청을 처리한다.
하나의 미들웨어만 등록했으므로 하나만 호출되며, 이 미들웨어에서 클라이언트로 응답을 보낸다.
3. 두 개의 미들웨어를 만들어 첫번째에서 두번째로 넘기기
// Express 기본 모듈 불러오기
var express = require('express')
, http = require('http');
// 익스프레스 객체 생성
var app = express();
// 첫번째 미들웨어에서 다음 미들웨어로 넘김
app.use(function(req, res, next) { //들어온 값 = req
console.log('첫번째 미들웨어에서 요청을 처리함.');
req.user = 'mike'; //직접 지정
next(); //다음 use로 넘어감
});
// 두번째 미들웨어에서 응답 전송
app.use('/', function(req, res, next) { //use순서 중요.
console.log('두번째 미들웨어에서 요청을 처리함.');
res.writeHead('200', {'Content-Type':'text/html;charset=utf8'}); //보내주기
res.end('<h1>Express 서버에서 ' + req.user + '가 응답한 결과입니다.</h1>'); //end도 보내주기
});
// Express 서버 시작
http.createServer(app).listen(35, function(){
console.log('Express 서버가 35번 포트에서 시작됨.');
});
여러 개의 미들웨어를 등록하여 여러가지 기능을 수행하도록 만들어보자.
9~15줄
첫 번째 미들웨어에서는 req객체에 user 속성을 추가하고 그 값으로 문자열을 하나 넣었다.
이 정보를 사용자 정보라고 하면, 첫 번째 미들웨어에서 사용자 정보를 설정한 것이 된다.
19~25줄
클라이언트에 응답을 보낼 때 사용자 정보를 같이 알려주는 기능을 담당한다.
두 번째 미들웨어에서 req객체에 설정된 user 속성을 확인하여 사용자 정보를 사용할 수 있다.
이때, 첫 번째 미들웨어에서는 반드시 next() 메소드를 호출하여 두 번째 미들웨어로 순서를 넘겨주어야 한다.
4. 미들웨어에서 응답할 때 send 메소드 사용하기
// Express 기본 모듈 불러오기
var express = require('express')
, http = require('http');
// 익스프레스 객체 생성
var app = express();
// 미들웨어에서 응답 전송할 때 send 메소드 사용하여 JSON 데이터 전송
app.use(function(req, res, next) {
console.log('첫번째 미들웨어에서 요청을 처리함.');
res.send({name:'소녀시대', age:20}); //json형태로 처리
});
// Express 서버 시작
http.createServer(app).listen(4, function(){
console.log('Express 서버가 3000번 포트에서 시작됨.');
});
send() 메소드는 응답 데이터를 좀 더 간단하게 전송하기 위해 익스프레스에서 추가된 것이다.
메소드로 클라이언트에 JSON 데이터를 전송하는 기능을 확인해보자.
사실 JSON 객체를 그대로 받아 웹페이지로 보여주는 경우는 거의 없다.
모바일 단말기에서 사용하는 웹 앱이나 일반 앱에서는 화면을 보여 주기 위한 필요한 웹 문서들을 단말 쪽에 두고
Ajax 또는 웹 소켓으로 데이터만 수신하여 화면에 보여 줄 때가 많다. 따라서 JSON 객체를 전송받는 기능이 필요하다.
5. 미들웨어에서 응답할 때 redirect 메소드 사용하기
// Express 기본 모듈 불러오기
var express = require('express')
, http = require('http');
// 익스프레스 객체 생성
var app = express();
// 미들웨어에서 redirect 메소드 사용
app.use(function(req, res, next) {
console.log('첫번째 미들웨어에서 요청을 처리함.');
res.redirect('http://google.co.kr'); //다음 주소 페이지로 연결해준다.
});
// Express 서버 시작
http.createServer(app).listen(38, function(){
console.log('Express 서버가 38번 포트에서 시작됨.');
});
redirect() 메소드를 사용하면 다른 페이지로 이동할 수 있다.
예를 들어, 로그인을 하지 않은 상태에서 메뉴 페이지로 접속하려고 할 때 redirect() 메소드로 페이지를 옮겨 갈 수
있다. 위의 코드는 redirect() 를 호출하면서 구글 사이트의 주소를 파라미터로 전달하도록 만들었다.
6. 미들웨어에서 요청 객체에 들어있는 헤더와 파라미터 확인하기
/**
* 웹브라우저에서 아래 URL로 요청해야 함
* http://localhost:3000?name=mike -> ?뒤에 붙여주는 것 = 요청값(리퀘스트 파라미터)
*/
// Express 기본 모듈 불러오기
var express = require('express')
, http = require('http');
// 익스프레스 객체 생성
var app = express();
// 미들웨어에서 헤더와 파라미터 확인
// 아래 코드에서 파라미터는 GET 요청에 대해서만 처리 가능함 (POST는 req.body 객체 참조)
app.use(function(req, res, next) {
console.log('첫번째 미들웨어에서 요청을 처리함.');
var userAgent = req.header('User-Agent');
var paramName = req.query.name;
res.writeHead('200', {'Content-Type':'text/html;charset=utf8'});
res.write('<h1>Express 서버에서 응답한 결과입니다.</h1>');
res.write('<div><p>User-Agent : ' + userAgent + '</p></div>');
res.write('<div><p>Param name : ' + paramName + '</p></div>');
res.end();
});
// Express 서버 시작
http.createServer(app).listen(39, function(){
console.log('Express 서버가 39번 포트에서 시작됨.');
});
클라이언트에서는 요청 파라미터를 함께 보낼 수 있다. 이때 GET 방식으로 요청했다면 요청 파라미터들은 요청 객체
의 query 객체 안에 들어간다. 예를 들어, http://localhost:3000/?name=mike와 같은 주소로 접속한 경우, 요청 파
라미터인 name의 값은 var paramName = req.query.name; 코드로 확인할 수 있다.
요청 파라미터는 영어로 query string 라고 한다. 즉, 클라이언트에서 서버로 요청할 때 문자열로 데이터를 전달하는
것이다. 클라이언트가 요청할 때 전달되는 헤더 값들을 header() 메소드로 확인할 수 있다.
클라이언트가 주소 문자열에 포함시켜 전달하는 요청 파라미터를 웹 서버에서 받아 확인할 때는 보통 여러 줄의 코드가
필요하다. 하지만 익스프레스를 사용하면 한 줄의 코드만으로 요청 파라미터의 값은 확인할 수 있다.
7. POST 방식으로 전달된 파라미터 확인하기
/**
* POST 방식으로 전달된 파라미터 확인하기
*
* (1) 웹 브라우저에서 http://localhost:3000/login.html 페이지 열고 요청
* (2) 크롬 브라우저의 Postman 앱이나 기타 POST 요청 도구를 사용하여 POST 방식으로 요청
* GET 방식으로 요청 시에는 웹브라우저에서 아래 URL로 요청해야 함
* http://localhost:3000?id=test1&password=123456
*
*/
// Express 기본 모듈 불러오기
var express = require('express')
, http = require('http')
, path = require('path');
// Express의 미들웨어 불러오기
var bodyParser = require('body-parser')
, static = require('serve-static');
// 익스프레스 객체 생성
var app = express();
// 기본 속성 설정
app.set('port', process.env.PORT || 29);
// body-parser를 이용해 application/x-www-form-urlencoded 파싱
app.use(bodyParser.urlencoded({ extended: false }))
// body-parser를 이용해 application/json 파싱
app.use(bodyParser.json())
app.use(static(path.join(__dirname, 'public'))); // 기본폴더를 public으로 하겠다, url에서 public생략가능하다.
// 미들웨어에서 파라미터 확인
app.use(function(req, res, next) {
console.log('첫번째 미들웨어에서 요청을 처리함.');
var paramId = req.body.id || req.query.id; //
var paramPassword = req.body.password || req.query.password;
res.writeHead('200', {'Content-Type':'text/html;charset=utf8'});
res.write('<h1>Express 서버에서 응답한 결과입니다.</h1>');
res.write('<div><p>Param id : ' + paramId + '</p></div>');
res.write('<div><p>Param password : ' + paramPassword + '</p></div>');
res.end();
});
// Express 서버 시작
http.createServer(app).listen(app.get('port'), function(){
console.log('Express server listening on port ' + app.get('port'));
});
static 미들웨어
static 미들웨어는 특정 폴더의 파일들을 특정 패스로 접근할 수 있도록 만들어 준다.
예를 들어, [public] 폴더에 있는 모든 파일을 웹 서버의 루트 패스로 접근할 수 있도록 만들고 싶다면 다음 코드를
추가하면 된다.
예를 들어 expressExample/public/index.html 이렇게 있다면 웹 브라우저에서 다음과 같은 주소로 바로 접근할 수
있다.
http://localhost:3000/index.html
body-parser 미들웨어
POST로 요청했을 때 요청 파라미터를 확인할 수 있도록 만들어 둔 것이다.
body-parser 미들웨어는 클라이언트가 POST 방식으로 요청할 때 본문 영역에 들어 있는 요청 파라미터들을 파싱하
여 요청 객체의 body속성에 넣어준다.
프로젝트 폴더 안에 [public] 폴더를 새로 만들고 그 안에 새로운 팡리 login.html 파일을 만들자.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>로그인 테스트</title>
</head>
<body>
<h1>로그인</h1>
<br>
<form method="post" >
<table>
<tr>
<td><label>아이디</label></td>
<td><input type="text" name="id" /></td>
</tr>
<tr>
<td><label>비밀번호</label></td>
<td><input type="password" name="password" /></td>
</tr>
</table>
<input type="submit" value="전송" name=""/>
</form>
</body>
</html>bodyParse.json() 메소드를 호출하면서 미들웨어를 설정하면 application/json 형식으로 전달된 요청 파라미터를 파
싱할 수 있다. 다음 코드를 사용해 요청 파라미터를 참조할 수 있다.
var paramld = req.body.id;
그런데 클라이언트에서 요청할 때 GET 방식으로 요청할지, 아니면 POST 방식으로 요청할지 모르는 경우에는 어떻게
해야할까? 두가지 경우를 모두 고려하기 위해서 다음처럼 두 가지 요청 파라미터를 모두 검사한다.
var paramld = req.body.id || req.query.id;
이제 웹 서버가 클라이언트 요청을 기다리도록 파일을 실행한다.
그런 다음 웹 브라우저에 http://localhost:40/login.html 을 입력해서 접속하면 다음 화면이 표시된다.
서버 코드에서 use() 메소드로 설정한 함수는 login.html 문서에 접근할 떄는 호출되지 않는다. 따라서 처음에는
login.html 문서가 웹 브라우저에 보이며, 버튼을 클릭하여 POST로 요청했을 때는 use()메소드로 설정한 함수가
호출되면서 필요한 작업을 수행한다.
아이디와 비밀번호를 입력한 후 [전송]버튼을 누르면 다음 화면이 표시된다.
8. Router 객체를 이용해 라우팅 함수 등록하기
/**
* (1) 웹 브라우저에서 http://localhost:3000/public/login2.html 페이지 열고 요청
* (2) 크롬 브라우저의 Postman 앱이나 기타 POST 요청 도구를 사용하여 POST 방식으로 요청
*
*/
// Express 기본 모듈 불러오기
var express = require('express')
, http = require('http')
, path = require('path');
// Express의 미들웨어 불러오기
var bodyParser = require('body-parser')
, static = require('serve-static');
// 익스프레스 객체 생성
var app = express();
// 기본 속성 설정
app.set('port', process.env.PORT || 3000);
// body-parser를 이용해 application/x-www-form-urlencoded 파싱
app.use(bodyParser.urlencoded({ extended: false }))
// body-parser를 이용해 application/json 파싱
app.use(bodyParser.json())
app.use('/public1', static(path.join(__dirname, 'public'))); //public1으로 주소를 써도 public으로 접속됨
// 라우터 객체 참조
var router = express.Router();
// 라우팅 함수 등록
router.route('/process/login').post(function(req, res) {
console.log('/process/login 처리함.');
var paramId = req.body.id || req.query.id;
var paramPassword = req.body.password || req.query.password;
res.writeHead('200', {'Content-Type':'text/html;charset=utf8'});
res.write('<h1>Express 서버에서 응답한 결과입니다.</h1>');
res.write('<div><p>Param id : ' + paramId + '</p></div>');
res.write('<div><p>Param password : ' + paramPassword + '</p></div>');
res.write("<br><br><a href='/public/login2.html'>로그인 페이지로 돌아가기</a>");
res.end();
});
// 라우터 객체를 app 객체에 등록
app.use('/', router);
// 등록되지 않은 패스에 대해 페이지 오류 응답
app.all('*', function(req, res) {
res.status(404).send('<h1>ERROR - 페이지를 찾을 수 없습니다.</h1>');
});
// Express 서버 시작
http.createServer(app).listen(app.get('port'), function(){
console.log('Express server listening on port ' + app.get('port'));
});
라우터 미들웨어는 요청 url을 일일이 확인해야 하는 번거로운 문제를 해결한다.
라우터 미들웨어를 사용하려면 다음과 같이 익스프레스 객체에서 라우터 객체를 참조해서 사용해야 한다.
클라이언트에서 요청한 요청 패스에 따라 실행될 함수는 라우터 객체를 사용하여 등록한다. router 객체에는
route() 메소드가 있어 요청 패스를 지정할 수 있으며, get() 이나 post() 메소드를 호출하면 실행될 함수를 등록
할 수 있다.
라우팅 기능을 확인해 보기 위해 앞에서 만든 login.html 파일을 복사하여 login2.html을 만든 후 <form> 태그에
action 속성을 추가한다.
<form method ="post" action="/process/login">
