✏️ Handlebars
- handlebars 는 균형이 잘 잡힌 템플릿 엔진에 속한다고 한다.
- 프론트엔드와 백엔드 양쪽에서 자바스크립트와 쉽게 통합이 가능하다.
- 개인적으로 html 의 괄호 방식이 너무 불편해서 나한테는 pug 가 더 잘 맞는 것 같지만 프론트 개발자의 접근성이 쉬워 더 범용성이 있는 handlebars 를 선택했다.
📍 setting
- 아래 명령어로 설치할 수 있다.
npm install express-handlebars- 아래 미들웨어를 추가해 모듈을 연결할 수 있다.
const { engine } = require('express-handlebars');
//-- view setting --//
app.engine('handlebars', engine({
defaultLayout: 'main',
}));
app.set("view engine", "handlebars");- 위와같이 설정하면
views디렉토리에 저장된.handlebars라는 확장자를 가진 파일을 rendering 할 수 있는데,
확장자가 너무 길어서 불편할 땐 아래와 같이 미들웨어 설정을 수정해주면 된다.
const { engine } = require('express-handlebars');
//-- view setting --//
app.engine('.hbs', engine({
extname: '.hbs',
defaultLayout: 'main',
helpers: {
section: function (name, options) {
if (!this._sections) this._sections = {}
this._sections[name] = options.fn(this)
return null
},
},
}));
app.set('view engine', '.hbs');✏️ 적용하기
📍 layout 만들기
- 아래 경로로 base 레이아웃을 만들어줬다.
- src/views/layouts/main.hbs
{{{body}}}부분에 템플릿 조각이 들어가게 된다.- 중괄호가 두 개
{{}}라면 이스케이프를 하겠다는 의미고,
세 개 라면{{{}}}이스케이프를 하지 않는다는 의미이다. - body 에 들어올 템플릿 조각은 html 이므로 이스케이프를 하면 안되기 때문에 세 개의 중괄호를 사용해야 한다.
- 중괄호가 두 개
<!doctype html>
<html>
<head>
<title>Meadowlark Travel</title>
<img src="/img/logo.png" alt="Meadowlark Travel logo">
</head>
<body>
{{{body}}}
</body>
</html>- 템플릿 조각은 별도의 설정없이 작성해도 레이아웃이 자동으로 적용된다.
- 미들웨어를 설정할 때
defaultLayout속성에 레이아웃 파일을 명시했기 때문에 가능하다.
- 미들웨어를 설정할 때
<h1>About Meadowlark Travel</h1>📍 defaultLayout 외의 레이아웃 사용법
- defaultLayout 을 null 로 설정했거나, 설정한 레이아웃 외의 다른 레이아웃을 사용하려면 response 를 랜더링 할 때 레이아웃을 지정해주면 된다.
res.render('another', { layout: 'theOther' }
잘못된 내용 PR 환영