express view engine인 express-handlebar 설치와 세팅
서버 사이드에서는 MVC 패러다임이 중요하다.
M: model
V: view
C: controller
express에서는 여러 뷰 엔진을 지원하는데 크게 pug, handlebar를 사용하게 되는데 HTML에 익숙하다면 handlebar를 사용하는 것도 나쁘지 않다.
yarn add express-handlebar를 설치하고
// server.js
const express = require('express')
const expressHandlebars = require('express-handlebars')
const app = express()
app.engine('handlebars',expressHandlebars({
defaultLayout:'main',
}))
app.set('view engine','handlebars')
핸들바의 쓰임 = 웹 페이지 레이아웃의 생성
한 홈페이지에서 화면이 전환되어도 변하지 않는 부분이 있기 마련이다.
그 부분을 페이지마다 계속 삽입하는 것은 DRY하지 못하다.
따라서 변하지 않는 부분을 묶어 놓고 변하는 부분만을 변경하자는것은 당연하다.
root directory에 views/layouts/main.handlebars 파일을 생성한다.
<!--main.handlebars-->
<!doctype html>
...
<body>
{{{body}}}
</body>
...{{{body}}}는 이 표현식은 각 뷰에서 HTML로 바뀌게 된다.(layout을 제외한 변하는 부분이 해당 위치에 삽입된다.)
위 server.js에서 app.engine('handlebars', expressHandlebars({defaultlayout:'main'}))를 선언하였는데,
main은 위에서 작성한 main.handlebars라는 handlebars라는 확장자를 가진 파일을 선택한 것이고 별다른 말이 없으면 이 템플릿 파일을 모든 뷰의 레이아웃으로 사용하겠다는 것이다.
이 블로그의 글은 제 생각을 정리한 글과 인터넷 어딘가에서 배운 것을 정리한 글입니다. 출처는 되도록 남기도록 하겠습니다. 수정 및 건의 오류 등이 있으면 언제든지 댓글 부탁드립니다.