Backend/express
[express] 뷰 엔진, 핸들바(handlebars) 설치 및 적용하기
민57
2022. 7. 25. 09:01
익스프레스는 여러 가지 뷰 엔진을 지원한다.
보통은 퍼그(Pug)라는 뷰 엔진이 유명한데, 템플릿 자체가 HTML처럼 보이지는 않는다.
나는 퍼그로 처음 설치를 진행했었다가 결국엔 포기했다 :)
너무 추상화 된 기능이라 html에 익숙하지 않은 나는 코드 작성이 더뎌졌기 때문이다.
적용하면 빠르게 작성 가능할 지 몰라도... node 연습 중인 나에게 뷰 코드에
온전히 시간을 쏟을 순 없으니...
대신 조금 더 HTML과 가까운 핸들바를 이용.
설치방법
npm install express-handlebars@3
npm으로 간편하게 설치할 수 있다.
버전 같은 경우는 맞는 버전으로 편하게 설정하자.
설치가 끝난 후
package.json 내에 "express-handlebars"가 추가 되었으면 성공!
뷰 엔진 기본값 적용
// app.js
const express = require('express')
const expressHandlebars = require('express-handlebars')
const app = express()
app.engine('handlebars', expressHandlebars({ // 뷰 엔진, 핸들바 인스턴스 생성
defaultLayout: 'main' // 기본값 설정
}))
app.set('view engine', 'handlebars')
html에 핸들바 적용하기
<!-- views/layouts/main.html -->
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
{{{body}}}
</body>
</html><!-- views/home.handlebars -->
<h1>Hello Express Handlebars</h1>
핸들바 파일안에는 실제 화면에 뿌려질 코드 부분만 작성.
예시로 h1 태그를 이용해 문자를 표현해 보겠다.
라우트 설정으로 뷰 사용하기
const express = require('express')
const expressHandlebars = require('express-handlebars')
const app = express()
app.engine('handlebars', expressHandlebars({
defaultLayout: 'main'
}))
app.set('view engine', 'handlebars')
app.get('/', (req, res) => res.render('home'))
서버를 재시작하고 메인 페이지(localhost:3000/)를 가면 뷰가 렌더링된 모습을 볼 수 있다.
main.handlebars 에 작성한 HTML이 그대로 사용되는 것을 확인할 수 있다.
728x90