Installing Handlebars
•
Handlebars를 사용하기 위해서, 별도의 Import가 필요하다. const expressHbs = require(''express-handlebars')와 같이 선언하여 이용한다.
•
그리고 express()을 app에 할당하고 난 뒤, 사용할 app의 engine에 대해서 명시해야 한다. 또한 그 인자로 명시한 인자의 Instance를 넘겨줘야 한다. 따라서 engine()이라는 Method를 이용하고, app.engine('hbs', expressHbs())로 명시하여 사용한다.
•
이후에 Pug에서 했던 것과 마찬가지로, set() Method를 통해서 view engine과 views에 대해서 명시한다.
Handlebars Features
•
Handlebars는 분기문이나 반복문을 이용 시, 변수를 이용했던 것과 마찬가지로 {{}}를 이용한다. 단, 다른 점이라 함은 분기문이나 반복문 처럼 특정 {} 범위의 블록을 갖는 구문들에 대해서는 #태그를 {{}}에 추가하여 사용한다. (else와 같이 따라 붙는 구문에 대해서는 # 처리를 하지 않는다.)
•
또한 if문 같은 경우, if문을 다 작성하였다면 {{/if}}와 같이 닫아주어야 한다.
•
Handlebars에서는 분기문을 이용할 때, 수식을 이용한 True/False 판별에는 많은 어려움이 있다. 오로지 True/False 값을 갖는 변수로만 분기문 이용이 가능하다.
•
Handlebars에서의 반복문 역시 each문으로 돌리게 된다. 이 때 Pug처럼 each in 구문이 아니기 때문에 Iteration을 돌리는 특정 변수로 구문 활용이 불가능 하고, 오로지 'this' 키워드를 통해서 구문 활용이 가능하다. (예를 들면 product.title과 같이 Pug에서 이용했다면, Handlebars에서는 this.title로만 이용 가능하다.)
** 개인적으로 블록 구문에 대해서 열고 닫는 것, 분기문에서 True/False 검증에 수식을 못 쓰는 것을 고려했을 때, Pug보다 불편한 것 같다.
Handlebars Layouts
•
Pug에서는 Layout이 이용하고 싶었다면 Layout을 정의한 뒤, Layout을 이용할 파일에서 extends를 했었지만, Handlebars에서 Layout이 이용하고 싶다면 engine으로 Handlebars를 설정할 때 app.engine('hbs', expressHbs())와 같이 선언한 expressHbs()의 인자로 설정 값을 주어야 이용할 수 있다.
•
app.engine('hbs', expressHbs({layoutsDir: 'views/layouts/', defaultLayout: 'main-layout'})) 와 같이 할당하면 된다.
•
Handlebars에서는 Pug가 block을 사용했던 것과 같은 기법이 사용 불가능이다. 따라서 특별한 기법이 필요한데 Handlebars에서 일반적으로 사용하는 Double Curly Braces를 사용하는 것이 아니라 {{{}}}와 같이 Triple Curly Braces를 사용한다. 이렇게 정의한 Triple Curly Braces에는 Content들이 들어가게 된다.
•
그렇다면 css파일과 같은 Styler들은 Pug의 block을 이용하지 않고 어떻게 처리하는가? → if 문을 이용하여 처리하게 된다. (참 그지같고, 보면 볼 수록 HTML 보다 맘에 안 든다.. Layout Template인데 코드가 더 많아지는 느낌도 들어서 그지 같다.)
•
조건 연산자를 이용한 동적인 처리 역시 Double Curly Braces를 이용하여 나타낸다. (또 그냥 단순 무식하게 쓰면 되는 조건 들이라, 아무 생각 없이 하기도 좋아보이지만 넘겨 받는 인자가 너무 많아져서 그만큼 귀찮을 거 같다.) → 건내지 않은 Parameter에 대해서는 False로 처리하게 된다.
•
Layout 파일에 대해서는 engine을 설정할 때 썼던 파일명이 먹지 않는다. Default 값은 handlebars여서 확장자 명이 이와 같으면 상관 없는데, 기본 확장자 명과 다르면 Layout을 설정할 때 layoutsDir, defaultLayout을 설정 했던 곳에서 extname도 설정을 해줘야 한다. (여러모로 그지 같다.)