변수 사용

Nunjucks에서 변수를 사용하려면 단순하다. {{}}만 넣어주면 된다.
물론 건네주는 쪽에서 이 {{}}안에 넣어줄 변수를 줘야 한다.
예를 들면, text라는 변수를 준다고 치면 {{text}}이런식으로 쓸 수 있다.

객체를 건네주는 경우도 마찬가지인데, 건네준 객체에 .을 붙여서 {{student.grade}}, {{student.score}}이런식으로 쓸 수 있다.

함수를 호출할 수도 있는데, student의 프로토타입 객체로 어떤 함수를 프로퍼티로 넣어줬다면, {{student.func()}}이런식으로 가져다 쓸 수 있다.

또 <script>를 통해 JavaScript코드를 사용할 때도, 변수에 {{}}값을 집어넣을 수 있다.

if, else, endif

Nunjucks는 프로그래밍에 사용할 연산자를 사용할 경우, {% %}를 사용한다. 이는 JSP의 <% %>와 매우 비슷한데, 특이점이라면 Nunjucks는 .html파일을 사용한다는 것이다.

따라서 .html에 특정 조건에 따라 다른 값을 보이고 싶다면

{% if isLogin %}
(이 부분은 로그인 했을때 보여주고 싶은 tag들을 보여준다.)
{% else %}
(로그인 안 했을때의 보여주고 싶은 tag들을 보여준다.)
{% endif %}

위와 같이 쓰면 되는데, js코드로 표현한다고 치면

if(isLogin){
(이 부분은 로그인 했을때 보여주고 싶은 tag들을 보여준다.)
}else{
(로그인 안 했을때의 보여주고 싶은 tag들을 보여준다.)  
}// 이 닫는 태그 부분이 endif

와 비슷하다고 보면 이해가 쉬울거다.

block, endblock

이 블록이란건 include같은 개념인데,

{% block content %}{% endblock %}

이런식으로 어떤 xxx.html에서 작성을 한다고 쳐보자.

그럼 이 블록안에 yyy.html의 내용을 가져다 쓸 수 있다.
한마디로 공통적으로 보여줄 내용을 xxx.html로 해놓고(헤더나 푸터 같은), 블락안에 넣어주는 content만 다른 파일인 zzz.html이 가져다 쓰면 헤더와 푸터는 동일하지만 가운데 보여주는 nav같은게 달라지는 그런 느낌이다.

그럼 xxx.html에선 저렇게 정의한다고 치고, yyy.html에서는 어떻게 해야할까?

{% extends "xxx.html" %}
{% block content -%}
(yyy.html에서만 보여줄 내용들...
...
...)
{% endblock %}

이런식으로 해주면 xxx.html의 블록 부분에 yyy.html에서 보여줄 내용들이 보이게 된다.

set

설정에 사용하는 건데 대표적으로

저 위에서 보여주는 타이틀이 있다.
set title="hello" 하면 저 위에 타이틀이 hello로 바뀌게 된다.

for

JSP에서도 <% %>를 통해 for문을 사용하는데, Nunjucks역시 가능하다.

   {% for item in sequence %}     
      (반복할 내용....)
   {% endfor %}

이런식으로 해주면 되는데, item에는 매 반복문이 돌아갈때마다 사용될 객체인데 이건 매번 바뀌는 값이고, 그 객체를 담고 있는게 바로 sequence이다. 예를 들면 상품을 담고 있는 배열인 products가 있다고 치자. 모든 상품에 대해 반복문을 돌리려고 하면 당연히 상품 개수만큼 반복문이 돌고 products[0] ~ products[len-1]개의 상품을 사용할 것이다.

그걸 for A in B를 통해 적절하게 구현할 수 있다.
매번 A의 값은 반복문마다 다르다는 것만 명심해주면 된다. 반복문을 사용해야하니 B가 iterable한 게 들어있어야 한다.

마찬가지로 {% endfor %}는 {% endif %} 처럼 그냥 닫는 문이므로, 까먹지말고 써주자

그 외

이 정도만 해도 웬만한 데이터베이스에 접속해 가져온 데이터를 사용한다던가, 상황에 따라 다른 태그를 보여준다던가 등등이 가능해진다. 그래서 간략하게만 적었고, 더 필요한 것은
https://mozilla.github.io/nunjucks/templating.html
여기에 내가 설명해주는 것보다 더 자세히 나와있다. 물론 다들 알고있겠지만 영어라서 읽기 싫어서 검색을 통해 여기 들어오는 것이겠지..

마지막으로 주의할 점

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

이 부분은 리액트 개발자들이라면 헷갈릴 수 있기 때문에 적어보았다.
왜냐면 리액트는 JSX로 컴포넌트를 만드는데, 이것을 쓸때는 value={name}이런식으로
""를 사용하지 않기 때문이다.