안녕하세요. 혀코입니다.
오늘은 Node.js에서 hbs외장모듈 사용하는 방법에 대해서 알아보겠습니다.
hbs 외장 모듈은 템플릿을 정의하는 handlebar.js의 express.js view engine입니다.
hbs를 사용해서 html의 반복되는 구성요소를 분리해서 만들어두고 필요한 곳에서 사용할 수 있게 만들 수 있습니다.
hbs는 handlebar.js의 epxress.js view engine 이므로, express를 설치후에 hbs를 설치하도록 합니다.
$ npm install express
$ npm install hbs
프로젝트 루트 폴더에서 public 폴더를 만들고 그 안에 index.html 파일을 다음과 같이 작성합니다.
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
<p>Created by Hyukho</p>
</body>
</html>
index.html 파일과 동일한 위치에 about.html 파일을 다음과 같이 작성합니다.
<!DOCTYPE html>
<html>
<head>
<title>About</title>
</head>
<body>
<h1>About</h1>
<p>Created by Hyukho</p>
</body>
</html>
프로젝트 루트 폴더에서 src 폴더를 만들고 app.js파일을 다음과 같이 작성합니다.
const path = require('path')
const express = require('express')
const app = express()
const publicDirectoryPath = path.join(__dirname, '../public')
app.use(express.static(publicDirectoryPath))
app.listen(3000, () => {
console.log('Server is up on port 3000')
})위와 같이 작성한 후에 다음 명령어를 실행하면,
$ node src/app.jshttp://localhost:3000에서 index.html 파일을 확인할 수 있고, http://localhost:3000/about.html에서 about.html 파일을 확인할 수 있습니다.
이제부터 hbs를 사용해서 템플릿을 만들어보겠습니다.
index.html의 코드를 복사해서 루트 디렉토리에 views 폴더를 만들고 그 폴더안에 index.hbs 파일을 만들어 붙여넣기 합니다.
그리고 about.html의 코드를 복사해서 index.hbs 파일과 동일한 위치에 about.hbs 파일을 만들어 붙여넣기 합니다.
그리고 index.html과 about.html 파일을 삭제합니다.
그리고 src/app.js를 다음과 같이 업데이트 합니다.
const path = require('path')
const express = require('express')
const app = express()
const publicDirectoryPath = path.join(__dirname, '../public')
app.set('view engine', 'hbs')
app.use(express.static(publicDirectoryPath))
app.get('', (req, res) => {
res.render('index')
})
app.get('/about', (req, res) => {
res.render('about')
})
app.listen(3000, () => {
console.log('Server is up on port 3000')
})
그다음, node src/app.js 를 실행하면, http://localhost:3000에서 index.html 파일을 확인할 수 있고, http://localhost:3000/about 에서 about.html 파일을 확인할 수 있습니다.
여기까지만 하면, 그 전의 코드보다 더 복잡해지고 더 나은것이 없습니다. hbs를 사용해서 템플릿 변수를 지정해 보겠습니다.
views/index.hbs를 다음과 같이 업데이트 합니다.
<!DOCTYPE html>
<html>
<head>
<title>{{title}}</title>
</head>
<body>
<h1>{{title}}</h1>
<p>Created by {{name}}</p>
</body>
</html>views/about.hbs를 다음과 같이 업데이트 합니다.
<!DOCTYPE html>
<html>
<head>
<title>{{title}}</title>
</head>
<body>
<h1>{{title}}</h1>
<p>Created by {{name}}</p>
</body>
</html>src/app.js를 다음과 같이 업데이트 합니다.
const path = require('path')
const express = require('express')
const app = express()
const publicDirectoryPath = path.join(__dirname, '../public')
app.set('view engine', 'hbs')
app.use(express.static(publicDirectoryPath))
app.get('', (req, res) => {
res.render('index',{
title: 'Hello World',
name: 'Hyukho'
})
})
app.get('/about', (req, res) => {
res.render('about',{
title: 'About Me',
name: 'Hyukho'
})
})
app.listen(3000, () => {
console.log('Server is up on port 3000')
})이렇게 하면 app.js에서 설정한 템플릿 변수가 적용되어 index.hbs와 about.hbs 파일에 적용되어 표시되는 것을 확인할 수 있습니다.
hbs의 경우 views 폴더를 디폴트로 찾기 때문에 반드시 폴더 이름을 views 로 만들어줘야 합니다. 다른 이름으로 설정하려면 아래와 같이 app.js를 업데이트 합니다.
const path = require('path')
const express = require('express')
const app = express()
const publicDirectoryPath = path.join(__dirname, '../public')
const viewPath = path.join(__dirname, '../templates')
app.set('view engine', 'hbs')
app.set('views', viewPath)
app.use(express.static(publicDirectoryPath))
app.get('', (req, res) => {
res.render('index',{
title: 'Hello World',
name: 'Hyukho'
})
})
app.get('/about', (req, res) => {
res.render('about',{
title: 'About Me',
name: 'Hyukho'
})
})
app.listen(3000, () => {
console.log('Server is up on port 3000')
})
이번에는 created by Hyukho 중복되는 부분을 하나의 템플릿으로 묶어 보겠습니다.
index.hbs 파일과 about.hbs 파일을 templates/views/ 폴더로 이동시켜줍니다.
또한 templates 폴더아래에 partials 폴더를 만들어줍니다.
const path = require('path')
const express = require('express')
const hbs = require('hbs')
const app = express()
const publicDirectoryPath = path.join(__dirname, '../public')
const viewPath = path.join(__dirname, '../templates/views')
const partialPath = path.join(__dirname, '../templates/partials')
app.set('view engine', 'hbs')
app.set('views', viewPath)
hbs.registerPartials(partialsPath)
app.use(express.static(publicDirectoryPath))
app.get('', (req, res) => {
res.render('index',{
title: 'Hello World',
name: 'Hyukho'
})
})
app.get('/about', (req, res) => {
res.render('about',{
title: 'About Me',
name: 'Hyukho'
})
})
app.listen(3000, () => {
console.log('Server is up on port 3000')
})그리고 partials 폴더안에 header.hbs 파일을 만들고 다음과 같이 작성합니다.
<h1>{{title}}</h1>
<div>
<a href="/">Home</a>
<a href="/about">About</a>
</div>그리고 partials 폴더안에 footer.hbs 파일을 만들고 다음과 같이 작성합니다.
<p>Created by {{name}}</p>그리고 index.hbs 파일과 about.hbs 파일의 footer의 동일한 부분을 다음과 같이 업데이트 해줍니다.
<!DOCTYPE html>
<html>
<head>
<title>{{title}}</title>
</head>
<body>
<h1>{{title}}</h1>
<p>{{>footer}}</p>
</body>
</html>
그리고 다음 명령어를 사용해서 실행합니다.
$ nodemon src/app.js -e js,hbs이 명령어를 사용하는 이유는 hbs를 변경했을때 서버에 바로 적용하기 위해서 입니다.
결과적으로 다음과 같이 출력할 수 있습니다.
이렇게 Node.js에서 hbs 외장 모듈 사용하는 방법에 대해서 알아봤습니다.
유용하셨다면, 공감과 구독 부탁 드립니다.
감사합니다.
댓글