본문 바로가기
개발/Node.js

[Node.js] 익스프레스로 웹 서버 만들기 1 - 익스프레스 서버와 미들웨어

by 윤호 2021. 1. 14.

노드로 가장 기본적인 웹 서버를 만드는 법을 알아보고 클라이언트에 응답을 보내 웹 페이지를 띄우는 법을 알아보겠습니다.

목차

  • 익스프레스 서버 만들기
  • 미들웨어로 클라이언트에 응답 보내기

익스프레스로 서버 만들기

익스프레스 모듈을 사용하기 전에 노드에 기본으로 들어있는 http 모듈을 사용하여 서버를 만드는 법을 보겠습니다. 급하신 분들은 express를 사용한 부분만 봐도 됩니다.

var http = require('http');

// 웹 서버 객체 만들기
var server = http.createServer();

// 웹 서버를 시작하여 3000번 포트에서 대기
var port = 3000;

server.listen(port, function(){
    console.log('웹 서버가 시작되었습니다 %d : ', port);
});

가장 기본적으로 서버가 실행될 포트넘버만 인자로 받을 수도 있습니다. 따로 설정하지 않으면 ip는 localhost로 됩니다. 이렇게 생성한 서버는 localhost:3000으로 요청을 보낼 수 있습니다.

 

 

http 모듈만으로도 웹 서버를 만들 수 있지만, 웹 서버의 기능 구현을 더 편리하게 하기 위해 익스프레스(express) 모듈을 사용하여 서버를 만듭니다. 익스프레스 모듈로 서버를 만드는 방법은 다음과 같습니다.

 

익스프레스 모듈을 사용하기 위해 % npm install express --save 명령어로 익스프레스 모듈을 설치합니다. 설치 후 다음과 같은 방법으로 서버를 만들 수 있습니다.

//Express 기본 모듈 불러오기
var express = require('express'), http = require('http');

var app = express();

// 기본 포트를 app 객체에 속성으로 설정
app.set('port', 3000);

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

기본적으로 http 모듈을 사용하지만 서버를 생성할 때 익스프레스 객체를 넣어 익스프레스 서버를 만들 수 있습니다.

 

익스프레스 객체의 set 메소드는 (하나의 변수를 설정하듯이) 속성을 설정할 수 있습니다. 위의 코드에선 port 속성이 3000이란 값을 가지도록 설정했습니다. 설정한 속성의 값은 익스프레스 객체의 get 메소드로 가져올 수 있습니다.

 

(익스프레스에는 미리 정해진 속성이 있는데 env, views, veiw engine 속성은 설정하면 특별한 역할을 수행합니다.)

미들웨어로 클라이언트에 응답 보내기

크롬과 같은 브라우저로 웹 서버에 접속하는 것은 클라이언트가 웹 서버에 요청을 하는 것입니다. 웹 페이지가 뜨는 것은 웹 서버가 이러한 요청에 응답으로 웹 페이지를 줬기 때문입니다.

 

이러한 응답은 http 모듈로 만든 서버에선 다음과 같은 방법으로 할 수 있습니다.

// 클라이언트 요청 이벤트 처리
server.on('request', function(req, res){
    console.log('클라이언트의 요청이 들어왔습니다.');
    
    res.writeHead(200, {"Content-Type": "text/html; charset=utf-8"});
    res.write("<!DOCTYPE html>");
    res.write("<html>");
    res.write(" <head>");
    res.write("     <title>응답 페이지</title>");
    res.write(" </head>");
    res.write(" <body>");
    res.write(" <h1>노드제이에스로부터의 응답 페이지</h1>");
    res.write("</html>");
    res.end();
});

클라이언트의 요청이 들어오면 request 이벤트가 발생하는데, 이 request 이벤트를 설정하여 응답할 수 있습니다.

 

 

express 서버는 미들웨어를 사용하여 응답을 보낼 수 있습니다. 미들웨어는 요청과 응답 정보를 받아 처리하는 하나의 함수라 볼 수 있습니다. 서버에 요청이 들어오면 가장 먼저 생성된 미들웨를 거치게 됩니다.

 

이러한 미들웨어를 사용하여 익스프레스 서버에서 응답을 할 수 있습니다.

var express = require('express'), http = require('http');

var app = express();

app.use(function(req, res){
    console.log('첫 번째 미들웨어에서 요청을 처리함');
    
    res.writeHead('200', {'Content-Type':'text/html;charset=utf8'});
    res.end('<h1>Express 서버에서 응답한 결과입니다.</h1>');
});

http.createServer(app).listen(3000, function(){
    console.log('Express 서버가 3000번 포트에서 시작됨.');
});

익스프레스의 use 메소드로 미들웨어를 설정할 수 있습니다. 클라이언트의 요청은 이렇게 설정한 미들웨어를 거치게됩니다.

브라우저에서 웹 서버에 접속한 결과 1

 

미들웨어를 여러개 설정하면 미들웨어 내에서 next 메소드를 사용하여 다음 미들웨어를 실행할 수 있습니다.

var express = require('express'), http = require('http');

var app = express();

app.use(function(req, res){
    console.log('첫 번째 미들웨어에서 요청을 처리함');
    
    req.user = 'mike';

    next();
});

app.use(function(req, res){
    console.log('두 번째 미들웨어에서 요청을 처리함');
    
    res.writeHead('200', {'Content-Type':'text/html;charset=utf8'});
    res.end('<h1>Express 서버에서' + req.user + '응답한 결과입니다.</h1>');
});

http.createServer(app).listen(3000, function(){
    console.log('Express 서버가 3000번 포트에서 시작됨.');
});

브라우저에서 웹 서버에 접속한 결과 2

 

익스프레스로 서버를 만들면 서버의 기능 구현을 더 편리하게 할 수 있다고 했는데, 이는 미리 만들어진 미들웨어를 가져와 사용함으로써 가능합니다. 이에 대해선 다음 글에서 다루도록 하겠습니다.

 

Reference

  • Do it! Node.js 프로그래밍

댓글