Node.js + Express + Handlebars 프로젝트 생성하기

지난번에는 node와 express-generator 를 통해서 프로젝트를 손쉽게 생성할 수 있는 방법을 알아보았습니다. 이번에도 지난번과 마찬가지지만 view 를 설정해보도록 하겠습니다.

express 로 프로젝트를 생성할 때 --view 를 설정하지 않으면 자동으로 view 는 jade로 설정이 됩니다. 

D:\_project\nodejs>express YourProject

  warning: the default view engine will not be jade in future releases
  warning: use `--view=jade' or `--help' for additional options


   create : YourProject\
   create : YourProject\public\
   create : YourProject\public\javascripts\
   create : YourProject\public\images\
   create : YourProject\public\stylesheets\
   create : YourProject\public\stylesheets\style.css
   create : YourProject\routes\
   create : YourProject\routes\index.js
   create : YourProject\routes\users.js
   create : YourProject\views\
   create : YourProject\views\error.jade
   create : YourProject\views\index.jade
   create : YourProject\views\layout.jade
   create : YourProject\app.js
   create : YourProject\package.json
   create : YourProject\bin\
   create : YourProject\bin\www

   change directory:
     > cd YourProject

   install dependencies:
     > npm install

   run the app:
     > SET DEBUG=yourproject:* & npm start


D:\_project\nodejs>

jade가 뭐냐구요?? 저도 그냥 Template Engine 인것으로만 알고 있습니다. 백문이불여일견이라고 어떻게 생겼나 확인만 해봅시다. 생성된 프로젝트의 폴더중에 views 가 있습니다. 여기에 error.jade, index.jade, layout.jade 가 있습니다. Atom 에디터로 보니 귀여운 시뻘건 토끼 아이콘을 가지고 있군요.

저는 index.jade 를 열어봤는데.. 그 동안 템플릿 엔진이라고는 Bootstrap 밖에 써본적이 없는 저에겐 jade 내용은 가히 충격적이었습니다. jade 홈페이지에 보니 html 과 jade 를 비교한 내용이 있네요.

일단 생긴걸로 봐서는 jade 로 퍼블리싱된 파일을 받지 않는 이상은 퍼블리셔와의 협업이 아주 어려울 것 같습니다.

프론트단의 템플릿 엔진으로는 여러가지가 있겠지만 저는 handlebars(핸들바스)에 눈길이 가더군요. 생긴걸로 봐서는 html 이라서 이질감이 없습니다. 그리고 무엇보다도 bootstrap 템플릿을 사용할 수 있습니다. 쿠헬헬

node와 express와 함께 템플릿 엔진으로 핸들바스를 사용해보도록 하겠습니다. 일단 위에서 생성한 YourProject 는 제끼고 MyProject 로 다시 한 번 만들어보겠습니다.

express MyProject --view=hbs

D:\_project\nodejs>express MyProject --view=hbs

   create : MyProject\
   create : MyProject\public\
   create : MyProject\public\javascripts\
   create : MyProject\public\images\
   create : MyProject\public\stylesheets\
   create : MyProject\public\stylesheets\style.css
   create : MyProject\routes\
   create : MyProject\routes\index.js
   create : MyProject\routes\users.js
   create : MyProject\views\
   create : MyProject\views\error.hbs
   create : MyProject\views\index.hbs
   create : MyProject\views\layout.hbs
   create : MyProject\app.js
   create : MyProject\package.json
   create : MyProject\bin\
   create : MyProject\bin\www

   change directory:
     > cd MyProject

   install dependencies:
     > npm install

   run the app:
     > SET DEBUG=myproject:* & npm start


D:\_project\nodejs>

이번에는 views 폴더 아래에 hbs 확장자를 가진 파일들이 만들어지는군요. 아래의 화면처럼 아이콘도 화려하고 멋진 콧수염이네요. 생긴것도 익숙합니다. ㅋㅋㅋ

프로젝트의 폴더로 가서 cmd 창을 연 다음 명령어를 실행하여 필요한 것들을 자동으로 설치해줍시다.

npm install

그런다음 npm 으로 express-handlebars 도 설치해줍시다.

npm install express-handlebars --save

handlebars 에 대한 자세한 정보는 아래 핸들바스 홈페이지에서 확인 가능합니다.

# 핸들바스 홈페이지
	https://handlebarsjs.com/

다음번에는 bootstrap 템플릿 한 개 잡아서 실전으로 돌입해보도록 하겠습니다.