템플릿 엔진은 자바스크립트를 사용해서 HTML를 렌더링할 수 있게 합니다.
대표적인 템플릿 엔진인 퍼그(Pug) 와 넌적스(Nunjucks) 에 대해 간단히 살펴보겠습니다.
1. 퍼그 (Pug)
먼저 퍼그를 사용하기 위해 퍼그를 설치해줍니다.
npm install pug
익스프레스와 퍼그를 연결해줍니다. views 는 템플릿 파일들이 위치한 폴더를 지정하는 것입니다. view engine 은 어떠한 종류의 템플릿 엔진을 사용할지를 나타냅니다.
// app.js
const express = require('express');
const app = express();
app.set('port', process.env.PORT || 3000);
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');
const indexRouter = require('./routes/index');
app.use('/', indexRouter);
layout.pug 와 index.pug 를 만듭니다.
// layout.pug
doctype html
html
head
title= title
link(rel='stylesheet', href='/style.css')
body
block content
// index.pug
extends layout
block content
h1= title
p Welcome to #{title}퍼그는 HTML과 다르게 <> 와 닫는 태그가 없습니다. 들여쓰기로만 태그의 부모와 자식 관계를 구분합니다. 따라서 들여쓰기에 오류가 있으면 제대로 렌더링되지 않으니 주의해주세요! 서버로부터 받은 변수를 사용하기 위해서는 " #{} or =변수"를 사용합니다. #{} 는 텍스트 중간에 변수를 넣을 때 사용하고, =변수 는 속성일 때 사용합니다. 레이아웃 파일에서 페이지마다 달라지는 부분은 block으로 비워 둡니다. 블럭 파일에서 extends로 레이아웃 파일을 지정하고 block 부분을 넣습니다.
만들어진 퍼그를 렌더링합니다. index.js 파일을 만듭니다. 템플릿 엔진을 렌더링하기 위해서 res.render(템플릿, 변수 객체) 으로 사용합니다. 아래 코드에서 layout.pug 와 index.pug 의 title 부분이 모두 Express로 치환됩니다.
// index.js
const express = require('express');
const router = express.Router();
router.get('/', (req, res) => {
res.render('index', { title: 'Express'})
});
module.exports = router;
콘솔에 app.js 입력한 후 웹페이지를 실행하면 다음과 같은 화면을 볼 수 있습니다.
2. 넌적스 (Nunjucks)
먼저 넌적스를 사용하기 위해 설치해줍니다.
npm install nunjucks
익스프레스와 넌적스를 연결해줍니다. views 는 템플릿 파일들이 위치한 폴더를 지정하는 것입니다. view engine 은 어떠한 종류의 템플릿 엔진을 사용할지를 나타냅니다. 넌적스는 html 확장자 그대로 사용하므로 'html' 로 지정합니다.
// app.js
const express = require('express');
const app = express();
app.set('port', process.env.PORT || 3000);
app.set('view engine', 'html')
nunjucks.configure('views', {
express: app, // app 객체 연결
watch: true, // true - HTML 파일이 변경될 때 템플릿 엔진을 다시 렌더링함
});
const indexRouter = require('./routes/index');
app.use('/', indexRouter);
layout.html 과 index.html 를 만듭니다.
// layout.html
<!DOCTYPE html>
<html>
<head>
<title>{{title}}</title>
<link rel="stylesheet" href="/style.css" />
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>
// index.html
{% extends 'layout.html' %}
{% block content %}
<h1>{{title}}</h1>
<p>Welcome to {{title}}</p>
{% endblock %}넌적스에서 변수는 {{ }} 으로 감쌉니다. 퍼그와 마찬가지로 레이아웃 파일에서 페이지마다 달라지는 부분은 block으로 비워둡니다. block을 선언하는 방법은 {% block 블록명 %} 입니다. {% endblock %} 으로 블록을 종료합니다. 블록 파일에서 레이아웃 파일을 지정할 때는 {% extends 경로 %} 으로 지정합니다.
퍼그와 마찬가지로 만들어진 넌적스 파일을 렌더링합니다. 퍼그의 예시처럼 인자를 주어서 변수에 값을 넘길 수도 있고 다음 코드처럼 res.locals 를 사용하여 변수에 값을 넘길 수도 있습니다. layout.pug 와 index.pug 의 title 부분이 모두 Express로 치환됩니다.
const express = require('express');
const router = express.Router();
router.get('/', (req, res) => {
res.locals.title = 'Express'
res.render('index')
});
module.exports = router;
콘솔에 app.js 입력한 후 웹페이지를 실행하면 다음과 같은 화면을 볼 수 있습니다.
'Back-end > Node.js' 카테고리의 다른 글
| [Node.js+MYSQL] 시퀄라이즈 (2) (Sequelize) (0) | 2021.07.18 |
|---|---|
| [Node.js +MYSQL] 시퀄라이즈 (1) (Sequelize) (0) | 2021.07.18 |
| [Node.js] req, res 객체의 여러가지 메서드 (0) | 2021.07.16 |
| [Node.js] 라우터 분리하기 (0) | 2021.07.16 |
| [Node.js] 미들웨어 (0) | 2021.07.13 |