[Django] Template System

0. Overview

• MVT 에서 UI를 담당하고 있는 시스템으로, Template문법으로 작성된 Template 코드를 해석하여 Template 파일로 결과물을 만든다.
• Rendering : Template code -> Template File(HTML / JSON / XML 등) 으로 해석하는 과정

 

1. Variable

• 변수는 {{ variable }} 형태로 작성한다.
• 변수의 속성에 접근하기 위해서는 . 를 사용하는데, 변수 타입에 따라 다르게 해석한다. 아래의 순서대로 lookup을 시도한다.

 

ex) foo.bar

① if foo : dictionary -> foo['bar']

② if bar is exist -> foo.bar

③ if foo is list -> foo[bar] 

 

 

2. Filter

• 어떤 객체나 처리 결과에 추가 명령을 적용하여 최종 결과를 변경하는 것이다.
• 일종의 Pipeline 개념으로 | 를 통해 구현할 수 있고, 여러개의 | 를 사용하여 Chain 형태로 사용하는 것도 가능하다.
• 더 많은 Filter 예시는 아래 링크에서 확인할 수 있다.
  https://docs.djangoproject.com/en/4.0/ref/templates/builtins/#built-in-filter-reference

#ex1) name 변수 값의 모든 문자 소문자로 
{{ name|lower }}

#ex2) text 변수 값 중 특수문자 escape 후 HTML <p> 태그 반환
{{ text|lower|linebreaks }}

#ex3) bio 변수 값 중 앞의 30개 단어만 
{{ bio|truncatewords:30 }}

#ex4) bio 변수 값 중 앞의 30개 단어만 
{{ bio|truncatewords:30 }}

#ex5) value 변수 값 False/없는 경우 nothing 으로
{{ value|default:"nothing" }}

#ex6) value 변수 길이 반환 
{{ value|length }}

#ex7) value 변수 HTML 태그 없애줌 
{{ value|striptags }}

 

 

3. Tag

• 태그는 { % tag % } 형태로 작성한다.
• 텍스트 결과물을 만들기도 하고, 템플릿 로직을 제어하기도 하고, 외부 파일을 템플릿 내로 로딩하기도 한다.
• 일반적으로 {% for %} , {% if %}를 가장 많이 사용하며, 더 많은 tag 예시는 아래 링크에서 확인할 수 있다.
  https://docs.djangoproject.com/en/4.0/ref/templates/builtins/#built-in-tag-reference

1) {% for %}

• 일반적으로 Programming Language에 사용되는 For와 로직은 동일하다.
  : loop를 돌면서 item들을 출력한다
• {% endfor %}  태그를 통해 loop의 끝을 명시해 주어야 한다.

ex) <li> 태그와 사용시, 

<ul>
{% for athlete in athlete_list %}
   <li>{{ athlete.name }}</li>
{% endfor %}
</ul>

 

• loop를 돌면서 사용할 수 있는 다양한 자체 변수를 제공한다.
  - forloop.counter : 1부터 loop count 를 담은 변수
  - forloop.counter() : 0부터 loop count 를 담은 변수
  - forloop.revcounter : loop 끝에서부터 현재가 몇 번째인지 1부터 count를 담은 변수
  - forloop.revcounter() : loop 끝에서부터 현재가 몇 번째인지 0부터 count를 담은 변수
  - forloop.first : loop에서 첫 번째면 True
  - forloop.last : loop에서 마지막이면 True
  - forloop.parentloop : 중첩 loop에서 바로 상위 loop

 

2) {% if %}

• 일반적으로 Programming Language에 사용되는 IF와 로직은 동일하다.
  : lf조건 만족시 item을 출력
• {% endif %}  태그를 통해 loop의 끝을 명시해 주어야 한다.
• {% if %} 태그와 함께 Filter 및 and/or/>/</in 등의 boolean 연산자를 함께 사용할 수 있다. (ex. {% if athlete_list|length>1 %})

