안녕하세요 Devport 입니다. 회사에서 서버는 Flask Framework를 사용하고 있는데요. Flask의 템플릿엔진을 사용하는 페이지 들이 있는데 매번 서버에 도큐먼트를 올려 검증을 하는 과정으로 인하여 Nunjucks 모듈에 대해서 알아보려고 합니다.
Nunjucks(넌적스)?
Nunjucks는 Javascript를 위해서 강력하고 정교한 템플릿 엔진을 제공 합니다. jinja2에 영감을 받아 개발되었기 때문에 많은 부분에서 Flask의 Template 엔진과 유사한 부분이 많이 있다고 볼 수 있습니다.
Nunjucks에서는
- Rich: 블록 상속, 자동 이스케이핑, 매크로, 비동기 제어 등의 기능을 제공합니다.
- Fast & Lean: 브라우저에 미리 컴파일된 템플릿으로 빠른 성능
- Extensible: 사용자 정의 필터 및 확장
- Everywhere: Node 및 모든 최신 웹 브라우저에서 사용가능, 사전 컴파일 옵션 제공
내장 필터
{{ foo | title }}
{{ foo | join(",") }}
{{ foo | replace("foo", "bar") | capitalize }}
키워드 인수
함수로 렌더링시에 함수에 인자를 전달 할 수 있습니다.
{{ foo(1, 2, bar=3, baz=4) }}
{{ bar | transform(level=2) }}
템플릿 상속
다른 페이지의 템플릿을 재사용할 수 있어 유용하게 사용할 수 있는 옵션입니다.
{% extends "base.html" %}
{% block header %}
<h3>{{ subtitle }}</h3>
{% endblock %}
{% block content %}
<h1>{{ page.title }}</h1>
<p>{{ page.content }}</p>
{% endblock %}
비동기식 템플릿
필터에 비동기식 호출이 필요한 경우에 비동기식 템플릿을 작성할 수 있다.
<h1>Posts</h1>
<ul>
{% asyncAll item in items %}
<li>{{ item.id | lookup }}</li>
{% endall %}
</ul>
'개발바닥 > FrontEnd' 카테고리의 다른 글
E2E 테스트 프레임 워크 - Playwright_번역본 (0) | 2021.10.28 |
---|---|
[개발] Chrome 비밀번호 변경 팝업이 뜨는 이유 (0) | 2020.12.21 |
[개발] Chrome 자동완성을 막아보자 (0) | 2020.12.19 |
[개발] CSS - Flex Box 요점 정리 (0) | 2020.12.17 |
[개발] Frontend에서 Cors 해결방법 (0) | 2020.12.14 |