node.js와 express를 이용한 웹 개발 – express설치와 시작

12Feb11

버전정보는 다음과 같습니다.

node 0.2.5 (macport로 깔았을때 최신 버전…)
npm 0.2.17
express 1.0.3

 

1. npm 소개

express 설치에 앞서 npm (http://npmjs.org) 을 먼저 소개하고자 합니다. npm은 node를 위해 만들어진 패키지 매니저로 node로 작성된 모듈이나 프로그램들을 쉽게 설치, 삭제 및 업데이트할 수 있습니다. 물론 express 설치 또한 지원합니다.
사실 npm 없이도 curl을 이용해 express의 설치가 가능하지만 굳이 npm을 설치하지 않을 이유가 없다면 npm을 이용해 express를 설치하는 것을 권장합니다.

 

npm은 이렇게 설치합니다

curl http://npmjs.org/install.sh | sh

npm github에서 소스를 다운받아서 make 명령을 이용해 설치할 수도 있습니다.

 

쉘에서 npm 명령을 내려보면 where <command> is one of: 이하로 여러가지 커맨드들이 있습니다만 일단은 install list uninstall update 정도만 기억하면 될 것 같습니다.
먼저 npm으로 어떠한 프로그램들을 설치할 수 있는지 확인해보려면 npm list 라고 명령을 내려보면 됩니다.
이미 설치되있는 패키지를 확인하려면 npm list installed 라고 쳐봅시다.

npm 및 node의 버전 정보와 설치된 패키지 목록이 나옵니다. 위 화면에는 이것저것 많이 설치되어있지만 처음에는 npm 하나만 있을 것입니다. 이 npm은 이후에도 계속 소개됩니다.

* express와 node.js 와 관련해 구글 검색을 하다보면 kiwi라는 패키지 매니저를 발견할 수도 있을지 모르겠습니다. kiwi는 이미 지원이 중단된 프로젝트로 kiwi의 github에 가보면 npm을 이용하라는 공지를 보게 될 겁니다.

 

2. express 설치

npm을 이용하면 express 설치는 간단합니다. 쉘에서 다음과 같이 입력합니다.

npm install express

express가 설치되었으니 쉘에서 express라고 명령을 내려봅시다.
현재 폴더가 비어있지 않다면 destination is not empty, continue? 라는 메시지를 보게 될겁니다. express 프로젝트를 현재 디렉토리에 만들려고 하는데 폴더가 비어있지 않기 때문에 나오는 경고 메시지입니다. no라고 입력해 취소합니다.

다시 새 디렉토리를 만들고 이동한 후 express 라고 입력합니다. 현재 디렉토리에 이것저것 알아서 생성합니다.

마지막 줄에 – make sure you have installed jade: $ npm install jade 라며 jade가 설치되어 있는지를 확인해보라고 합니다. npm을 설치한 후 아직 아무런 패키지도 설치하지 않았을 것입니다. 권고대로 npm install jade 명령으로 jade를 설치합니다.

이 jade(http://jade-lang.com/)는 node를 위해 만들어진 템플릿 엔진(template engine)입니다. express는 기본적으로 이 jade라는 템플릿 엔진을 사용합니다. 한번 확인해볼까요?
express –help 명령을 내려봅시다.

중간쯤에 Defaults to jade 라고 되어 있는 부분을 보게 될 것입니다. 눈썰미가 좋은 분이라면 jade이외에도 ejs라는 템플릿 엔진과 less, 또는 sass라는 css 엔진 역시 express가 지원하는 것을 볼 수 있습니다. 이에 대해서는 나중에 살펴보기로 하고 jade를 설치한 후, 처음으로 express가 생성한 프로젝트를 실행해봅시다.

node app.js

Express server listening on port 3000 라는 콘솔 메시지가 뜹니다. 이제 브라우저에서http://localhost:3000 를 열어 잘 띄워지는지 확인합니다.

그저 기본값대로 했을 뿐인데 에러를 뱉어냅니다. 에러도 찾아낼 김에 express 가 만들어낸 구조나 살펴봅시다.

app.js는 어플리케이션 그 자체입니다.
public 디렉토리는 각종 이미지, client-side 자바스크립트, 스타일 시트 등의 리소스가 들어있습니다.
views 디렉토리 안에는 jade 파일들이 들어있는데, 이것들이 바로 디렉토리 이름대로 어플리케이션이 브라우저 상에서 보여지게 될 화면을 결정합니다.

자 이를 바탕으로 생각해볼때, 방금전의 그 에러의 원인은 어플리케이션 자체에 있거나 아니면 view에 있거나 둘 중 하나일 것입니다.

 

 

 

 

각 파일을 일일이 열어서 비교해봅시다.

 

app.js

/** * Module dependencies. */ var express = require('express'); var app = module.exports = express.createServer(); // Configuration app.configure(function(){ app.set('views', __dirname + '/views'); app.set('view engine', 'jade'); app.use(express.bodyDecoder()); app.use(express.methodOverride()); app.use(app.router); app.use(express.staticProvider(__dirname + '/public')); }); app.configure('development', function(){ app.use(express.errorHandler({ dumpExceptions: true, showStack: true })); }); app.configure('production', function(){ app.use(express.errorHandler()); }); // Routes app.get('/', function(req, res){ res.render('index', { locals: { title: 'Express' } }); }); // Only listen on $ node app.js if (!module.parent) { app.listen(3000); console.log("Express server listening on port %d", app.address().port) }

 

views/index.jade

h1= title p Welcome to #{title}

 

views/layout.jade

!!! html head title= title link(rel='stylesheet', href='/stylesheets/style.css') body!= body

어떻게든 Hello world가 그리운 독자를 위해 이번 버그는 직접 고쳐드리겠습니다. 기본 템플릿에 이런 버그가 있다는 것이 살짝 이해가 가지 않습니다만, 곧 고쳐질 것으로 기대합니다.

view 파일들을 다음과 같이 바꿔줍니다.

views/index.jade

h1= locals.title p Welcome to #{locals.title}

 

views/layout.jade

!!! html head title= locals.title link(rel='stylesheet', href='/stylesheets/style.css') body!= body

 

다시 node app.js 명령을 통해 웹 서버를 열고 실행시켜보면 정상적으로 작동하고 있음을 보게 됩니다.

소스를 좀 더 들여다보면 view 파일들을 바꾸는 대신 app.js를 바꿔서 버그를 해결하는 방법이 있음을 알게 될겁니다. 이것은 여러분의 숙제로 남겨두고요, 직접 app.js 를 바꾸게 된다면 node 를 이용해 서버를 다시 실행시켜야한다는 사실만은 기억해주시길 바랍니다.

Filed under: Uncategorized   |  5 Comments