Nunjucks
템플릿 엔진은 ejs, jade, nunjucks(더 많은 템플릿 엔진) 등 다양하게 있고 이를 사용하여 편하게 작업물을 관리할 수 있다.
nunjucks 는 block 단위로 관리하기 편하고, 추후 리액트 전환을 하게 된다해도 크게 구조가 바뀌지 않을 것이라 예상되어 결정했다.
그러나 자바스크립트 문법이 아닌, jinja2 를 기반으로 한 nunjucks 만의 문법을 사용하기 때문에 레퍼런스 문서를 확인해야 된다.
프로젝트는 gulp 태스크 러너를 사용하고 있기 때문에, nunjucks 관련 task 를 따로 설정해준다.
Gulp TaskRunner
task 추가를 하면서 아래 라이브러리를 추가로 설치했다.
Layout
template 상속
nunjucks의 좋은 기능(어찌보면 jinja)으로 템플릿을 상속할 수 있는데,
이를 이용하여 여러페이지에서 공통되는 레이아웃(뼈대)을 만들수 있다.
아래와 같이 상위 템플릿을 하나 만든다.
layout.html
<body>
<div id="header">
{% block header %}Title{% endblock %}
</div>
<div id="content">
{% block content %}{% endblock %}
</div>
<div id="footer">
{% block footer %}© Copyright{% endblock %}
</div>
</body>특정 영역을 'block' 으로 지정하면 하위에서 해당 영역을 재정의 할 수 있다.
child.html
{% extends "layout.html" %} // layout.html template extends
{% block header %}
{{ super() }}
<h2>Sub Title</h2>
{% endblock %}
{% block content %}
<h3>Main</h3>
<p>Welcome to Nunjucks</p>
{% endblock %}하위에서 사용하는 방법은 우선 템플릿을 사용한다고 알려준다.
그리고 사용하는 block 을 재정의 해주면 된다. 위에와 같이 작성을 하면 아래와 같이 컴파일 된다.
<body>
<div id="header">
Title
<h2>sub Title</h2>
</div>
<div id="content">
<h3>Main</h3>
<p>Welcome to my homepage.</p>
</div>
<div id="footer">
© Copyright
</div>
</body>하나씩 살펴보자면 {% extends "layout.html" %} 는 child.html이 layout.html 템플릿을 기반으로 한다고 알려주는 것이다.
그러면 이제 동일한 block 영역은 child.html 에서 재정의를 해줄 수 있게 된다.
- block 선언 후 내용을 작성하면? 상위 block 영역이 하위에서 작성한 내용으로 노출된다.
- block 선언을 안해주면? 따로 block 선언이 없으면 기존 내용이 그대로 노출된다.
- block 선언을 하되 안에 내용이 없으면? 아무튼 재선언이 된 것이기때문에 빈 내용이 노출된다.
- {{ super() }} ? 상위 템플릿에 내용은 그대로 유지되면서 하위에서 추가한 내용이 이어서 노출된다.
Components
Include
{% include 'A.html' %}
다른 파일을 추가하고 싶을때는 위와 같이 선언해주면 된다.
variable
{% set variable = "abc" %}
{{ variable }}변수를 지정하고 싶을때는 set 이라는 구문을 사용하면 된다. 단순한 변수부터 객체 데이터 형태까지 정의해 줄 수 있다.
지정한 변수를 사용할때는 {{변수명}} 다음과 같이 사용한다.
반복문
반복되는 데이터가 있다면 태그 자체를 복붙하지 않고, 아래와 같이 응용하면 간단하게 처리할 수 있다.
아래와 같이 데이터를 선언해주면 for 문을 사용하여 데이터만 다른 태그를 반복할 수 있다.
{% set data = [
{ title: '첫번째', desc: '설명입니다' },
{ title: '두번째', desc: '설명입니다' },
{ title: '세번째', desc: '설명입니다' },
] %}
<ul>
{% for item in data %}
<li>
<strong>{{ item.title }}</strong>
<p>{{ item.desc }}</p>
</li>
{% endfor %}
</ul>- 몇 번, 고정된 반복문 사용시 range() 를 사용한다.
{% for i in range(0, 4) %} // 0에서 3까지 반복
{{ i }} 번째입니다. // 0, 1, 2, 3
{% endfor %}조건문
if, else , else if 사용하는 방법입니다. 조건에 따라 분기가 필요할 경우 사용한다.
else if 는 {% elif %} 로 작성한다.
{% if type == 'text' %}
텍스트입니다.
{% elif type == 'image' %}
이미지입니다.
{% else %}
아무것도 아닙니다.
{% endif %}- 조건문이 여러개일때
and ( 두 조건이 만족할때 ) or ( 두 조건 중 하나라도 만족할때) not ( 만족하지 않을때 )
조건이 두가지 일때는 바로 작성해주면 되고, 두가지 이상일 경우에는 괄호를 사용하여 그룹화 시켜준다.
{% if type == 'A' or type=='B' %}
{% if (type =='A' and type=='B' ) not C %} - 문자열 일부분을 조건 삼을때
{% set text = '코카콜라' %}
{% if '콜라' in text %} // true
{% endif %}- 자바스크립트의 삼항 연산자와 비슷하게 사용하기
if ~ else 사이의 값이 true 일 경우 'true' 문자열이 출력되고, 그렇지 앟으면 뒤의 'false' 문자열이 출력된다. 뒤의 else 는 쓰지 않아도 괜찮다.
{{ "true" if type=='A' else "false" }}주석
nunjucks 내에서 html 로 렌더링 되지 않는 주석을 달고 싶을때
{# 주석내용 #} 더 자세한 내용
