Handlebars는 Exrepss 와 같은 프레임워크에서 SSR을 위해 사용된다.
또 그 외에도 메일 템플릿을 만들 때 사용할 수 있는데 오늘은 메일 템플릿을 위해 사용할 때 Partial template 사용방법을 기록해두고자 한다.
Partial 은 html, jsx 등에서 import 하는 동작이라고 생각하면 된다.
<html>
{{> header }}
...
{{> footer }}
</html>이와같은 코드가 있을 수 있다. 여기서 header, footer 는 여러 html 에서 다같이 사용하는 공통 템플릿이다.
handlebar 에서는 include 를 > 를 사용해 넣을 수 있다.
header, footer 들의 Partial 을 사용하기 위해서는 우선 코드레벨에서 Partial 등록을 해두어야 한다.
import Handlebars from 'Handlebars';
Handlebars.registerPartial('header', Handlebars.compile(fs.readFileSync(path.resolve(__dirname, 'header.hbs'), 'utf-8')));다른 예제들을 찾아보면 두번 째 param으로 html을 넘겨주는 경우가 있는데.. 이러면 코드 관리가 불편하기때문에 별도의 hbs 파일을 만들고 이렇게 등록해주는게 좋다.
단건으로 예를들면 이렇고, partial 은 보통 한 두 개가 아닐것이므로 이런식으로 처리하기를 추천한다.
import fs from 'fs';
import path from 'path';
import Handlebars from 'handlebars';
const partials: { name: string; path: string }[] = [
{ name: 'header', path: `common/header.hbs` },
{ name: 'footer', path: `common/footer.hbs` },
];
partials.forEach((partial) => {
Handlebars.registerPartial(
partial.name,
Handlebars.compile(fs.readFileSync(path.resolve(__dirname, partial.path), 'utf-8')),
);
});