1. 넌적스 설치

npm i nunjucks --save

const nunjucks = require('nunjucks');
 
app.set('view engine', 'njk'); // 확장자를 html 로도 사용이 가능함.
nunjucks.configure('views', { // views폴더가 넌적스파일의 위치가 됨
  express: app,
  watch: true,
});

configure 의 첫 번째 인수로 views 의 경로를 전달해 줍니다.
그리고 두 번째 인수로 옵션을 지정해 줍니다.

express 속성에 app 객체를 연결합니다.
watch 옵션은 true로 지정되면 HTML 파일이 변경될 때에 템플릿 엔진을 reload 하게 됩니다.

2. 변수

router.get('/', function(req, res, next){
	res.render('index', { title: 'Nunjucks' }); // index.html에 title이라는 변수를 전달
});
<h1>{{title}}</h1>
<input placeholder="{{title}}" />

주의할점은 value로서 {{}}를 사용할 경우, ""안에 넣어줘야 한다는 점입니다.
예를 들어 input태그를 사용한다고 해보면,
<input name="name" value={{name}}/>
이런식으로 쓰는게 아니라 {{name}}자체가 값이라고 할지라도
<input name="name" value="{{name}}"/> 처럼 ""안에 넣어줘야 합니다.

3. 변수 선언

{% set name='Lia' %}
<h1>Hello, {{name}}</h1>

4. 이스케이프 방법

5. 자바스크립트에서 넌적스 변수 사용하기

<script>
  const b = "{{ user.nick }}";
  console.log(b)
</script>

6. Nunjucks 반복문

{% %} 안에 for in 작성

인덱스 번호를 사용할 경우 loop.index 사용
for문이 끝나는 부분에는 { % endfor % }를 입력해 for문이 끝나는 부분을 표시해줍니다.

<ul>
  {% set people = ['Team', 'Lia', 'Matthew', 'David'] %} <!-- 배열 변수 선언 -->
  {% for human in people %} <!-- 반복분 선언 -->
  <li>{{loop.index}}번째 {{human}}</li>
  {% endfor %} <!-- for문 끝지점 명시 -->
</ul>
   
{% set navigation = [
	{ 'name': '1' , 'url': '1.html' },
	{ 'name': '2' , 'url': '2.html' },
	{ 'name': '3' , 'url': '3.html' }
] %}
 
{% for item in navigation %}
     <a href="{{item.url}}">{{item.name}}</a>
{% endfor %}


<!-- 결과 -->
<a href="1.html">1</a>
<a href="2.html">2</a>
<a href="3.html">3</a>

7. Nunjucks 조건문

nunjucks의 if문은 끝나는 지점에 반드시 {% endif %}를 표시해줘서 if문이 끝났다는것을 알 수 있게 해주어야 합니다.

{% if VARIABLE %}
 
{% elif %}
 
{% else %}
 
{% endif %}



{% if true %}
<h1>'참' 입니다</h1>
{% else %}
<h1>'거짓' 입니다</h1>
{% endif %}


조건문은 {{ }} 안에서도 사용할 수 있습니다.
<h1>{{ '참' if true else '거짓' }}</h1>