jade 라고 불리는 HTML 엔진입니다. 위 처럼 써주면 대응되는 HTML 코드로 바꾸어 줍니다. 자세한 것은 따로 공부를 하시면 됩니다. (저도 뭐 HTML 은 고수가 아니라서..)
extends layout 이라는 것은 layout.jade 로 부터 확장한다는 뜻입니다. 기초적인 설정은 전부 그곳에 있다고 해도 과언이 아니겠지요?
$ emacs ~/work/blog/views/layout.jade
로 열어줍니다.
body 부분에 쓰여져 있는 block content 가 index.jade 의 block content 와 대응되리라는 것을 쉽게 알 수가 있습니다. (응?..)
8. jade 파일이 준비가 됐다면 app.js 에서 바꾸어 줄 필요가 있습니다.
여기서 res.send 는 기본적인 내용을 전달하는 것이므로 (그래서 json 기반의 app 서버 작성시 편합니다) 렌더링 해주는 함수로 변경해줘야 합니다. 위 내용을
index.jade 를 기본으로 삼되, title 에는 'Blog' 값을 넘기고 , articles 에는 docs 를 넘기라는 내용입니다.
9. 이쁘장 (?) 하게 바꾸어줄 시간입니다. (It's CSS Time!!)
귀찮으니까 나중에 쓸 내용까지 전부 CSS 로 밀어 넣기로 합니다. 참 이 내용은 stylus 라는 라이브러리를 이용합니다.
$ emacs ~/work/blog/public/stylesheets/style.styl
인덴테이션이 중요합니다. 이 파일을 작성하면 이 파일에서 style.css 를 자동으로 생성하는 것 같습니다. (자세히는 모르겠음..)
10. 새로 글 작성하는 기능을 추가해 보겠습니다. MVC 모델에 따라서 , M 은 이미 작성되어 있고 (articleprovider-memory.js) 로 , V 에 해당하는 부분을 작성해 줍니다.
$ emacs ~/work/blog/views/blog_new.jade
음.. 암호 같지요? 저한테도 암호 같습니다. 당분간 외워서 하는 수밖에 없을 듯합니다.
11. 10 에 대응되는 C (controller) 부분을 추가해 줍니다. 2개의 라우팅 부분을 추가해 줍니다.
$ emacs ~/work/blog/app.js
app.get 은 GET 방식 , app.post 는 POST 방식입니다. app.get 방식으로 '/blog/new' 로 브라우져에서 접속하면 blog_new.jade 를 렌더링 하고 , 그 렌더링 페이지에서 내용을 입력하고 Send 버튼을 클릭하면 articleProvider.save 함수를 호출하고 res.redirect 함수로 '/' 에 돌아간다는 내용입니다. http://localhost:3000/blog/new 로 이동해서 테스트 해보기 바랍니다.
12. 이제 mongodb 를 붙일 시간입니다. 지금까지 만들어온 메모리 버젼은 소스 변경하면 (nodemon 이 알아서 app.js 를 재구동하니..) 작성하고 테스트 한 내용이 날라가버립니다. 그런 귀찮음을 제거하고자 mongodb 를 연동하는 것입니다.
$ emacs ~/work/blog/package.json
에 위와 같이 "mongodb": "*" 를 추가해 주고
$ cd ~/work/blog
$ npm install -d
를 실행 합니다.
13. 이제 mongodb 와 연결해서 포스트 관리해 주는 articleprovider-mongodb 를 제작할 시간입니다.
$ cd ~/work/blog
$ emacs articleprovider-mongodb.js
14. memory 에서 articleprovider-mongodb 로 바꼈기 때문에 연관된 부분을 app.js 에서 수정할 필요가 있습니다.
$ cd ~/work/blog
$ emacs app.js
아래와 같이 변경 해줍니다.
var ArticleProvider = require('./articleprovider-mongodb').ArticleProvider;
//var ArticleProvider = require('./articleprovider-memory').ArticleProvider;
메모리를 로딩하는 부분을 comment 처리해주고 그 위로 내용을 추가해 줍니다. articleprovider 를 mongodb 기반으로 바꾸어 준다는 내용입니다.
var articleProvider = new ArticleProvider('192.168.0.87', 27017);
// var articleProvider = new ArticleProvider();
이 내용은 192.168.0.87 서버에 mongodb 가 띄어져 있고 27017 port 로 접속한다는 이야기 입니다. 제 경우는 머신이 두대 있을 경우에 쓰는 방법이고 대부분 한 서버에서 같이 동작시킬 때는 192.168.0.87 대신 localhost 라고 입력해 주시면 됩니다.
또 저와같이 다른 머신에 mongodb 데몬을 띄워논 경우에는 그 머신의 mongodb.conf 파일을 열어서 bind_ip 부분을 comment 처리 하거나
으로 같은 대역대에 있는 접속을 허용하는 식으로 변경해 주어야 외부에서 접속이 됩니다. 물론 내부는 세팅해 줄 필요가 없습니다. mongodb.conf 파일은 ubuntu 경우에는 /etc/mongodb.conf 에 존재합니다.
15. index 페이지에서 개별 개별 포스트를 클릭했을 때 , 내용을 상세하게 보여주는 페이지 부분에 대한 작성 입니다.
먼저 V (views) 부분에 대한 처리입니다.
$ emacs ~/work/blog/views/blog_show.jade
jade 는 꼭 시간을 들여서 익히셔야 합니다. (저도..) 웹 개발이 빨라집니다.
16. index 페이지에서 개별 개별 포스트를 클릭했을 때 , C (controller) 에 해당하는 라우팅 하는 부분을 app.js 에 추가해줍니다.
$ emacs ~/work/blog/app.js
17. 이제 개별 Post 에 댓글 기능을 추가해 보겠습니다. 16 에서 열어둔 파일에 마저 작업을 해 줍니다. POST 방식으로 댓글을 Post 에 추가하는 로직입니다.
$ emacs ~/work/blog/app.js
을 추가해 줍니다. View 에 해당하는 것은 언제 추가해 주냐고요? 15 에서 추가해 줬습니다. 자 이제 모든 것이 완성 됐습니다. http://localhost:3000 에서 확인해 주시기 바랍니다.
$ cd ~/work
$ git clone git://github.com/crazia/nodejs-mongodb.git
$ cd nodejs-mongodb
$ npm install -d
$ node app.js
하시면 쉽게 완성된 형태를 따라하실 수 있습니다.