(node.js) [Part.5] 웹 서버 만들기 - 익스프레스로 웹 서버 만들기

http 모듈만 사용해서 웹 서버를 구성할 때는 많은 것들을 직접 만들어야한다.

하지만 직접 만들어야 하는 코드가 많다면 시간과 노력도 많이 든다는 문제가 생긴다. 이 문제를 해결하기 위해 만들어진 것이 익스프레스(Express)이다. 

express 모듈을 사용하면 간단한 코드로 웹 서버의 기능을 구현할 수 있다.

특히 익스프레스에서 제공하는 미들웨어와 라우터를 사용하면 만들어야할 각각의 기능을 훨씬 편리하게 구성할 수 있다.

 

익스프레스로 웹 서버를 만드는 방법을 하나씩 살펴보자.

새로운 익스프레스 서버 만들기

먼저 익스프레스를 사용하는 파일을 만들기 위해 새로운 프로젝트 폴더를 하나 만든다.

[ExpressExample] 폴더를 만든 다음 브라켓에서 (파일->폴더 열기) 메뉴를 눌러 새로 만든 프로젝트 폴더를 설정한다.

새로 만든 프로젝트 폴더를 설정한다. 새로운 프로젝트 폴더를 만들었으니 그 안에 package.json 파일을 만들어야한다.

명령 프롬프트에서 ExpressExample 폴더로 이동한후, 다음과 같은 명령을 이용해서 package.json 파일을 생성한다.

npm init

익스프레스의 시작점이 되는 app.js 파일을 만들어보자. 그리고 코드를 입력한다.

// Express 기본 모듈 불러오기
// express 를 불러올 때는 http 모듈을 반드시 함께 불러와야한다.
var express = require('express');
var http = require('http');
 
// 익스프레스 객체 생성
var app = express();
 
// 기본 포트를 app 객체에 속성으로 설정
// process.env 객체에 port 속성이 있으면 그 속성을 사용하고
// 그렇지 않다면 3000번 포트를 사용한다는 뜻이다.
app.set('port', process.env.PORT || 3000);
 
// Express 서버 시작
http.createServer(app).listen(app.get('port'), function(){
    console.log('익스프레스 서버를 시작했습니다. : ' + app.get('port'));
});

express, http 모듈은 ./ 기호 없이 모듈 이름만 사용하고 있다. 이것은 노드에 내장된 모듈 또는 npm으로 설치한 외장 모듈일 때 상대 패스가 아닌 이름만 지정하도록 설정되었기 때문이다.

 

첫 번째로 보이는 express 모듈은 웹 서버를 위해 만들어진 것으로 http 모듈 위에서 동작한다.

따라서, express 모듈을 사용할 때는 항상 http 모듈도 함께 불러들여야한다.

 

직접 만든 모듈 파일을 불러들일 때 파일을 직접 지정할 수도 있고 폴더를 지정할 수도 있다.

모듈 파일을 만든 후 require() 메소드로 모듈을 불러들일 때는 상대 패스를 사용하며 자바스크립트 파일을 확장자없이 지정한다. 예를 들어, user.js 파일을 불러들일 때는 require('./users') 코드를 사용한다.
만약 파일을 지정하지 않고 폴더를 지정하면 그 폴더 안에 있는 index.js 파일을 불러온다.

 

모듈을 직접 만들어 추가하는 방식은 나중에 살펴본다. 입력했던 코드 아래쪽에 다음과 같은 코드를 입력한다.

// Express 기본 모듈 불러오기
var express = require('express');
var http = require('http');
 
// 익스프레스 객체 생성
var app = express();
 
// 기본 포트를 app 객체에 속성으로 설정
app.set('port', process.env.PORT || 3000);
 
// Express 서버 시작
http.createServer(app).listen(app.get('port'), function(){
    console.log('익스프레스 서버를 시작했습니다. : ' + app.get('port'));
});

 

※ 코드 설명

