Jinja2: 템플릿 엔진

Jinja2는 파이썬에서 사용되는 강력하고 유연한 템플릿 엔진입니다. 특히 Flask와 같은 웹 프레임워크에서 HTML 페이지를 동적으로 생성하는 데 널리 사용됩니다. Jinja2를 사용하면 복잡한 웹 페이지를 효율적으로 관리하고, 데이터를 동적으로 렌더링할 수 있습니다.

간결한 문법: 파이썬과 유사한 문법을 사용하여 쉽게 학습하고 사용할 수 있습니다.
강력한 기능: 조건문, 반복문, 상속, 필터 등 다양한 기능을 제공하여 복잡한 템플릿을 구현할 수 있습니다.
안전성: 자동으로 HTML 엔티티를 이스케이프하여 XSS 공격을 방지합니다.
확장성: 커스텀 필터, 테스트, 글로벌 변수 등을 정의하여 기능을 확장할 수 있습니다.

Jinja2의 기본 구조

Jinja2 템플릿은 .html 확장자를 가지는 파일로, HTML 코드와 Jinja2 특정 문법이 혼재되어 있습니다.

변수 출력: {{ 변수명 }}
조건문: {% if 조건 %} ... {% endif %}
반복문: {% for item in list %} ... {% endfor %}
주석: {# 주석 내용 #}

<!DOCTYPE html>
<html>
<head>
    <title>Jinja2 예제</title>
</head>
<body>
    <h1>Hello, {{ name }}!</h1>
    <ul>
        {% for item in items %}
            <li>{{ item }}</li>
        {% endfor %}
    </ul>
</body>
</html>

위 템플릿에서 name과 items 변수는 파이썬 코드에서 전달된 값으로 대체됩니다.

주요 기능

상속: 기본 템플릿을 상속하여 하위 템플릿에서 재사용 가능
필터: 변수를 다양한 형식으로 변환하거나 필터링
매크로: 자주 사용하는 코드 블록을 함수처럼 정의하여 재사용
자동 에스케이핑: XSS 공격을 방지하기 위해 HTML 특수 문자를 자동으로 이스케이프

Flask와 함께 사용하기

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    name = 'World'
    items = ['apple', 'banana', 'orange']
    return render_template('index.html', name=name, items=items)

상속

기본 템플릿: 모든 페이지에 공통적으로 사용되는 요소(헤더, 푸터, 네비게이션 등)를 포함하는 템플릿입니다.
자식 템플릿: 기본 템플릿을 상속받아 특정 페이지에 필요한 내용을 추가하거나 수정하는 템플릿입니다.

<!DOCTYPE html>
<html>
<head>
    <title>{% block title %}{% endblock %}</title>
</head>
<body>
    <header>
        </header>
    <div class="content">
        {% block content %}{% endblock %}
    </div>
    <footer>
        </footer>
</body>
</html>

{% extends "base.html" %}

{% block title %}About Us{% endblock %}

{% block content %}
    <h1>About Us</h1>
    <p>This is the about page.</p>
{% endblock %}

{% extends "base.html" %}: base.html 템플릿을 상속합니다.
{% block title %}{% endblock %}: title 블록을 정의하여 자식 템플릿에서 내용을 채울 수 있도록 합니다.
{% block content %}{% endblock %}: content 블록을 정의하여 각 페이지의 주요 내용을 채울 수 있도록 합니다.

include

include는 다른 템플릿 파일을 현재 템플릿에 포함시키는 지시자입니다. 마치 함수 호출처럼 다른 템플릿을 호출하여 그 내용을 현재 위치에 삽입하는 효과를 냅니다.

{% include 'header.html' %}

macro

macro는 템플릿 내에서 함수처럼 사용할 수 있는 코드 블록입니다. 특정 기능을 수행하는 코드를 한 번 정의해놓고, 필요한 곳에서 호출하여 사용할 수 있습니다.

{% macro input(name, value='', type='text') %}
    <input type="{{ type }}" name="{{ name }}" value="{{ value }}">
{% endmacro %}

3.8 KiB Raw Blame History