지난 포스트에서 템플릿 엔진인 퍼그를 소개해드렸습니다. 하지만 기존 자바스크립트와는 문법이 조금 다른 형태를 취하고 있어서 오히려 더 어려울 수 있다는 생각이 들더라고요. 그래서 좀 더 직관적으로 쓸 수 있는 템플릿 엔진인 넌적스도 한 번 소개해드리려고 합니다.
넌적스 사용
넌적스도 npm 패키지이기 때문에 npm을 통해 설치해줍니다.
npm install nunjucks퍼그와는 다르게 require()를 통해서 사용합니다. 그리고 넌적스 파일의 확장자는 퍼그가 .pug라는 전용 확장자를 이용한 것과 다르게 .html을 써도되고 .njk를 써도 됩니다.
const express = require('express');
const path = require('path');
const nunjucks = require('nunjucks');
const app = express();
app.set('port', process.env.PORT || 3000);
app.set('view engine', 'html');
nunjucks.configure('views', {
express: app,
watch: true,
});
app.listen(app.get('port'), () => {
console.log('포트 번호: ', app.get('port'));
});html 표현
넌적스는 퍼그와 다르게 기존 html 표현 방식은 그대로 따라갑니다. <태그> 방식을 이용하고 속성 부여와 기타 등등은 동일합니다.
변수
넌적스에서는 변수를 중괄호를 {{이중}}으로 사용합니다. 내부에 변수를 선언할 때는 {% 변수명 = 값 %}의 형태로 이용합니다.
<p>Hello express</p>//넌적스
{% set hello = 'Hello' %}
{% set express = 'express' %}
<p>{{hello}} {{express}}</p>반복문과 조건문
앞에서 변수 선언에 {% 변수명 = 값 %} 구문을 이용한다고 했었는데요 사실 이 {% %}구문은 특수 구문을 위한 문법입니다. 반복문과 조건문 모두 {% %}을 이용해서 작성합니다.
반복문은 {% for~in %}과 {% endfor %}구문 사이에 위치 한 것을 반복합니다. 말이 조금 어려운거 같아서 실제 예시를 보면 쉽게 알 수 있습니다.
<ul>
<li>dog</li>
<li>cat</li>
<li>bird</li>
<li>mouse</li>
</ul><ul>
{% set animals = ['dog', 'cat', 'bird', 'mouse'] %}
{% for value in animals %}
<li>{{value}}</li>
{% endfor %}
</ul>인덱스만을 따로 가져올 수도 있습니다. {{loop.index}}라는 변수를 이용하면 인덱스만을 따로 가져올 수 있습니다.
<ul>
{% set animals = ['dog', 'cat', 'bird', 'mouse'] %}
{% for value in animals %}
<li>{{loop.index}}번 인덱스: {{value}}</li>
{% endfor %}
</ul>조건문도 똑같습니다. 단 마지막에 {% endif %}를 붙이는 것을 명심해야합니다. 대신 pug와는 다르게 case문은 따로 사용이 불가능합니다.
{% if true %}
<p>TRUE입니다.</p>
{% else %}
<p>FALSE입니다.</p>
{% endif %}다른 파일 첨부
우선 include입니다. 마찬가지로 {% %}안에 include 구문을 작성해서 사용합니다.
<header>
<p>난 헤더</p>
</header>
<main>
<p>나는 메인</p>
</main>
<footer>
<p>난 푸터다냐옹</p>
</footer>{% include './header.html' %}
<main>
<p>나는 메인</p>
</main>
{% include './footer.html' %}레이아웃과 블록도 퍼그와 유사합니다. 다만 블록의 경우 블록이 끝나는 지점을 명시해주어야합니다.
<!DOCTYPE html>
<html>
<head>
<title>express with nunjucks</title>
<link rel='stylesheet' href='./style.css'></link>
</head>
<body>
<header>
<p>헤더</p>
</header>
<main>
<p>본문</p>
</main>
<script src='./app.js'></scirpt>
</body>
</html>//레이아웃
<!DOCTYPE html>
<html>
<head>
<title>express with nunjucks</title>
<link rel='stylesheet' href='./style.css'></link>
</head>
<body>
<header>
<p>헤더</p>
</header>
{% block content %}
{% block end %}
{% block script %}
{% block end%}
</body>
</html>
//블록
{% extends './layout.html' %}
{% block content %}
<main>
<p>내용</p>
</main>
{% endblock %}
{% block script %}
<script src='./app.js'></script>
{% endblock %}