728x90
반응형
1. 먼저 nunjucks를 설치해준다.
npm install nunjucks
2. express와 nunjucks를 연결해준다.
// 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,
watch: true,
});
const indexRouter = require('./routes/index');
app.use('/', indexRouter);
3. 라우터에 사용할 변수를 페이지에 렌더링해준다.
const express = require('express');
const router = express.Router();
router.get('/', (req, res) => {
res.locals.title = 'Express'
res.render('index')
});
module.exports = router;
4. 최상위 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 %}
이렇게 하면 백엔드에서 넘겨준 변수를 html에서 쓸 수 있다. {{ }} 이걸로 변수를 감싸주면 끝!
{% %} 이런 형식으로 변수를 이용한 반복문, 또다른 변수선언 등을 할 수도 있다.
728x90
반응형
'Node.js - JQuery' 카테고리의 다른 글
| Node.js , JQuery | 테이블 만들기 | 화면 구성 (0) | 2021.09.14 |
|---|---|
| Node.js , JQuery | 회원탈퇴 (0) | 2021.09.14 |
| Node.js , JQuery | 비밀번호 찾기 | 화면 구성 (0) | 2021.09.14 |
| Node.js , JQuery | 로그인 만들기 | 미들웨어 (0) | 2021.09.14 |
| Node.js , JQuery | 로그인 만들기 | 화면 구성 (0) | 2021.09.14 |