▷ express() 함수를 호출하여 반환된 객체를 app 변수에 지정하고 있다.

▷ app.set() 은 app 객체에 정의된 함수를 호출한다.

▷ http 모듈에 정의된 createServer() 메소드를 호출하는데, 파라미터로 app 변수를 전달한다.

▷ createServer() 메소드를 호출하여 만든 객체에 들어있는 listen() 메소드를 호출하면 웹 서버가 시작된다.

 

이전 단계에서 http 모듈로 웹 서버를 만들 때  createServer() 메소드로 웹 서버 객체를 만들고, listen() 메소드를 호출하여 클라이언트의 요청을 대기하도록 설정했다.

여기에서도 마지막 줄의 코드는 같다. 한가지 차이점은 createServer() 메소드에 전달되는 파라미터로 app 객체를 전달한다. 이 app 객체는 express() 메소드 호출로 만들어지는 익스프레스 서버 객체이다.

 

익스프레스 서버 객체가 가지고 있는 주요 메소드들은 다음과 같다.

메소드 이름	설명
set(name, value)	서버 설정을 위한 속성을 지정한다. set() 메소드로 지정한 속성은 get() 메소드로 꺼내어 확인할 수 있다.
get(name)	서버 설정을 위해 지정한 속성을 꺼내 온다.
use([path,]function[,function...])	미들웨어 함수를 사용한다.
get([path,]function)	특정 패스로 요청된 정보를 처리한다.

set() 메소드는 웹 서버의 환경을 설정하는데 필요한 메소드이다.

만약, title 속성을 app 객체에 넣어두었다가 필요할 때 꺼내어 사용하고 싶다면 app.set('title', 'My App')처럼 set() 메소드를 호출하여 넣어둘 수 있다. 그런데 set() 메소드로 설정한 속성의 이름이 미리 정해진 이름이라면 웹 서버의 환경설저에 영향을 미친다. 서버 설정을 위해 미리 정해진 주요 속성 이름은 다음과 같다.

 

속성 이름	설명
env	서버 모드를 설정한다.
views	뷰들이 들어 있는 폴더 또는 폴더 배열을 설정한다.
view engine	디폴트로 사용할 뷰 엔진을 설정한다.

앞의 코드를 보면 익스프레스 서버를 설정하기 위해 set() 메소드를 사용하였다. 설정한 속성의 이름은 다음 소스 코드에서 확인할 수 있듯이 port, views, view engine 이다.

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

이 port 속성을 시작할 때는 (1) process.env 객체에 PORT 속성이 있으면 그 속성을 사용하고, (2) 없으면 3000번 포트 번호를 사용한다.

이렇게 설정한 포트 번호는 코드의 마지막 부분에서 listen() 메소드를 호출할 때 app.get('port')와 같은 코드를 사용하여 포트 속성을 꺼내 온 후 파라미터로 전달된다.

결국 port 속성은 웹 서버의 포트를 지정하는데 사용하는 정보이다.

 

view engine 속성은 뷰 엔진을 설정하는 것으로 ejs 나 pug 를 많이 사용한다. 뷰 엔진은 클라이언트에 보낼 응답 웹 문서를 만들 때 사용되며 미리 템플릿을 만들어두고 그 템플릿을 사용해서 응답 웹 문서를 만들어낸다.

클라이언트에 응답을 보낼 때 사용하는 템플릿은 여러 종류가 있는데, 그 종류를 결정하는 것이 바로 뷰 엔진이다.

뷰 엔진은 나중에 다시 알아볼 것이다.

 

그리고 코드를 실행해보면 오류가 발생하는데, 이는 express 모듈을 설치하지 않아서 생기는 문제이다.

npm install express --save

를 통해서 express 모듈을 설치한다. 그 다음에 app.js 를 실행하면 다음과 같은 결과를 볼 수 있다.

 

익스프레스로 만든 웹 서버를 실행한 결과

그런데, 웹 브라우저에서 다음 주소로 접속해보면 아무런 응답이 없다.