{% if athlete_list %}
  Number of athletes : {{athlete_list|length}}
{% elif athlete_in_locker_room_list %}
  Atheletes should be out of the locker room soon!
{% else %}
  No athletes.
{% endif %}

 

3) {% csrf_token %}

• POST 방식의 <form>을 사용하는 Template 코드에서 CSRF공격을 방지하기 위해 사용한다.
  - Django는 내부적으로 CSRF Token값의 유효성을 검증한다 (검증에 실패하면 403 Error)
  - Token 값이 유출될 수도 있으므로, 외부 URL로 보내는 <form>에는 사용하지 않도록 한다.
• 위치는 <form> 엘리먼트의 첫 줄 다음에 태그를 작성한다.

<form action="." method="post">{% csrf_token %}

 

4) {% url %}

• source에 URL 하드코딩을 방지하며, URL이 변경되더라도 URL conf만을 참조하여 원하는 URL 을 추출할 수 있다.
• {% url 'namespace:view-name' arg1 arg2 ...%} 형태
  - namespace : urls.py의 include() or app_name 변수에 정의한 이름
  - view-name : urls.py 파일에 정의한 URL 패턴 이름
  - argN : view 함수에서 사용하는 argument

<form action="{% url 'polls:vote' question.id %}" method="post">



5) {% with %}

• 특정 값을 임시로 저장해두는 변수 역할
  - 부하가 큰 동작의 결과를 저장해두어 동일 동작시 부하를 줄일 수 있음

{% with total = business.employees.count %}
    {{ total }} people works at business
{% endwith %}

 

6) {% comment %}

• 여러 줄의 코드 주석처리시 사용
• 중첩하여

{% comment "Optional note" %}
<p> Commented out text here</p>
{% endcomment%}

*한 줄 주석 처리시 {# #} 형태로 사용

 

 

4. HTML Escape

템플릿 변수에 HTML 태그가 들어가 있는 경우, 그대로 렌더링 시 HTML 태그로 인식하지 않는 경우가 있다

ex) name = "<b>username" -> HTML에선 Bold로 바뀌어서 보임

Hello, {{ name }}

>> Hello <b>username

때문에 장고에선 자동 이스케이프 기능을 통해 해당 문자로 사용할 수 있도록 자동으로 변경하여 입력된다

ex)

• < → &lt; ( less than )
• > → &gt; ( greater than ) 
• ' → &#39; 
• " → &quot;
• & → &amp;

Auto escape 기능 비활성화 필요시 ( ex) HTML 태그 그대로를 출력하고 싶을 때) 

① safe 필터 사용

{{ data|safe }}

② {% auto escape %} 태그 활용

{% autoescape off %}
Hello {{ name }}
{% autoescafe %}

 

5.  Template Inheritance

• 템플릿 코드의 재 사용성, 일관성을 위해 사용한다
• {% block %} 태그를 통해 하위로 상속해 줄 부분을 지정해주면, 부모 템플릿의 구조를 그대로 재사용하고 {% block %} 부분만 재사용하면 된다.
  - 자식 템플릿에서 내용을 overriding할 수 있고, 내용을 정의하지 않고 부모 템플릿의 내용을 그대로 사용할 수 있다.
  - 자식 템플릿에서는 제일 상단에 {% extend %} tag를 통해 부모 템플릿을 상속 받을 것임을 알린다.
• 사이트 전체 / 하위 섹션 / 개별 페이지로 이어지는 3단계 상속을 권장한다
  ① 사이트 전체에 대한 base.html
  ② 하위 섹션 별 스타일을 담고 있는 base_news.html, base_sports.html 등 세부 페이지 ( ① 을 상속받음 )
• ③ 개별 페이지에 대한 템플릿. ( ② 를 상속받음 )

 

파이썬 웹 프로그래밍  - 4. Django 핵심기능