템플릿 엔진 (Nunjucks)

템플릿 엔진은 js 사용해서 HTML 간단하게 렌더링 할 수 있게 해줌.
Nunjucks는 HTML문법 그대로 사용하되 추가로 js 문법 사용 가능.

// app.js
...
app.set('port', process.env.PORT || 3000);
app.set('view engine', 'html');

// 익스프레스와 넌적스 연결하기
// 첫 번째 인수로 views 폴더의 경로 넣음
nunjucks.configure('views', { // 두 번째 인수로 옵션
    express: app, // express 속성에 app 객체 연결
    watch: true, // true면 HTML 파일 변경될 때 템플릿 엔진 다시 렌더링함.
});
...

views는 템플릿 파일들 위치한 폴더 지정하는 것.
res.render 메서드가 이 폴더 기준으로 템플릿 엔진 찾아 렌더링함.
res.render('index')라면 views/index.njk 렌더링.

• 넌적스의 문법

• 변수
  res.render 호출 시 보내는 변수를 넌적스가 처리한다.

routes.get('/', (req, res, next) => {
    res.render('index', {title: 'Express'});
});

넌적스에서 변수는 {{ }} 로 감싼다.

// 넌적스
<h1>{{title}}</h1>
<button class = "{{title}}" type = "submit">전송</button>
<input placeholder = "{{title}} 연습" />

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

내부에서도 변수 사용 가능.
변수 선언시에는 {% set 변수 = '값'%} 를 사용.

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

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

• 반복문
  넌적스에서는 특수한 구문을 {% %} 안에 쓴다.
  반복문도 마찬가지.
  for in문과 endfor 사이에 위치하면 됨.
  인덱스 사용시에는 loop.index 라는 특수한 변수 사용.

// 넌적스
</ul>
{% set fruits = ['apple', 'orange', 'peach'] %}
{% for item in fruits %}
<li>{{loop.index}} 번째 {{item}} </li>
{% endfor %}
</ul>

• 조건문
  조건문은 {% if 변수 %} {% elif %} {% else %} {% endif %}로 이뤄져있다.

{% if isLoggedIn %}
<div>로그인 성공.</div>
{% else %}
<div>로그인 필요.</div>
{% endif %}

{{ }} 안에서는 다음과 같이 사용.

<div>{{'참' if isLoggedIn}}</div>
<div>{{'참' if isLoggedIn else '거짓'}}</div>

• include
  다른 html 파일 넣을 수 있다.