장고 템플릿 언어
- 지난 토픽에서 {% load static %}와 같이 사용하였는데, 이는 이번 토픽에서 공부할 템플릿 태그를 활용한 것입니다.
- 장고 템플릿 언어는 장고로 개발할 시 html 템플릿에서 사용할 수 있는 특별한 규칙 또는 문법이고,
템플릿 변수, 템플릿 필터, 템플릿 변수, 템플릿 코멘트 등이 있습니다.
- 이번 토픽에서는 위의 4가지에 대해 간단히 알아볼 것입니다.
- 자세한 내용은 공식 문서를 참고하시기 바랍니다.
https://docs.djangoproject.com/ko/2.2/ref/templates/language/
템플릿 변수
- 템플릿 변수는 {{ }}로 구성되어 있습니다.
- 다음 예제를 보면서 템플릿 변수가 무엇인지 알아보도록 합시다.
{% extends "base_generic.html" %}
{% block title %}{{ section.title }}{% endblock %}
{% block content %}
<h1>{{ section.title }}</h1>
{% for story in story_list %}
<h2>
<a href="{{ story.get_absolute_url }}">
{{ story.headline|upper }}
</a>
</h2>
<p>{{ story.tease|truncatewords:"100" }}</p>
{% endfor %}
{% endblock %}
- 위의 예제는 장고 공식 문서에 나와있는 예제입니다.
- {{ section.title }}와 같이 사용하는 모습을 볼 수 있습니다.
- 이는 나중에 다룰 부분인데, 뷰에서 템플릿으로 컨텍스트(context)를 전달할 수 있습니다.
즉, 함수에서 html 문서로 어떠한 객체를 보낼 수 있다는 것입니다.
{{ section.title }}와 같이 보냈다면, 뷰에서는 'section'이라는 객체를 html 문서로 보냈을 것이고, 그 'section'이라는 객체 안에는 'title'이라는 속성을 가지고 있을 것입니다.
- 즉, 장고에서는 장고 템플릿 변수를 사용하여 html 문서 상에서도 어떠한 객체의 속성들에 접근할 수 있고, 이를 출력할 수 있도록 지원합니다.
템플릿 필터
- 템플릿 변수의 값을 특정 형식으로 변환할 때 사용하고, 형식은 템플릿 변수 다음에 바('|')를 그은 다음 적용하고자 하는 필터를 명시합니다.
- 위의 예제에서 봤을 때, {{ story.headline | upper }}의 'upper'와 같은 것들을 말합니다.
'upper'라고 명시하였으므로, 'story.headline'의 값을 대문자 형식으로 변환하게 됩니다.
템플릿 태그
- 템플릿 태그는 {% %}로 구성되어 있습니다.
- 이전 토픽에서 사용하였던 {% load static %}와 같이 사용할 수도 있고, 위의 예제에서 볼 수 있듯이 if문 또는 for문와 같이 흐름을 제어할 수 있도록 작성할 수도 있습니다.
- HTML 문서는 프로그래밍 언어가 아니고 마크업 언어이기 때문에 단지 문서를 웹에서 띄워주는 역할을 하는 것이라고 배웠습니다. 그렇기 때문에 HTML 자체는 프로그래밍적 로직을 구현할 수 없습니다만 if문, for문와 같은 템플릿 태그를 사용한다면 가능할 수 있습니다.
따라서 앞에서 배웠던 템플릿 변수와 템플릿 태그를 활용한다면 간단한 처리도 가능하게 됩니다.
- {% extends %}와 같이 단독으로 사용할 수 있는 템플릿 태그들도 있지만, {% if %} 처럼 뒤에 {% endif %} 템플릿 태그를 반드시 닫아주어야 하는 것들도 있습니다.
템플릿 코멘트
- 말 그대로 HTML 문서 상에서 코멘트가 필요할 때 사용합니다.
- 이는 주석과 비슷한 역할을 하고, 이는 장고로 개발할 시 웹 브라우저에 의해 해석되어 출력되지 않습니다.
- 장고에서는 두 가지의 코멘트 형식을 제공합니다.
1. {# #}
2. {% comment %}
{% endcomment %}
- 1번 형식은 한 줄을 코멘트할 때 사용하고, 2번은 여러 줄을 코멘트할 때 '코멘트 태그' 사이에 코멘트를 적어주면 됩니다.
