node.js 에서 express 사용하기 - 2번째

 

지난번에는 웹프레임워크를 담당하는 express를 설치해보고 간단하게 적용해보았습니다.

이번에는 기존에 만들어진 웹구조를 통채로 express 와 연결해보도록 하겠습니다.

 

기존에 만들어진 웹 구조는 그 자체로도 동작하지만, 새롭게 node.js 와 연동해서 변경을 해주려면 귀찮을 일이 될겁니다.

하지만, express에서 옵션을 추가하면 기존 웹 이미지를 그대로 node.js 위에서 사용가능합니다.

 

 

 

1. express 옵션

 

지난번에 테스트를 위해서 만든 express.js 파일이 있습니다.

express.html 파일을 읽어오도록 하는거였습니다.

 

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

app.get('/', function(req, res) {
    res.sendfile(__dirname + '/express.html');
});
    
app.listen(3000);

 

이번에는 소스를 수정해서 현재 폴더내에 html 폴더 안에 있는 웹파일을 읽어오도록 하겠습니다.

예제로 쓴 파일은 jquery를 사용해서 메뉴를 만드는 항목입니다.

 

index.html 파일이 있고, assets 안에 이미지와 각각 스타일 요소들이 있습니다.

index.html 파일을 클릭해서 실행해도 화면을 보는데 문제는 없습니다.

 

 

 

원래 소스에서 아래와 같이 추가해주도록 합니다.

 

__dirname 은 현재 폴더를 나타내는 node.js 요소 입니다.

 

아래와 같이 express 관련된 옵션을 추가해줍니다.

 

var express     = require('express'),
    app         = express(),
    index_dir   = __dirname + '/';

app.listen(3000);

app.set('views', index_dir);
app.set('view options', { layout: false });
app.use(express.static(index_dir));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.errorHandler());
app.use(express.favicon());

 

views 는 화면에 표시할 경로를 가르킵니다.

 

bodyParser() html에서 POST 요청 처리를 할 때 사용됩니다.

 

methodOverride()는 request를 확인하고 bodyParser 의 요청을 받아서 채워주고 put 명령을 사용할 수 있게 합니다.

 

errorHandler()는 예외 및 에러 처리를 합니다.

 

router 는 express에서 불러온 어플리케이션의 라우팅을 마운트하는데 사용됩니다.

 

 

2. express 실행

 

수정을 했으면 명령 프롬프트 창을 열고 아래와 같이 실행을 해줍니다.

 

c:\nodejs>node express

 

그 다음 웹 브라우저를 통해서 localhost 의 지정된 포트 3000번으로 접속하도록 합니다.

 

그러면 아래와 같이 node.js 위에 기존에 만들어진 html 기반의 파일들이 동작하는 것을 확인할 수 있습니다.

 

 

 

~(-_ - ~)

 

이런 express 구성은 주로 socket.io와 연결해서 사용합니다.

 

node.js 에서는 로직을 구현하고, 일반 html 에서는 데이터를 받아서 UI를 구성하는 식으로 디자인을 합니다.

그 다음, express 로 연결된 node.js 와 html을 socket.io 로 웹소켓 통신을 해서 데이터를 표현하는 방식으로 사용하면 됩니다.