nunjucks는 html을 더 효율적으로 다룰 수 있도록 하는 스킬을 몇 가지 가지고 있는데,
이에 대해 조금 공부를 하고 넘어가면 유용할 것이다.
1. intro / setup
우선 server.js, main.html을 작성해 메인 페이지를 만들어주자.
/* server.js */
const express = require('express')
const app = express()
const nunjucks = require('nunjucks')
app.set('view engine', 'html')
nunjucks.configure('views', {express:app} )
// 메인
app.get('/', (req, res) => {
res.render('main.html')
})
// 서버 구동
app.listen(3000, () => {
console.log('서버 구동')
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1><a href='/'>logo</a></h1>
<h2>메인 페이지</h2>
</html>
2. 변수 ( {{ }} )
html에서 변수를 출력할 수 있는데,
html을 렌더링 할 때, js에서 같이 변수 데이터를 가져오는 방법이 있고,
html 내부에서 자체적으로 변수를 만드는 방법이 있다.
우선 전자부터 해보자.
2.1 외부에서 변수 받아오기
다음과 같이 js를 수정해보자.
/* server.js */
app.get('/', (req,res) => {
res.render('main.html', {
var: '변수 선언'
}
)
}이렇게 하면 렌더링할 html과 함께, var이라는 변수명과 그 값이 html에 전달된다.
이제 html에서 받은 변수를 출력해보자.
<h2> element 아래에 다음과 같이 추가하면 된다.
변수 : {{ var }}
var이라는 이름을 가진 변수의 값을 출력해줄 것이다.
브라우저에서 메인 페이지에 접속하면 다음과 같은 결과를 얻을 수 있다.
2.2 자체적으로 변수 생성 ( {% set 변수이름 = '변수값' %} )
이 때는 {% set 변수 = '값' %} 형식으로 html에 써주면 된다.
html을 다음과 같이 바꿔보자.
/* main.html */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
{% set var2 = '변수2' %} // 이 줄을 추가
</head>
<body>
<h1><a href='/'>logo</a></h1>
<h2>메인 페이지</h2>
변수 : {{var}}
<br>
변수2 : {{var2}} // 이 줄을 추가
</html>이렇게 하면 html에서 선언한 변수를 바로 출력할 수 있다.
(변수의 선언 위치는 head가 아니라도 상관없다.)
주의할 점은, {{ }} 포함 이제부터 나올 모든 문법은 html이 아닌 nunjuck의 기능이라는 점이다.
html문서를 바로 브라우저에서 불러오면 변수로 인식하지 않고 문자를 그대로 출력해준다.
서버를 실행하고, uri를 입력해 접속해야 원하는 결과가 나온다.
3. 반복문 ( {% for a in b %} )
반복문을 사용하려면 우선 배열이 있어야 한다.
{% for a in b %} 의 의미는
배열 b의 원소 a 각각에 대해 반복을 실행하겠다는 것을 의미한다.
html에 다음과 같이 추가해보자.
/* main.html */
<br>
{% set username = ['lee', 'kim', 'park', 'yoon'] %}
{% for item in username %}
{{item}}
{% endfor %}
여기에 인덱스까지 붙여주고 싶다면 {{loop.index}} 라는 변수를 사용하면 된다.
다음과 같이 코드 블럭을 추가해보자.
/* main.html */
{% set list = ['a2', '2b', '9s'] %}
{% for item in list %}
{{loop.index}} : {{item}}
{% endfor %}
여기까지 하고 다시 불러와보면 다음과 같은 결과를 확인할 수 있다.
4. 조건문 ( {% if '변수' %}, {% else %}, {% endif %} )
쓰는 법을 제외하면 js와 크게 다르지 않다.
{% if 변수 %} ~ {% endif %}: 변수가 true라면 출력, vice versa
{% if 변수 %} ~1 {% else %} ~2 {% endif %} : 변수가 true면 ~1, false면 ~2 실행
다음과 같이 추가해보자.
/* main.html */
{% set tfSet = true %}
<div>{{tfSet}}</div>
{% if tfSet %}
<div>tfSet이 true일때 이 텍스트 출력</div>
{% else %}
<div>tfSet이 false일때 이 텍스트 출력</div>
{% endif %}현재 tfSet 값을 보여주고,
if ~ else문을 사용해, tfSet의 값에 따라 출력할 element를 바꿔준다.
여기서는 tfSet을 true로 설정해주었으므로, 다음과 같이 true, true일때의 문장이 출력된다.
false로 바꾸면 false, false일때 출력 텍스트가 나올 것이다.
여기까지 하면 기본적인 문법은 다 배웠고,
다음 포스트에서는 include, extend등 다른 html 요소들을 그대로 가져와 재사용할 수 있는 편의성 기능을 배워보자.