npm install express-handlebar 정상 설치 방법 및 view templating engine language

 

 

 

npm view engine 종류 및 설치방법 handlebar

 

handlebar란

simple templating language 이다.

express 프레임워크에서 지원하는 view 쪽 code 작성 언어이다. 

templating language 1위 언어이다.

 

https://handlebarsjs.com/

Handlebars

 

OReilly Web Development with Node & Express 한 권으로 끝내는 Node & Expres 2판 에서 추천하는 view 엔진인 handlebars는 hbs 옵션으로 설치해야한다

 

책에서 처럼 npm install express-handlebar 설치 후 error 에러가 나서 MODULE_NOT_FOUND 해결 방법을 찾느라 고생했다. 

 

express 명령어의 옵션을 잘 읽어보고 설치해야한다.

 

express 명령어의 옵션

$ express -h

  Usage: express [options][dir]

  Options:

    -h, --help          output usage information
        --version       output the version number
    -e, --ejs           add ejs engine support
        --hbs           add handlebars engine support
        --pug           add pug engine support
    -H, --hogan         add hogan.js engine support
        --no-view       generate without view engine
    -v, --view engine add view engine support (ejs|hbs|hjs|jade|pug|twig|vash) (defaults to jade)
    -c, --css engine  add stylesheet engine support (less|stylus|compass|sass) (defaults to plain css)
        --git           add .gitignore
    -f, --force         force on non-empty directory

 

 

Handlebars 정상설치 방법 및 명령어

express --view=hbs myapp

 

Handlebars 정상설치 확인 방법

아래처럼 작업 폴더에 views 하위에 error.hbs index.hbs layout.hbs 파일들이 존재한다면 정상설치 된 것이다. 

 

   create : expressToDo\views\
   create : expressToDo\views\error.hbs
   create : expressToDo\views\index.hbs
   create : expressToDo\views\layout.hbs

 

만약 정상적으로 설치 안된 경우 package.json 파일에 정상적으로 설치 되지 않은 무엇가가 존재할 수 있다. 

무엇이 잘못된 것인지 express 디렉토리 구조를 잘 파악해 보자.

 

express view engine 지원 언어들

 

-v 옵션에서 지원하는 view 언어를 확인할 수 있다. 

이들 view 관련된 언어들은 Template engine 언어들이다. 

즉 HTML을 쉽고 편하게 작성할 수 있도록 해주는 언어들이다.

 

express에서 제공하는 기본 Template engine 언어들의 간략한 내용

 

ejs : Embedded JavaScript 즉 자바스크립트가 내장되어 있는 html 파일이다.

hbs Handlebar의 약자 simple templating language 이다 베스트 10 템플릿 엔진 1위

hjs 

jade Pug의 전신으로 베스트 10 템플릿 엔진의 7위

pug Haml에서 영감을 받은 템플릿 엔진(이전 Jade).

twig Node.js용 1급 Twig 엔진

vash Razor Syntax를 사용하는 템플릿 보기 엔진 ASP.Net MVC 구조에 경험이 있는 사람에게 친숙