Django_장고 부수기 (4)_템플릿 문법

Django 템플릿 문법

template에서 DB의 데이터를 가져오는 방법에 대해 알아보자

 

HTML파일은 정적 파일이다. 그에 반해 파이썬은 동적이다.

템플릿 문법은 파이썬을 HTML로 변환시켜, 빠르고 쉽게 동적인 웹 사이트를 만들 수 있게 도와주는 역할을 한다.

 

동적 데이터

저번 포스팅에서 다루었던 쿼리셋을 이용하여 views.py에서 원하는 데이터를 가져와야한다.

 

ex)

from django.shortcuts import render
from django.utils import timezone
from .models import Post

def post_list(request):
    posts = Post.objects.filter(published_date__lte=timezone.now()).order_by('published_date')
    return render(request, 'blog/post_list.html', {'posts': posts})

views.py에서 정의한 함수를 살펴보면

쿼리셋을 이용하여 posts라는 변수에 DB에서 가져온 데이터를 저장하였다.

해당 데이터는 render함수를 통해 template으로 전달된다.

{'posts': posts}가 바로 그 부분이다.

 

템플릿 문법

템플릿에서는 특정한 문법을 이용하여 데이터를 핸들링할 수 있다.

그 중 몇 가지를 알아보자

 

1. {{ }}

- 중괄호 2개를 겹칠 때는 변수를 의미한다. 사용되는 변수는 view에서 전달된 것이다.

- 예시로 posts.title 과 같이 해당 데이터의 멤버들에 대한 접근도 가능하다.

{{ posts }}

2. 탬플릿 태그 {% %}

- html 상에서 프로그래밍 로직을 이용할 수 있는 태그이다.

- load static, for, if 등

- and, or, not, and not, > >=, < <= ,in, not in 등의 비교연산이 가능하다.

 

- 예시_1) 객체의 집합을 for loop로 한 개씩 핸들링할 수 있다.

{% for post in posts %}
    {{ post }}
{% endfor %}

- 예시_2) if문으로 조건을 부여할 수 있다.

{% if not user.is_authenticated %}
	<div class="username">
		<a href="{% url 'login' %}" class="login-link">
			Login
			<i class="fas fa-sign-in-alt"></i>
		</a>        
	</div>
{% else %}
	<div class="username">Hello {{ user.username }} (<a href="{% url 'logout' %}">Logout <i class="fas fa-sign-out-alt"></i></a>)</div>
{% endif %}

- 예시_3 {% csrf_token %}

CSRF 공격 방지를 위한 태그이다, 장고 내부적으로 CSRF 토큰값의 유효성을 검증.

form태그의 첫 줄에 입력한다.

 

- 예시_4 {% load ... %}

사용자 정의 태그 및 필터링 데이터를 가져온다.

정적파일도 가져올 수 있다.

 

-예시_5 block content, extends

템플릿 확장에 활용하는 태그이다.

 

기저 template

 <div class="post-list">
	{% block content %}
	{% endblock %}
</div>

파생 template

{% extends 'blog/base.html' %}

{% block content %}
    <h1>New post</h1>
    <form method="POST" class="post-form">{% csrf_token %}
        {{ form.as_p }}
        <button type="submit" class="save btn btn-default"><i class="fas fa-save"></i></button>
    </form>
{% endblock %}

3. 템플릿 필터 { ... | ~ }

- 템플릿 변수의 값을 특정한 형식으로 변환할 때 사용한다.

- 변수명 '|' 뒤에 필터를 붙인다.

ex)

- length, upper, lower, linebreaksbr(행 바뀔 시 문단 바꿈)

 

추가 자료

(https://docs.djangoproject.com/en/1.11/ref/templates/builtins/#ref-templates-builtins-tags)