7. 익스프레스 (4) - 템플릿 엔진 : Nunjucks 2

 

 

 

 

○ 변수

 

res.render를 호출할 때 보내는 변수를 넌적스를 통해서 처리합니다. 이미 앞서서 작성했던 routes/index.js에서 아래와 같은 부분이 있었습니다. 여기에는 title이라는 변수가 선언되죠.

 

// GET / 라우터
router.get('/', (req, res, next) => {
    res.render('index', { title: 'Express' });
});

 

 

우선 이를 반영하지 않는 기본적인 포맷의 HTML을 보겠습니다.

 

 

[HTML]

<h1>Express</h1>
<p>Welcome to Express</p>
<button class="Express" type="submit">전송</button>
<input placeholder="Express 연습">

 

 

[Nunjucks]

<h1>{{title}}</h1>
<p>Welcome to {{title}}</p>
<button class="{{title}}" type="submit">전송</button>
<input placeholder="{{title}} 연습">

 

 

위와 같이 라우터를 통하지 않고, 넌적스 파일 내부에서 변수를 선언하고 사용하는 방법도 있습니다. {$ set 변수 = '값' %}의 방식으로 변수 선언이 가능합니다. 

 

[HTML]

<p>Node.js와 Javascript</p>

 

 

[Nunjucks]

{% set node = 'Node.js'}
{% set js = 'Javascript'}
<p>{{node}}와 {{js}}</p>

 

 

 

HTML에서 이스케이핑을 다룰 때, 이스케이프를 원하지 않는다면 {{ 변수 | safe }}를 사용합니다.

 

 

[HTML]

<p>&lt;strong&gt;이스케이프&lt;/strong&gt;</p>
<p><strong>이스케이프 안함</strong></p>

 

 

[Nunjucks]

<p>{{'<strong>이스케이프</strong>'}}</p>
<p>{{'<strong>이스케이프 안함</strong>' | safe }}</p>