노드로 간단한 웹서버 만들기

JS
node, express 설치, 미들웨어

간단한 웹서버 만들기

노드에는 기본으로 http모듈이 있어서 서버 객체를 만들 수 있는데 이 서버 객체는 웹서버 기능을 담당한다.

일단 폴더 하나를 npm init 명령어로 노드 프로젝트를 만든다.
그리고 파일을 하나 만든다.
1
2
3
4
5
6
7
8
9
10
var http = require('http');
//웹 서버 객체를 만듦.
var server = http.createServer();
//웹 서버를 시작하여 3000번 포트에서 대기
var port = 3000;
server.listen(port, function(){
    console.log('웹 서버가 시작되었습니다.');
});

여기까지 코드를 작성하고 브라우저를 실행시켜 보자. 주소는 localhost:3000.
무엇이 보일까? 안보인다. 아무것도 왜냐하면 서버를 시작만 했지 클리언트에 던져주는 정보가 아무것도 없기 때문.
다만 명령 프롬프트에서

1
2
 PS C:\workspace\test_02\node_02> node index.js
웹 서버가 시작되었습니다.

라는 정보를 볼 수 있다. 연결이 되긴 한 모양.

그럼 어떻게 정보를 요청할 수 있을지 이벤트를 살펴보자.

  • connection : 클라이언트가 접속하여 연결이 만들어질 때 발생하는 이벤트
  • request : 클라이언트가 요청할 때 발생하는 이벤트
  • close : 서버를 종료할 때 발생하는 이벤트

위의 코드 아래에 다음 코드를 넣고 실행시켜보자.

1
2
3
4
5
6
7
8
9
10
11
12
13
server.on('connection', function(socket){
    var addr = socket.address();
    console.log('클라이언트가 접속했습니다. :', addr.address, addr.port);
});
server.on('request', function(req, res){
    console.log('클라이언트 요청이 들어왔습니다.');
    // console.dir(req);
});
server.on('close', function(){
    console.log('서버가 종료됩니다.');
});

이렇게 하면 여전히 브라우저의 화면에서는 아무것도 나오지 않지만 명령프롬프트에서는 다음과 같이 출력되는 것을 확인 할 수 있다. 

1
2
3
4
PS C:\workspace\test_02\node_02> node index.js
웹 서버가 시작되었습니다.
클라이언트가 접속했습니다. : ::1 3000
클라이언트 요청이 들어왔습니다.

눈에 보이지는 않지만 접속 함으로서 요청이 들어오긴 한 모양.

웹 서버에 요청을 보내는 방식(method)
  • GET : header에 요청정보를 넣어 보냄
  • POST : 본문에 요청정보를 넣어 보냄
  • PUT
  • DELETE

익스프레스로 웹 서버 만들기

실무에서 웹 서버를 구성할 때에는 express모듈을 주로 사용.
express모듈을 사용하더라도 express모듈은 http모듈을 기초로 만들어진 것.
익스프레스 모듈에서는 미들웨어와 라우터를 제공하는데 이걸 알면 시능을 만드는게 훨씬 편리해 진다고 한다.

그럼 express모듈 설치

npm install express --save로 익스프레스 모듈을 설치 한다.

파일 생성해서 익스프레스 시작

1
2
3
4
5
6
7
8
9
//express 기본 모듈 불러오기
var express = require('express')
    , http = require('http');
//express 객체 생성
var app = express();
//기본 포트를 app 객체에 속성으로 설정
app.set('port', process.env.PORT || 3000);

여기에서 축약한 형태가 들어가면서 눈에 잘 안보이는 형태가 있는데 이것은 var data = {}; data.port = 3000; 이렇게 들어가 있는 형태라고 생각하면 됨. ||이 연산자는 or연산자로 지금은 3000으로 들어가 있지만 만약에 process.env.PORT 가 설정되어 있다면 일단 그것으로 셋팅이 됨.

1
2
3
4
//express 서버 시작
http.createServer(app).listen(app.get('port'), function(){
    console.log('익스프레스 서버를 시작했습니다.' + app.get('port'));
});

이렇게 작성하고 실행하면

1
익스프레스 서버를 시작했습니다.3000

는 메세지를 볼 수 있당.

express server method
  • set(name, value) : 서버 설정을 위한 속성을 지정, set()메소드로 지정한 속성은 get()메소드로 꺼내 확인할 수 있음
    └ env, views(뷰들이 들어있는 폴더, 폴더배열 설정), view engine(디폴트 뷰엔진 설정)
  • get(name) : 서버 설정을 위해 지정한 속성을 꺼내옴
  • use([path], function[,function…]) : 미들웨어 함수를 사용
  • get([path], function) : 특정 패스로 요청된 정보를 처리

