[Nunjucks] 📚 넌적스 기본 문법 💯 총정리

...

Nunjucks

넌적스는 템플릿 엔진 중 하나로 모질라 재단에서 만든 템플릿 입니다.

Express에서 따로 설치과정없이 바로 쓸수있는 PUG와 달리 넌적스는 따로 설치가 필요합니다.

Node.js의 대표적은 템플릿 엔진 으로는 pub와 nunjucks가 있습니다. 다만 개인적인 생각으로는 pug보다는 nunjucks가 활용도가 뛰어난 것 같습니다.

성능면에서는 pug가 렌더링 속도가 nunjucks보다 빠르지만, pug는 따로 html태그를 pug용 문법으로 변환해야 되지만 넌적스는 html 문법을 그대로 차용이 가능하기 때문에 호환성이 매우 좋기 때문입니다.

예를 들어 넌적스는 남이 만들어놓은 시맨틱 태그 구조를 그대로 복붙하여 사용하면 되지만, pug는 따로 변환작업을 해줘야 하죠.
어차피 프론트는 리액트와 뷰가 대세이기 때문에 이 둘을 이용할 일은 없겠지만, 백엔드 개발자들이 프론트 작업을 할때 nunjucks가 가장 입문하기 좋고 쉽게 배울수 있기 때문에 강력하게 추천드립니다.
다만 넌적스는 문법 자체가 가독성이 안좋은 점이 단점으로 꼽힙니다.

Nunjucks 설치

$ 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 하게 됩니다.

Nunjucks 기본 문법 총정리

Nunjucks 변수

express에서 res.render 호출 시 보내는 변수를 nunjucks 가 처리하게 됩니다.

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

<!-- views/index.html -->

<h1>{{title}}</h1>
<input placeholder="{{title}}" />

주의할점은 value로서 {{}}를 사용할 경우, ""안에 넣어줘야 한다는 점입니다.

예를 들어 input태그를 사용한다고 해보면,

이런식으로 쓰는게 아니라 {{name}}자체가 값이라고 할지라도

<input name="name" value="{{name}}"/> 처럼 ""안에 넣어줘야 합니다.

변수 선언

{% set 자바스크립트 구문 %}

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

이스케이프 방법

=> 문자열을 넣을 때 뒤에 ' | safe ' 를 붙여주면 됩니다.

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

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

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>

Nunjucks 조건문

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

{% if VARIABLE %}

{% elif %}

{% else %}

{% endif %}

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

조건문은 {{ }} 안에서도 사용할 수 있습니다.

<h1>{{ '참' if true else '거짓' }}</h1>

논리 연산자

기호 대신에 영문을 씁니다.

&& → and
|| → or
! →not

{% if happy and hungry %} 
	I am happy *and* hungry; both are true. 
{% endif %} 

{% if happy or hungry %} 
	I am either happy *or* hungry; one or the other is true. 
{% endif %}

Nunjucks 모듈화

include

include 를 사용하여 다른 HTML 파일을 넣을 수 있습니다.

HTML 은 다음과 같이 작성되게 됩니다.

<!-- main.html -->
<header>
  <a href="/">Home</a>
  <a href="contact">Contact</a>
</header>
<main>
  <h1>Main File</h1>
</main>
<footer>
  <h3>This is Footer</h3>
</footer>

extends & block

extends 를 사용하면 레이아웃을 정할 수 있습니다.

HTML 은 다음과 같이 작성되게 됩니다.

<!DOCTYPE html>
<html>
  <head>
    <title>Nunjucks</title>
    <link rel="stylesheet" href="/style.css" />
  </head>
  <body>
    <header>Header</header>
    <main>
      <h3>This is main Content</h3>
    </main>
    <footer>Footer</footer>
  </body>