node.js 에서 express 사용하기

출처 : http://forum.falinux.com/zbxe/index.php?document_srl=574012&mid=lecture_tip

 

node.js 에서 express 사용하기 #1

 

이번에도 npm을 통해서 node.js에서 자주 사용하는 패키지 모듈을 설치해보고 사용해보는 예제를 테스트 해볼까 합니다.

 

웹프레임워크를 담당하는 express를 설치해보도록 합니다.

 

 

 

1. express 란?

 

기본적으로 node.js에서 웹 브라우저를 띄운다면 http를 통해서 웹 화면을 구성했습니다.

하지만, 사용할 수 있는 기능이 단순하다보니 전문적인 웹 환경을 구성하기엔 부족한 부분이 많이 있습니다.

 

http 예제 코드를 보면 js 파일 내에 화면을 직접 구현해야 합니다.

그렇다면 기존에 이미 만들어진 html 기반의 화면을 통채로 불러올 순 없을까요?

 

node.js를 사용하는 서버 프로그램 따로 UI를 담당하는 웹 화면을 구성해서 따로 작업하는게 효율성을 따져봐도 좋을 거 같습니다. 이렇게 MVC 모델로 구성을 하게 되는데 이런 것을 직접 구현하기 보다는 만들어진 모듈이 있다면 편할 겁니다.

 

node.js 에서는 이러한 웹프레임워크로 express를 많이 사용하는 편입니다.

 

 

 

2. express 설치

 

먼저 express 홈페이지에 접속하면 기본적인 설명과 샘플을 볼 수 있습니다.

 

홈페이지 : http://expressjs.com/

아래 그림은 첫 페이지 화면입니다.

 

 

 

여기서 중요한 건 작게 보이는 3.0.0입니다.

node.js 가 아직 개발 중인 단계로 모듈들 또한 자주 업데이트가 됩니다.

 

그래서 express를 자료를 검색해서 예제를 해보다보면 안되는 경우가 많이 있습니다.

express가 3.0.0 으로 업데이트 되면서 과거 버전과 사용법이 약간 달라져서 인터넷에서 검색된 결과대로 해도 안될 수 있습니다.

이 문서 또한 나중에 express 가 버전업 되면 사용법이 달라질 수 있습니다.

 

 

우선 설치를 하려면 npm을 사용하면 됩니다.

 

지난번과 같이 윈도우 환경에서 작업을 했으며, C 드라이브에 nodejs 라는 폴더를 만든 후에 작업을 진행하였습니다.

 

아래와 같이 명령을 입력합니다.

 

c:\nodejs>npm install express

 

아래 그림과 같이 npm 패키지를 관리하는 곳에서 express 정보를 가지고 파일을 다운로드 하게 됩니다.

 

3. 테스트 프로그램 작성

 

node.js에서 html 코드를 직접 작성하지 않고, 미리 만들어진 html 의 정보를 그대로 가져와서 출력해보도록 하겠습니다.

html 파일의 이름은 express.html입니다.

 

테스트를 위해서 express.js 파일을 만들었습니다.

 

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

 

 

위와 같이 express.js 파일을 만든 후, 실행을 해보도록 합니다.

 

 

c:\nodejs>node express.js

 

 

그 다음 웹 브라우저를 통해서 http://localhost:3000 으로 접속합니다.

js 파일에 내용을 입력하지 않고 html파일을 읽어드려서 화면에 출력하였습니다.

 

 

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 로 웹소켓 통신을 해서 데이터를 표현하는 방식으로 사용하면 됩니다.