HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
📝
프론트엔드 스쿨 교안(1기)
/
📝
Node
/
📝
넌적스(nunjucks)
/
📝
넌적스를 사용하는 이유와 문법
📝

넌적스를 사용하는 이유와 문법

1. 템플릿 태그2. 템플릿 변수3. 템플릿 필터4. 템플릿 상속
ejs, handlebars, mustache 등 많은 템플릿 엔진이 있지만 저는 넌적스를 주로 사용합니다. 주로 express와 함께 사용하는 템플릿엔진은 퍼그와 넌적스가 있는데요.
https://colorlib.com/wp/top-templating-engines-for-javascript/
넌적스를 사용하는 이유는 초급자가 사용하기에 적합하기 때문에 그렇습니다. Django에서도 비슷하게 사용하기 때문에 템플릿 교환이 되기도 합니다. 가장 큰 장점으로는 템플릿 상속을 통해 빠르게 UI를 구현할 수 있다는 것입니다. 물론 넌적스가 최고라는 얘기는 아닙니다. 다른 것들도 경험해보시길 권해드립니다.

1. 템플릿 태그

템플릿 태그는 기존 Python에 있는 syntex에 해당하는 부분입니다. if, else, for 구문과 같은 것을 사용할 수 있고, 추가로 확장 syntex를(extends, block, include, etc) 사용할 수 있습니다. 중괄호({})와 퍼센트(%)를 조합하여 사용합니다.
{% 문법 %}

2. 템플릿 변수

템플릿 변수는 render 함수나 JsonResponse 함수로 데이터를 전달받아 html 파일 안에서 호출되는 파이썬의 딕셔너리형 변수입니다. 중괄호 2개를 사용합니다.
{{ 변수 }}

3. 템플릿 필터

템플릿 필터는 변수값을 변환시켜 출력하기 위한 옵션입니다. 템플릿 변수 옆에 파이프(|)를 사용합니다.
{{ 변수|옵션 }}

4. 템플릿 상속

상속하는 곳 {% block content %} {% endblock %} 상속받는 곳(이름은 상속받는 파일이름이면 됩니다.) {% extends 'base.html' %} {% block content %} {% endblock %}