[Django] 웹 프로그래밍 실습(3) - 템플릿 시스템( 템플릿 변수, 필터, 태그)

django queryset (장고 쿼리셋) 관련 내용 - gaussian37

 

1. 템플릿 시스템이란?

- MTV 모델에서 사용자에게 보여주는 화면, 즉 UI를 담당하고 있는 기능을 말한다.

  장고의 템플릿 시스템은 템플릿 코드를 해석하여 템플릿 파일로 만든다.

  이 과정을 '렌더링'이라고 한다.

 

 

2. 템플릿 변수

{{변수명}}
EX) {{TEST.index}}

- 일반 프로그래밍처럼 변수명을 정의할 수 있다. 변수명 뒤에 도트도 사용할 수 있다.

  해석은 TEST가 사전 타입인지 확인하고 그렇다면 TEST["index"]로 해석한다.

  그렇지 않으면 TEST 속성을 찾는다. index라는 속성이 있으면 TEST.index로 해석한다.

  그것도 아니면 TEST가 리스트인지 확인한다. 그렇다면 TEST[index]로 해석한다.

 

 

3. 템플릿 필터

{{ name|lower}}

- 템플릿 변수에 필터를 적용하여 변수의 출려 결과를 변경할 수 있다.

  해당 필터는 name 변수값의 모든 문자를 소문자로 바꿔주는 필터이다.

  이외에도 기본값 설정, 형식 지정, 길이 등 다양한 필터가 존재한다.

 

 

4. 템플릿 태그

 

1.  {% for %}

 

<ul>
{% for i in list %}
  <li>{{Test.name}}</li>
{% endfor %}
</ul>

 

- 파이썬의 for문 기능을 html에서 사용한다고 봐도 무방하다.

  for 태그에는 여러 변수들이 사용된다. 해당 내용은 아래 표를 참고하면 된다.

변수명	설명
test.counter	현재까지 루프를 실행한 루프 카운트 (1부터 카운트)
test.counter()	현재까지 루프를 실행한 루프 카운트 (0부터 카운트)
test.revcounter	루프 끝에서 현재가 몇 번째인지 카운트한 숫자 (1부터 카운트)
test.revcounter()	루프 끝에서 현재가 몇 번째인지 카운트한 숫자 (0부터 카운트)
test.first	루프에서 첫 번째 실행이면 True 값
test.last	루프에서 마지막 실행이면 True 값
test.parentloop	중첩된 루프에서 현재의 루프 바로 상위의 루프를 의미

 

2.  {% if %}

 

{% if list %}
	{{list | length}}
{% else %}
	No list
{% endif %}

 

- if 태그에는 다음과 같은 불린 연산자를 사용할 수 있다.

  (and, or, not, and not, ==, !=, <, >, <=, >=, in, not in)

 

3.  {% csrf_token %}

- POST 방식의 form 태그를 사용하는 템플릿 코드에서는 CSRF 공격을 방지하기 위해 사용한다.

  예시는 아래 사진을 참고하면 된다.

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

 

4.  {% url %}

- URL 하드 코딩을 방지한다. 쉽게 말하면 URL이 변경되어도 URLconf 모듈만을 참조하여

  원하는 URL을 추출할 수 있게 해준다.

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

<form action="/test/3/vote/" method="post">

- 즉 첫 번째 코드는 URLconf만 수정하면 되지만, 두 번째 코드는

  해당 코드를 포함한 모든 html 파일을 일일히 수정해야 한다.

 

5.  {% load %}

- 해당 태그는 사용자 정의 태그 및 필터를 로딩해준다.

{% load static %}

해당 코드는 static 정적 파일을 한 곳에 관리하여 html에 불러올 때 html 파일 맨 위에 작성해준다.

(설정 방법은 아래 링크를 참조)

[DJANGO] 장고 - STATIC 정적파일 설정하기

 

 

5. 템플릿 주석

- # 사용하여 주석처리

{# {% if test %} bar {% else %} #}

 

- comment 사용하여 주석처리

{% comment "주석이유" %}
<p> test </p>
{% endcomment %}

 

 

6. 템플릿 코드 렌더링 시 주의사항

- 템플릿 코드 사용중 변수에 HTML 태그가 들어있는 경우 XSS 공격을 당할 수 있다.

  해당 공격을 피하기 위해서 자동 이스케이프 기능을 장고에서 제공하고 있다.

 

+ 자동 이스케이프 기능을 제거하는 방법 2가지

{{test | safe}}

{% autoescape off %}
{{test}}
{% endautoescape %}