http://localhost:3000

이것은 아직 어떤 응답을 할 것인지 지정하지 않았기 때문이다.

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

지금까지 set () 메소드로 속성을 설정하는 방법에 대해서 알아보았다.

이제 user() 메소드를 사용하여 미들웨어를 설정하는 방법에 대해서 살펴보자. 노드에서는 미들웨어를 사용하여 필요한 기능을 순차적으로 실행할 수 있다. 익스프레스에서 미들웨어를 설정하여 사용하는 방식은 다음과 같다.

익스프레스에서 미들웨어를 사용하는 방식

익스프레스에서는 미들웨어 이외에 라우터를 사용하는데 미들웨어나 라우터는 하나의 독립된 기능을 가진 함수라고 생각하면 된다. 

다시 말해, 익스프레스에서는 웹 요청과 응답에 관한 정보를 사용해 필요한 처리를 진행할 수 있도록 독립된 함수로 분리한다. 이렇게 분리한 각각의 것들을 미들웨어라고 부른다.

예를 들어, 클라이언트에서 요청했을 때 로그로 남기는 간단한 기능을 만든 후 use() 메소드를 사용햇 미들웨어로 등록하면 모든 클라이언트 요청이 이 미들웨어를 거치면서 로그를 남기게 된다.

각각의 미들웨어는 next() 메소드를 호출하여 그 다음 미들웨어가 처리할 수 있도록 순서를 넘길 수 있다.

 

만약 첫 번째 미들웨어를 '미들웨어 #0' 이라고 하고 두 번째 미들웨어를 '미들웨어 #1' 이라고 했을 때, 첫 번째 미들웨어에서 next() 함수를 호출하면 두 번째 미들웨어로 넘어가게된다.

 

라우터는 클라이언트의 요청 패스를 보고 이 요청 정보를 처리할 수 있는 곳으로 기능을 전달해주는 역할을 한다.

이러한 역할을 흔히 라우팅(Routing) 이라고 부르는데, 클라이언트의 요청 패스에 따라 각각을 담당하는 함수로 분리시키는 것이다. 

예를 들어, 클라이언트가 /users 패스로 요청한다면 이에 대한 응답처리를 하는 함수를 별도로 분리해서 만든 다음 get() 메소드를 호출하여 라우터로 등록할 수 있다.  그러면 등록해 둔 라우터 정보로 찾은 함수가 호출되며, 이 함수에서 클라이언트로 응답을 보낼 수 있다.

 

익스프레스에서 미들웨어와 라우터 사용 방식을 어느정도 이해했다면, 코드를 몇 줄 입력하여 간단한 기능을 직접 만들어 볼 수 있다. app2.js 를 만들고 다음 코드를 입력한다.

 

var express = require('express');
var http = require('http');
 
var app = express();
 