미들웨어 등록

미들웨어는 중간에 요청이 있으면 추가로 서버에서 정보를 던져주는 것 같다.
라우트는 그쪽으로 연결 해 주는 것. 아직 잘 모르겠는 것. 느낌같은 느낌

use()메소드를 이용해서 미들웨어로 등록해보자.

1
2
3
4
5
6
7
8
9
app.use(function(req, res, next){
    console.log('첫번째 미들웨어에서 요청을 처리함');
    res.writeHead('200', {'Content-Type':'text/html;charset=utf8'});
    res.end('<h1>Expess 서버에서 응답한 결과입니다.</h1>');
    //여러 개의 미들웨어 등록 시
    next();
});

이렇게 하면 브라우저에서 h1으로 문장이 나오는 것을 확인 할 수 있다.
명령 프롬프트에서는 ‘첫번째 미들웨어에서 요청을 처리함’ 이라는 문장 확인.

static 미들웨어

[public]폴더 안에 있는 파일을 사이트의 /public 패스로 접근하도록 만들고 싶다면 static()메소드를 호출할 때 아래와 같이 패스를 정해주면 됨.

1
2
3
4
5
//path 활성화
var path = require('path'); 
//패스 정해주기
app.use('/public', express.static(path.join(__dirname, './public')));

body-parser 미들웨어

body-parser미들웨어는 post로 요청했을 때, 요청 파라미터를 확인 할 수 있게 만들어준다.
클라이언트가 Post방식으로 요청할 경우 본문 영역에 들어있는 요청 파라미터들을 파싱하여 요청 객체의 body속성에 넣어줌.

npm install body-parser --save 로 설치하고
var bodyParser = require('body-parser');를 위에 넣어 활성화

public폴더 안에 login.html 파일을 만들어보자.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <form method="post">
        <h4>아이디</h4>
        <input type="text" name="id">
        <h4>패스워드</h4>
        <input type="password" name="password">
        <button type="submit">전송</button>
    </form>
</body>
</html>

그리고 app.js엔

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//body-parser를 사용해 application/x-www-form-urlencoded 파싱
app.use(bodyParser.urlencoded({extended:false}));
//body-parser를 사용해 application/json 파싱
app.use(bodyParser.json());
app.use(function(req, res, next){
    console.log('첫번째 미들웨어에서 요청을 처리함');
    console.log(req.body.id);
    console.log(req.body.password);
    //json형식으로 받은 id와 패스워드를 body로 보내줌
    res.send({id:req.body.id, password:req.body.password});
});

을 넣는다. localhost:3000/public/login.html 에서 form에 정보를 입력하고 전송하면 입력된 정보를 다시 볼 수 있다.

요청 라우팅하기

클라이언트에서 요청한 요청 패스에 따라 실행될 함수는 라우터(router) 객체를 사용해 등록함. route() 메소드가 있어서 요청 패스를 지정할 수 있으며 get()이나 post()메소드를 호출하면 실행될 함수를 등록할 수 있음

1
2
3
4
5
6
7
8
9
10
//라우터 객체 참조
var router = express.Router();
//라우팅 함수 등록
router.route('/process/login').get(...);
router.route('/process/login').post(...);
...
//라우터 객체를 app객체에 등록
app.use('/', router);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
var express = require('express');
var http = require('http');
var path = require('path');
var bodyParser = require('body-parser');
var hbs = require('express-handlebars');
var app = express();
app.set('port', process.env.PORT || 3000);
// var data = {};
// data.port = 3000;
// console.log(data);
var router = express.Router();
http.createServer(app).listen(app.get('port'), function(){
    console.log('익스프레스 서버를 시작했습니다.' + app.get('port'));
})
//엔진등록
app.engine('html', hbs({extname: ".html"}));
//view 폴더랑 public폴더랑 같이 잡아놓음
app.set('views', path.join(__dirname, './public'));
//view 템플릿 엔진을 html로 등록, html, ejs, pug로 등록할 수 있다.
app.set('view engine','html');
//router 객체에 route를 등록
router.route('/test').get((req, res)=> {
    console.log('test work!!');
    // res.send({name:'shin', age:32});
    res.render('index3.html');
});
//미들웨어에 router객체를 등록
app.use('/', router);

이렇게 작성하고 localhost:3000/test에 들어갈 경우 명령 프롬프트엔 test work!!가 출력되고 public폴더 아래에 있는 index3.html 파일 화면이 보여지게 된다.

공유하기 댓글