노드 학습 12일차

안녕하세요 🐸

템플릿 엔진 넌적스 (nunjucks)

넌적스 설치 및 환경 세팅

다음의 명령어를 통해 설치합니다.

npm i nun nunjucks

설치한 넌적스를 사용하기 위해 app.js 에서 명시하는 방법입니다.

...
const express = require('express');
const nunjucks = require('nunjucks');

const app = express();

app.set('view engine','html');

nunjucks.configure('views',{
	express:app,
	watch:true
})

app.set('view engine','html'); 구문의 추가 설명. 기본 확장자가 .html 임을 명시합니다.
넌적스 템플릿의 확장자는 .html , .njk 를 사용하기 때문에 환경에 맞게 사용 합니다.

---

넌적스 변수 사용 방법

{{변수}}

중괄호 2개를 사용하여 html 내에서 변수 사용 가능합니다. 태그 내의 값으로 사용 가능하고 속성의 값으로도 사용할 수 있습니다.

예시)

<h1></h1>
<p>Welcome to the </p>
<button class="">전송</button>

내부 변수 선언

{% set 변수 선언 구문 %}

형식을 통해 html(혹은 njk) 에서도 변수를 선언할 수 있습니다.
하지만 주로 사용하거나 권장되는 방법은 아닙니다.
필요하다면 상황에 맞춰 사용하면 될 것 같습니다.

예시)

{% set name = "짱구" %}
{% set age = "5살" %}
<p>{{name}} : {{age}}</p>

넌적스 변수 내에서는 자동으로 이스케이프 처리가 이루어집니다.
원치 않는 경우에는 이를 명시하여 이스케이프 되지 않도록 할 수 있습니다.

예시)

<p><bold>이스케이프</bold></p>
<p><bold>이스케이프 안함</bold></p>

반복문 사용

{% %}

내에서 for ~ in ~ 구문을 통해 반복문 사용이 가능합니다.
인덱스 값을 찾기 위해서는 loop.index 키워드를 사용합니다. 이는 넌적스에서 제공하는 입니다.

예시)

<ul>
	{% set fruits = ['사과','배','오렌지','포도','파인애플','샤인머스캣','애플망고'] %}
	{% for item in fruits %}
	<li>{{loop.index}}번째 {{item}}</li>
	{% endfor %}
</ul>

조건문 사용

{% if %}
{% elif %}
{% else %}

구문을 통해 조건문 작성이 가능합니다.
여기서

{% elif %}

는 else if 구문의 역할을 합니다.
파이썬 사용자는 elif 라는 구문이 익숙하겠지만 저와 같은 자바 개발자는 처음보기에 했갈릴 수 있습니다.

예시)

{% if fruit =='사과' %}
<p>사과에요</p>
{% elif fruit == '오렌지'%}
<p>오렌지에요</p>
{% else %}
<p>얜 뭐죠?</p>
{% endif %}

다른 파일 불러오기

{% include 파일명 %}

구문을 통해 파일을 불러올 수 있습니다.

예시)

{% include "header.html" %}
<main>
	<p>본문</p>
</main>
{% include "footer.html" %}