템플릿 엔진 사용하기
템플릿 엔진 사용하기 (Using Template Engines)
템플릿 엔진을 쓰면 애플리케이션에서 정적 템플릿 파일을 사용할 수 있어요. 런타임에 템플릿 엔진이 템플릿 파일의 변수를 실제 값으로 치환하고, 템플릿을 클라이언트로 보내는 HTML 파일로 변환해 줘요. 이 방식 덕분에 HTML 페이지를 훨씬 쉽게 설계할 수 있지요.
템플릿 엔진 설정
Express 애플리케이션 생성기는 기본 템플릿으로 Pug를 사용하지만, hbs나 EJS처럼 Handlebars와 호환되는 엔진용 앱도 만들 수 있어요.
생성기로 만든 앱은 생성된 app.js에 다음 설정이 추가돼요. 생성기를 쓰지 않고 직접 앱을 만든다면 다음 애플리케이션 설정 속성을 직접 지정해야 해요:
views— 템플릿 파일이 있는 디렉토리. 예:app.set('views', './views'). 기본값은 애플리케이션 루트 디렉토리의views디렉토리예요.view engine— 사용할 템플릿 엔진. 예를 들어 Pug를 쓰려면app.set('view engine', 'pug')로 지정해요.
그 다음 해당 Express 호환 템플릿 엔진 npm 패키지를 설치해요. Pug 설치 예시:
npm install pug --save
Express 호환 템플릿 엔진(Pug 등)은 __express(filePath, options, callback)라는 함수를 내보내는데, res.render()가 이 함수를 호출해 템플릿 코드를 렌더링해요. 이 규칙을 따르지 않는 엔진도 있는데, @ladjs/consolidate 라이브러리가 인기 있는 Node.js 템플릿 엔진들을 매핑해 이 규칙을 따르므로 Express 안에서 매끄럽게 동작해요.
app.set('view engine', 'pug');
뷰 엔진을 설정하면 앱에서 엔진을 지정하거나 템플릿 엔진 모듈을 로드할 필요가 없어요. Express가 내부적으로 로드하기 때문이에요.
템플릿 렌더링
views 디렉토리에 index.pug라는 템플릿 파일을 만들고, 그 파일을 렌더링하는 라우트를 정의해요. view engine 속성이 설정되어 있지 않다면 view 파일의 확장자를 지정해야 하고, 설정되어 있다면 생략할 수 있어요.
app.get('/', (req, res) => {
res.render('index', { title: 'Hey', message: 'Hello there!' });
});
홈 페이지로 요청을 보내면 index.pug 파일이 HTML로 렌더링돼요.
주의할 점이 하나 있어요. 뷰 엔진 캐시는 템플릿의 출력 결과가 아니라 기본 템플릿 자체만 캐시해요. 캐시가 켜져 있어도 뷰는 매 요청마다 다시 렌더링돼요.