app.use(function(req,res,next){
    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() 메소드를 호출하여 미들웨어를 하나 등록했다.

use() 메소드로 등록한 함수들은 등록 순서에 따라서 클라이언트 요청을 처리한다. 여기에서는 하나의 미들웨어만 등록했으므로 하나만 호출되며, 이 미들웨어에서 클라이언트로 응답을 보낸다.

app2.js 를 실행하고 브라우저를 열면 다음과 같은 사이트를 볼 수 있다.

사이트에 접속하여 미들웨어에서 처리한 결과를 본 경우

이 코드가 익스프레스로 웹 서버를 만드는 가장 간단한 형태이다.

사용자 입장에서 보면 웹 브라우저에서 웹 서버로 페이지를 요청하고 웹 문서로 볼 수 있게 되었다.

그럼에도 불구하고, 이러한 기능을 구현하는 코드는 그리 길지 않다. 코드가 어떻게 구현되었는지 보면 다음과 같다.

 

익스프레스로 웹 서버를 만들 때 사용되는 가장 간단한 구성

미들웨어 함수는 클라이언트 요청을 전달받을 수 있다. 클라이언트 요청은 등록된 미들웨어를 순서대로 통과하며, 요청 정보를 사용해 필요한 기능을 수행할 수 있다.

만약, 첫 번째 미들웨어 함수인 '미들웨어 함수 #0' 안에서 end() 메소드를 호출하여 응답을 보내면 처리 과정은 완전히 끝난다. 이렇듯 미들웨어를 직접 등록하여 사용하는 과정은 두 단계로 나눌 수 있다.

첫 번째 단계는 use() 메소드를 사용해 미들웨어를 등록하는 것이고, 두 번째 단계는 클라이언트의 요청 정보를 처리하여 응답을 보내는 것이다.

여러 개의 미들웨어를 등록하여 사용하는 방법 알아보기

만약 하나의 미들웨어에서 클라이언트에 바로 응답을 보내는 방식이 아니라, 여러 개의 미들웨어를 등록하여 여러가지 기능을 수행하도록 만들고 싶다면 어떻게 해야할까? 

각각의 미들웨어 안에서 마지막에 next() 메소드를 호출하여 다음 미들웨어로 처리 결과를 넘겨줘야한다.

 

여러 개의 미들웨어를 사용하는 방법을 알아보기 위해 app2.js 파일을 복사하여 app3.js 를 만든다.

그런 다음 두 개의 미들웨어를 등록하는 코드를 입력한다.

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

첫 번째  미들웨어에서는 req객체에 user 속성을 추가하고 그 값으로 문자열을 하나 넣었다.

이 정보를 사용자 정보라고 한다면 첫 번째 미들웨어에서 사용자 정보를 설정한 것이 된다.

만약, 클라이언트에 응답을 보낼 때 사용자 정보를 같이 알려주고 싶은데, 클라이언트에 응답을 보내는 기능은 두 번째 미들웨어에서 담당한다고 가정해보자.

이런 경우에는, 두 번째 미들웨어에서 req객체에 설정된 user 속성을 확인하여 사용자 정보를 사용할 수 있다. 이 때 첫번째 미들웨어에서는 반드시 next() 메소드를 호출하여 두 번째 미들웨어로 처리 순서를 넘겨줘야한다.

 

사이트에 접속하여 두 개의 미들웨어에서 처리한 결과

미들웨어 안에서는 기본적으로 요청 객체인 req와 응답 객체인 res 객체를 파라미터로 전달받아 사용할 수 있다.

그리고 이 미들웨어 함수를 호출한 app 객체도 참조할 수 있도록 req객체의 속성으로 app 객체가 들어있다.

즉, req.app 코드를 사용하면 app 객체를 참조하여 사용할 수 있다.

app3.js 파일을 실행하고 사이트에 접속하면 사용자 정보가 포함된 결과가 표시된다.

 

미들웨어 함수를 보면 요청 객체와 응답 객체가 파라미터로 전달되며, 그 다음 미들웨어로 넘길 수 있는 next 함수 객체도 전달된다. 따라서 next 함수 객체를 실행하면, 다음 미들웨어로 넘길 수 있다.

 

두 개의 미들웨어를 사용할 때 구성을 보면 다음과 같다.

 

두 개의 미들웨어를 사용한 경우의 구성

 

미들웨어를 사용하기 위해 먼저 use() 메소드를 호출해야 하며, 미들웨어 2개를 등록하였다.

클라이언트에서 요청이 들어오면 미들웨어 함수는 순서대로 실행되는데, 첫 번째 미들웨어에서 응답을 보내지않고 next() 함수를 호출하면 다음 미들웨어로 넘어가도록 구성되어있다.

그리고 두 번째 미들웨어에서 보낸 응답은 클라이언트에 전달된다.

 

익스프레스의 요청 객체와 응답 객체 알아보기

익스프레스에서 사용하는 요청객체와 응답객체는 http 모듈에서 사용하는 객체들과 같다.

하지만, 몇 가지 메소드를 더 추가할 수 있다. 다음은 익스프레스에서 추가로 사용할 수 있는 주요 메소드들이다.

메소드 이름	설명
send([body])	클라이언트에 응답 데이터를 보낸다. 전달할 수 없는 데이터는 HTML 문자열, Buffer 객체, JSON 객체, JSON 배열이다.
status(code)	HTTP 상태 코드를 반환한다. 상태 코드는 end()나 send() 같은 전송 메소드를 추가로 호출해야 전송할 수 있다.
sendStatus(statusCode)	HTTP 상태 코드를 반환한다.  상태 코드는 상태 메세지와 함께 전송된다.
redirect([status,]path)	웹 페이지 경로를 강제로 이동시킨다.
render(view[,locals][,callback])	뷰 엔진을 사용해 문서를 만든 후 전송한다.

send() 메소드는 응답 데이터를 좀 더 간단하게 전송하기 위해 익스프레스에서 추가된 것이다.

send() 메소드로 클라이언트에 JSON 데이터를 전송하는 기능을 확인해 보기 위해서 app3.js 파일을 복사하여 app4.js 를 만든다. 그리고 코드를 수정한다.

var express = require('express');
var http = require('http');
 
var app = express();
 
app.use(function(req,res,next){
    console.log('첫 번째 미들웨어에서 요청을 처리함.');
    
    res.send({name:'소녀시대', age:20});
});
 
http.createServer(app).listen(3000,function(){
    console.log('Express 서버가 3000번 포트에서 시작됨.');
});

브라우저에서 사이트로 접속하면 다음과 같이 JSON 객체를 응답으로 받아 표시한다.

웹 서버에서 JSON 객체를 응답으로 받은 결과

사실 JSON 객체를 그대로 받아 웹 페이지로 보여주는 경우는 거의 없다.

하지만 모바일 단말기에서 사용하는 웹 앱이나 일반 앱에서는 화면을 보여 주기 위해 필요한 웹 문서들을 단말 쪽에 두고 Ajax 또는 웹 소켓으로 데이터만 수신하여 화면에 보여줄 때가 많다.

따라서, JSON 객체를 전송받는 기능이 필요하다.

 

문서가 아니라 JSON 데이터만 전달받는 경우가 많아지고 있다.

게시판을 예로 들어서 설명해보자. 글 목록에서 항목 하나를 눌러 글의 내용을 조회할 때마다 웹 서버에서 웹 문서를 새로 받아오는 방식은 매번 웹 브라우저 화면을 업데이트하기 때문에 하얀 화면이 보이는 경우가 많을 뿐 아니라 받아 오는 데이터 양도 많아진다.

이런 이유 때문에 JSON 데이터만을 받아 와서 게시물을 보여줄 때 해당 데이터만 업데이트하는 것이 효율적이다.
특히 모바일 단말에서는 화면을 위해 만든 웹 문서를 웹 서버가 아니라 단말에 저장해 두고 보여줄 때가 많기 때문에 웹 서버에서는 데이터만 받아온다.

 

status() 와 sendStatus() 메소드를 사용하여 상태 코드를 전송할 수 있다.

status() 메소드는 상태 코드를 작성하는 기능만 있으므로, 상태 코드를 전송하려면 send() 메소드를 추가한다.

예를 들어, 다음 코드를 사용할 수 있다.

res.status(403).send('Forbidden');

만약, sendStatus() 메소드를 사용한다면 다음과 같이 코드만 파라미터로 전달한다.

res.sendStatus(403);

403 코드만 전달해도 status() 메소드와 send() 메소드를 연속으로 호출해서 다음 코드를 호출했을 때 같은 결과가 표시된다.

 

 

redirect() 메소드를 사용하면 다른 페이지로 이동할 수 있다.

예를 들어, 로그인을 하지 않은 상태로 메뉴 페이지에 접속하려고 할 때 redirect() 메소드로 페이지를 옮겨 갈 수 있다.

app4.js 파일을 복사하여 app5.js 를 만들고 무조건 다른 페이지로 이동하게 만들어보자.

 

var express = require('express');
var http = require('http');
 
var app = express();
 
app.use(function(req,res,next){
    console.log('첫 번째 미들웨어에서 요청을 처리함.');
    
    res.redirect('http://google.co.kr');
});
 
http.createServer(app).listen(3000,function(){
    console.log('Express 서버가 3000번 포트에서 시작됨.');
});

위의 코드는 redirect() 메소드를 호출하면서 구글 사이트의 주소를 파라미터로 전달하도록 만들었다.

app5.js 파일을 실행하고 웹 브라우저로 접속하면 구글 사이트가 결과 페이지로 나타난다.

 

사이트 접속한 후 redirect() 메소드로 띄운 구글 사이트

redirect() 메소드를 사용하면 URL 주소 뿐만 아니라, 프로젝트 폴더 안에 있는 다른 페이지를 보여줄 수 있다.

 

render() 메소드는 뷰 엔진을 사용해 템플릿 파일에 있는 내용을 HTML 페이지로 바꾼 후 그 결과물을 전송한다.

이 내용에 대해서는 나중에 뷰 템플릿 부분에서 설명한다.

익스프레스에서 요청 객체에 추가한 헤더와 파라미터 알아보기

익스프레스에서 요청 객체에 추가한 헤더와 파라미터를 알아보자.

추가한 정보	설명
query	클라이언트에서 GET 방식으로 전송한 요청 파라미터를 확인한다. 예) req.query.name
body	클라이언트에서 POST 방식으로 전송한 요청 파라미터를 확인한다. 단, body-parser 와 같은 외장 모듈을 사용해야한다. 예) req.body.name
header(name)	헤더를 확인한다.

