이번부터는 조금 난이도가 올라갑니다. 번역 이외로 주석이나 박스 설명으로 원문에 없는 내용들을 많이 추가했습니다만, 그래도 처음 접하시는 분들은 다양한 기술이 나와서 혼란스러우실 수 있습니다. 하지만 본문에도 적었듯이, 모르는 내용이 나온다고 당황하지 마세요. 차차 알게 되실겁니다. node.js의 정체도 아직 본 스터디에서는 직접 언급하지 않았잖아요? :D (그런 내용은 오프라인 모임때 다룰 예정입니다.)
그리고 그냥 읽기만 하면 좀 더 어렵습니다. 앞으로의 스터디를 대비해서라도 이번 따라배우기 글은 꼭 직접 따라해 보시길 권합니다. 학습을 마치신 다음엔, 앞서와 마찬가지로 댓글로 소감이나 추가내용 OK 메시지 등등을 달아주시면 되겠습니다.
자! 그럼 굿,럭! 입니다.
Part 01. Webapp을 만들어 봅시다!에 이은 따라배우기 두 번째 입니다. 본 시리즈는 "Node.js"를 이용해서 웹 애플리케이션(이하 웹앱)을 만들어보는 따라배우기(tutorial)시리즈입니다. 본 시리즈는 node.js를 이용해서 웹앱을 만드는 과정을 따라가면서, 자신만의 애플리케이션을 만들 때 접하게 될 모든 영역을 다룰 예정입니다.
Part 01에서는 본 시리즈를 소개하고 Node 프로젝트에서 쓸 적당한 라이브러리를 선택에 대해 다뤘습니다. 이번에는
기본 툴과 라이브러리를 설치를 다룹니다. 그리고 뼈대가 되는 앱을 만든다음 생성된 코드를 살펴볼 예정입니다.
준비물(Requirements)
본 프로젝트는 다음과 같은 라이브러리/제품이 필요합니다.
- 동작하는 Node( node.js 인스톨)
- MongoDB
- npm
왜 이런 기술을 선택했는지는 마찬가지로 Part 01을 참고해주세요.
Node
설치
Node.js가 설치되어 있지 않으면 다운로드(nodejs.org) 받아서 압축을 푸세요. 패키지 매니저를 쓸 수도
있습니다.
압축 푼 다음 해당 디렉터리에서 아래와 같이 실행
MacOS
./configure
make
sudo make install
Ubuntu 리눅스
sudo apt-get update
sudo apt-get install g++ curl libssl-dev apache2-utils
./configure
make
sudo make install
혹 필요에 따라서는 .bash_profile에 아래 내용을 추가합니다.
export NODE_PATH=/usr/local/lib/node_modules
MS윈도우즈
http://nodejs.org/#download 에서 node.js 바이너리 다운로드
nodjs package manager인 npm은 현재 cygwin을 써야합니다.
https://github.com/joyent/node/wiki/Building-node.js-on-Cygwin-%28Windows%29
개인적으로는 무료 소프트웨어인 virtualbox에 우분투 설치를 권장합니다. : )
관련해서는 http://blog.doortts.com/207 하단의 "둘다 설치하기 싫으신 MS윈도우즈 사용자 분들에게..."를 읽어주세요.
MongoDB
MongoDB를 데이터베이스로 쓰려고 합니다. 설치하기도 쉽고 이미 컴파일된 바이너리를 바로 다운받아도 됩니다. http://www.mongodb.org/downloads
sudo mkdir -p /data/db 로 data 파일이 저장될 디렉터리를 만들고, 압축 푼 디렉터리 하위의 bin 디렉터리에서 mongod 라고 실행하면 바로 서버가 기동합니다. 윈도우 사용자의 경우 c:\data\da로 만들면 됩니다. 관련해서는 MongoDB 퀵 스타트 가이드(http://www.mongodb.org/display/DOCS/Quickstart)를
참고하시거나 책을 구매해서 보면 좋습니다. 그리고 잘 찾아보시면 관련 교육도 있습니다. :D
npm (node package manager)
npm은 노드 패키지들을 빠르고 쉽게 관리할 수 있게 도와줍니다. (패키지 관리자쯤 되는거죠? 필요한 모듈을 자동으로 다운로드 받아서
설치까지 해줍니다.) 추천하는 설치방법은 스크립트를 다운로드 받아서
npm 인스톨 명령어를 수행하는 겁니다. 단 쓰기 권한이 있는 데서 실행하세요.
만약 본인 PC에 설치하고자 한다면..
Mac / Ubuntu
sudo chown -R $USER /usr/local
curl http://npmjs.org/install.sh > install.sh
sudo sh install.sh
관련 패키지들 (Packages)
npm install express mongoose jade less expresso
다운로드 해서 설치까지 시간이 조금 걸리니까 침착하게 기다립니다.
만약 express가 설치가 안되었다면 아래 명령어로 다시 설치합니다.
npm install -g express
* 경우에 따라서는 권한이 부족해서 실행 안될수 있습니다. 이럴때는 sudo npm install -g express로 실행하시면 됩니다.
기본적인
Express 앱 with MongoDB
mongod로 서버 기동
예)
~/dev/mongodb/bin 에서
./mongod
몽고DB를 띄우면 사용하는 포트가 표시될 겁니다. 기본은 27017입니다.
mongoose 에서 쓸 거니 까 잘 적어두세요.
Express는 앱 작성을 위한 커맨드라인 유틸리티를 제공합니다. 적당한 디렉터리로 이동한 다음, 스켈레톤 앱을 생성하기 위해 다음과 같이 타이핑합니다.
express nodepad
|
express nodepad
create : nodepad
create : nodepad/package.json
create : nodepad/app.js
create : nodepad/views
create : nodepad/views/layout.jade
create : nodepad/views/index.jade
create : nodepad/public/javascripts
create : nodepad/public/images
create : nodepad/public/stylesheets
create : nodepad/public/stylesheets/style.css |
자. 그럼 nodepad 폴더로
들어가서 아래와 같이 타이핑 해 봅시다.
node app.js
실행결과
|
Express server listening on port 3000 in
development mode |
이제 웹브라우저로 http://localhost:3000에
접속해 보세요.
뼈대코드 분석(Skeleton Analysis)
|
/** *
Module dependencies. */ var express = require('express'); var app = module.exports =
express.createServer(); |
Express는 최근 많이 변했습니다. 그러니 옛날 튜터리얼을 볼 때 유의하세요. API가 많이 다릅니다. 첫 릴리즈 이후 미들 레이어에 해당하는 connect가 추가되었습니다. connect는 특정 HTTP 스택 전체와 웹 프레임워크를 교체
가능하게 만들어 줍니다. 설정도 많이 바뀌었습니다. (뭐?? 어쩌라구!!)
코드는 아래와 같이 보일겁니다.
|
app.configure(function() {
app.set('views', __dirname + '/views');
app.use(express.bodyDecoder());
app.use(express.methodOverride());
app.use(express.compiler({ src: __dirname + '/public', enable:
['less'] }));
app.use(app.router);
app.use(express.staticProvider(__dirname + '/public')); }); |
기본적으로 Express 앱은 배우 간단합니다. view 경로가 지정된걸 유의 깊게 보세요. 스태틱 파일 핸들러가
staticProvider. express.bodyDecoder 로 설정되어 있습니다. 이 부분은 application/x-www-form-urlencoded로
디코딩 됩니다. 이를테면 form 으로 말입니다. methodOverride 미들웨어는 Express앱이 RESTful 앱처럼 동작하게 만듭니다. PUT 같은 HTTP 메소드들으을 hidden input을 통해 사용할 수 있게
됩니다. 이렇게 하는 것이 좋은 생각인지에 대해서는 아직 많은 논쟁이 있고, Holowaychuk이 이 부분을 선택 옵션으로 만든 것도 그 때문일 겁니다.
|
옮긴이 주- 실제 최근 버전에서는 아래와 같은 코드가 생성됩니다. app.configure(function(){
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(__dirname + '/public')); }); View 엔진으로 jade라는
것이 설정되어 있는 부분이 조금 다릅니다만, 이에 대해서는 아래에서 좀 더 설명하겠습니다. |
앱의 주요 몸통부는 jade 템플릿을 사용해 HTML로 만들었습니다. (옮긴이 주: 현재는 jade 템플릿 엔진사용 선언을 configure에서 지정하는 대신 app.get에서는 따로 지정하지
않습니다. 한 번 실제로 따라해 보시면 아! 하실 겁니다. :)
|
app.get('/', function(req, res){
res.render('index', {
title: 'Express'
}); }); |
메소드 호출은 route에 정의되어 있고 HTTP문법 GET과 / 를
따릅니다. 다시 말하자면, 이 작은 코드 덩어리는 POST의 / 에는 응답할 수 없다는 뜻입니다. 마지막 몇 라인이 흥미로운데요, 해당 앱이 탑 레벨 모듈로 동작하는지
여부를 실제로 체크하기 때문입니다.
|
if (!module.parent) {
app.listen(3000);
console.log("Express server listening on port %d",
app.address().port) } |
다시 한번 말하지만, 이건 테스트를 쉽게 하려고 만든 거니까 괴상하게 보여도 걱정하진 마세요.
(옮긴이 주: 현재 코드에서는 parent를 확인하는 코드가 없어져서 더 깔끔합니다)
MongoDB연결하기 (Connecting Up MongoDB)
Mongoose는 MongoDB의 컬렉션(collection)을 간단한 클래스로 편리하게 감쌀 수 있습니다. 우선 라이브러리를 읽어 들이고, 그 다음엔 데이터베이스 인스턴스와 커넥션을 맺어야 합니다.
|
var mongoose = require('mongoose'); mongoose.connect('mongodb://localhost/nodepad'); … (이하생략) |
저는 모델 파일(models.js)을 다음과 같이 만들었습니다.
|
var mongoose = require('mongoose'); //스키마 정의 (어쨌든 DB니까 데이터 모델링이 필요합니다) var Schema = mongoose.Schema,
ObjectId = Schema.ObjectId; //사용할 문서 정의 Document = new Schema({
properties: ['title', 'data', 'tags'],
indexes: [
'title' ] }); // 몽구스에게 만들어진 문서 알려주기 mongoose.model('Document', Document); exports.Document = function(db) {
return db.model('Document'); //
‘Document’라는 문서모델에 접근한다. }; |
(옮긴이 주- 몽구스 사용방법은 뒤에서도 계속 나오니까 지금은 우선 skip 합니다.)
모델들을 다음과 같이 app.js내에서 사용할 수 있습니다.
Document = require('./models.js').Document(db);
데이터베이스 인스턴스가 전달되면 db.model 은 mongoose.model('Document', ...)선언에 근거해서 모델 인스턴스를 리턴할 겁니다. 저는 모델들을 각자의 파일로 만들어 넣는 것이 Mongoose가 좀 더 확실하게 동작하게 만들고 애플리케이션의 컨트롤러 코드를 따르기 쉽게 만든다고 생각합니다.
템플릿들(The Templates)
코드 생성기는 기본적으로 Jade (Node의 템플릿 엔진, http://jade-lang.com/)를 사용하고 다음과 같은 템플릿을 만들어냅니다.
|
h1= title p Welcome to #{title} |
jade 예제
jade 템플릿 |
변환된 HTML코드 |
!!! 5 html(lang="en") head title= pageTitle script(type='text/javascript') if (foo) { bar() } body h1 Jade - node template engine #container - if (youAreUsingJade) p You are amazing - else p Get on it! |
<!DOCTYPE html> <html lang="en"> <head> <title>Jade</title> <script type="text/javascript"> if (foo) { bar() } </script> </head> <body> <h1>Jade - node template engine</h1> <div id="container"> <p>You are amazing</p> </div> </body> </html> |
Haml?
Haml은 Rails앱에서 view를 만들어내는 도구입니다. 관련해서는 http://haml-lang.com/ 를 참조하세요.혹은 http://aproxacs.springnote.com/pages/1019962 에서 한국어로 된 설명을 볼 수 있습니다. 다음은HAML 코드 샘플입니다.
#profile
.left.column
#date= print_date
#address= current_user.address
.right.column
#email= current_user.email
#bio= current_user.bio
위와 같은 코드를 아래처럼 만들어 준다는 군요.
<div id="profile">
<div class="left column">
<div id="date"><%= print_date %></div>
<div id="address"><%= current_user.address %></div>
</div>
<div class="right column">
<div id="email"><%= current_user.email %></div>
<div id="bio"><%= current_user.bio %></div>
</div>
</div>
만약 플레인 HTML 템플릿을 좋아한다면, 대안으로 ejs를 사용할 수도 있습니다.
임베디드 자바스크립트. EJS는 데이터와 템플릿을 조합해서 HTML을 만들어 냅니다. 샘플예제는 위 링크를 참조하세요. : )
테스트 실행하기(Running Tests)
Express는 테스트 뼈대도 만들어 줍니다. 테스트는 expresso라고 치면 실행됩니다.
작업 소스코드 얻기
작업한 코드는 https://github.com/alexyoung/nodepad 에서 얻을 수 있습니다.
결론
이제 기본이 되는 Node 개발환경을 npm, mongodb와 설치하는 것에 편해져야 합니다. Express 앱
뼈대를 갖고 있고 어떻게 동작하고 Expresso 테스트를 어떻게 실행해야 하는지 알게 되었습니다. 다음 파트에서는 앱에 살을 좀 붙여보겠습니다.
휴우~ 고생많으셨습니다. 정신 하나도 없으시죠?
중간중간 관련되서 도움되는 글들도 올리고 오프라인 모임도 때때로 할 예정이니까 넘 걱정하진 마세요~
자! 그럼 질문이 있으시거나, 실습 다 마치신 분들은 댓글 남기시면 되겠습니다!
'node.js (OctoberSkyJs)' 카테고리의 다른 글
| [Node.js 따라배우기] 그래서, Node.js는 무엇인가? (3) | 2011.11.02 |
|---|---|
| [Node.js 따라배우기] Node.js TDD 프레임워크 Expresso 매뉴얼 번역 (0) | 2011.11.01 |
| Social Study - node.js 소개 동영상 함께 보기 후기 (1) | 2011.10.30 |
| [node.js 따라배우기 01] Webapp을 만들어 봅시다! : 노드패드(Nodepad) (6) | 2011.10.28 |
| [node.js 따라배우기 00] 온라인 스터디 오리엔테이션 (14) | 2011.10.26 |