클라이언트에서 요청 파라미터를 함께 보낼 수 있다.

이때 GET 방식으로 요청했다면 요청 파라미터들은 요청 객체의 query 객체 안에 들어간다.

 

예를 들어, http://localhost:3000/?name=mike 와 같은 주소로 접속한 경우, 요청 파라미터인 name 의 값은 다음 코로 확인할 수 있다.

var paramName = req.query.name;

요청 파라미터는 영어로 query string 이라고 한다.

즉, 클라이언트에서 서버로 요청할 때 문자열로 데이터를 전달하는 것이다. 이 요청 파라미터는 서버 쪽에서 받아 사용할 수 있어야 하므로 위 코드처럼 req 객체의 query 객체 안에 넣어두게 한다.

 

클라이언트가 요청할 때 전달되는 헤더 값들은 header() 메소드로 확인할 수 있다.

app5.js 파일을 복사하여 app6.js 파일을 만든 후, 클라이언트가 요청했을 때 User-Agent 헤더와 요청 파라미터 중 name 의 값을 확인하는 코드를 다음과 같이 입력한다.

 

var express = require('express');
var http = require('http');
 
var app = express();
 
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();
});
 
http.createServer(app).listen(3000,function(){
    console.log('Express 서버가 3000번 포트에서 시작됨.');
});

이 파일을 실행하고 웹 브라우저를 연 후 주소 창에서 다음주소를 입력한다.

http://localhost:3000/?name=mike

사이트에 접속하면 이런 화면을 볼 수 있다.

사이트에 접속하여 헤더와 요청 파라미터 값을 확인한 경우

다음 그림은 익스프레스에서 클라이언트의 요청 파라미터를 확인하는 과정을 간단하게 정리한 것이다.

 

익스프레스에서 req.query 객체 안에 들어있는 요청 파라미터를 확인하는 방법

클라이언트가 주소 문자열에 포함시켜 전달하는 요청 파라미터를 웹 서버에서 받아서 확인할 때는 보통 여러 줄의 코드가 필요하다.

하지만, 익스프레스 내부에서 요청 파라미터를 어떻게 처리하는지는 잘 모르더라도 한 줄의 코드만으로 요청 파라미터의 값을 확인할 수 있다.