"2. 장고 탬플릿 태그, 탬플릿 변수"의 두 판 사이의 차이

Pywiki
둘러보기로 가기 검색하러 가기
잔글
 
(같은 사용자의 중간 판 9개는 보이지 않습니다)
2번째 줄: 2번째 줄:
 
view에서 탬플릿을 호출한 후 변수들을 처리하는데, 이 변수들을 넣을 공간을 태그로 표시하여 처리한다.
 
view에서 탬플릿을 호출한 후 변수들을 처리하는데, 이 변수들을 넣을 공간을 태그로 표시하여 처리한다.
  
−
파이썬 문법과 다른, 변수들을 처리하기 위해 탬플릿 내에서만 사용되는 문법이다.
+
view에서 탬플릿을 읽고 해당하는 지점을 기계적으로 처리하기때문에 html에서 주석으로 넣어도 작동해버린다.
  
−
=각종 데이터 불러오기=
+
파이썬 문법과 다른(장고에서만 사용함.), 변수들을 처리하기 위해 탬플릿 내에서만 사용되는 문법이다.
 +
 
 +
=탬플릿 변수=
 +
중괄호 2개로 감싸인 형태로, 변수와 그 하위속성을 불러오기 위해 사용한다.
  
 
== 객체, 변수 불러오기 ==
 
== 객체, 변수 불러오기 ==
28번째 줄: 31번째 줄:
 
2. 속성을 포함했는가?(객체(모델)의 속성을 보여준다.)
 
2. 속성을 포함했는가?(객체(모델)의 속성을 보여준다.)
  
−
3. 리스트인가?
+
3. 리스트인가? 리스트의 경우, <code>객체.0</code> 형태로 인덱스로 정보를 뽑아낼 수 있다.
  
 
정의되어있지 않은 변수의 경우, 빈 문자열을 반환한다. 이 문자열을 변경하려면 settings.py에서 TEMPLATE_TRINGS_IF... 이걸 지정해주면 된다.
 
정의되어있지 않은 변수의 경우, 빈 문자열을 반환한다. 이 문자열을 변경하려면 settings.py에서 TEMPLATE_TRINGS_IF... 이걸 지정해주면 된다.
41번째 줄: 44번째 줄:
 
|-
 
|-
 
|하위객체
 
|하위객체
−
|예컨대, question이라는 모델 아래에 answer이라는 모델이 연결되어 있다면, question을 템플릿에서 받은 후, 하위 모델에 접근할 수 있다.
+
|예컨대, Question이라는 모델 아래에 Answer이라는 모델이 연결되어 있다면, Question을 템플릿에서 받은 후, 하위 모델에 접근할 수 있다.
  
 
<nowiki>{{question.하위모델_set.all}}</nowiki> 형태로 하위모델을 모두 불러올 수 있다.
 
<nowiki>{{question.하위모델_set.all}}</nowiki> 형태로 하위모델을 모두 불러올 수 있다.
49번째 줄: 52번째 줄:
  
  
−
테이블명.속성_set.all : 테이블의 해당 속성 기록 모두를 의미한다.
+
테이블명.속성_set.all : 테이블(모델)의 하위에 속하는 테이블(모델) 모두를 의미한다.
−
 
 
−
_set.all : 속성의 모든 레코드 가져오기...
 
 
|글에 달린 답변 불러오기.
 
|글에 달린 답변 불러오기.
 
|-
 
|-
60번째 줄: 61번째 줄:
 
|글의 작성자 불러오기.
 
|글의 작성자 불러오기.
 
|}
 
|}
 +
 +
= 탬플릿 태그 =
 +
{% %} 로 둘러싸인 형태로, 특수한 기능을 구현하기 위해 사용한다.
  
 
== url 불러오기 ==
 
== url 불러오기 ==
68번째 줄: 72번째 줄:
 
|{% url 인덱스 %}
 
|{% url 인덱스 %}
 
|하드코딩 대신 인덱스를 쓰기 위한 태그. urls.py의 path에서 name속성에 기입한 인덱스 주소를 불러온다.
 
|하드코딩 대신 인덱스를 쓰기 위한 태그. urls.py의 path에서 name속성에 기입한 인덱스 주소를 불러온다.
−
앱 이름을 지정했다면 {% url 앱이름:인덱스 %} 형태로 쓰인다.
+
앱 이름을 지정했다면 {% url '앱이름:인덱스' %} 형태로 쓰인다.
  
−
변수를 보낼 수도 있어  <code>{% url 앱이름:인덱스 변수명 변수명2 %}</code> 형태로도 가능하다.
+
변수를 보낼 수도 있어  <code>{% url '앱이름:인덱스' 변수명 변수명2 %}</code> 형태로도 가능하다.
 
|}
 
|}
  
 
=== 템플릿에서 링크 연결 ===
 
=== 템플릿에서 링크 연결 ===
−
<a href = "{% url '주소' 넘길변수%}">나타낼내용</a>
+
url을 사용하기 위해선 다음과 같은 방법이 있다. 일반적으로 <a href="http://도메인/경로"></a> 형태로 사용하는데, 실제 주소 대신 다음과 같이 사용할 수 있다.
 +
{| class="wikitable"
 +
!방법
 +
!설명
 +
|-
 +
|기본 형태(하드코딩)
 +
|<syntaxhighlight lang="html+django">
 +
<a href="http://도메인/주소"></a>
 +
</syntaxhighlight>도메인이 바뀌거나 변경이 생기면 하드코딩의 경우 모든 페이지에서 일일이 바꾸어주어야 하는 불편이 있다.
 +
|-
 +
|태그 사용(인덱스 사용)
 +
|<syntaxhighlight lang="html+django">
 +
<a href = "{% url '인덱스' 넘길변수%}">나타낼내용</a>
 +
</syntaxhighlight>앱 안의 urls.py에서 지정한 name 속성을 따라 연결한다.
 +
 
 +
앞쪽의 도메인이나, 경로가 변경되어도 자동으로 잡아주어 편리하다.
 +
|-
 +
|태그 사용(이름공간 사용)
 +
|<syntaxhighlight lang="html+django">
 +
<a href = "{% url '이름공간:인덱스' 넘길변수%}">나타낼내용</a>
 +
</syntaxhighlight>앱 안의 urls.py에서 지정한 appname변수를 이름공간으로 사용하고, name 속성을 인덱스로 사용하여 연결한다.
 +
 
 +
각 앱에서 인덱스가 겹치는 것을 방지할 수 있다.
 +
|}
 
==정적 파일 불러오기==
 
==정적 파일 불러오기==
 
{| class="wikitable"
 
{| class="wikitable"
85번째 줄: 112번째 줄:
 
|}
 
|}
  
−
= 조건문 =
+
== 조건문 ==
 
탬플릿 내에서 조건문과 분기문을 사용할 수 있다.
 
탬플릿 내에서 조건문과 분기문을 사용할 수 있다.
 +
 +
사용할 수 있는 불린연산자는 다음과 같다. <code>and, or, not, and not, ==, !=, <, >, <=, >=, in, not in</code>
  
 
===분기문===
 
===분기문===
 +
in 구문과 비교연산자도 그대로 사용 가능하다.
 
{| class="wikitable"
 
{| class="wikitable"
 
!형태
 
!형태
97번째 줄: 127번째 줄:
 
|객체가 있는지 확인, 있으면 endif 사이의 문장을 보여준다.
 
|객체가 있는지 확인, 있으면 endif 사이의 문장을 보여준다.
 
ex) {% if question_list %} 는 question_list가 있을 때 하위의 명령을 실행하라는 의미.
 
ex) {% if question_list %} 는 question_list가 있을 때 하위의 명령을 실행하라는 의미.
 +
 +
  
  
103번째 줄: 135번째 줄:
 
{% endif %}로 닫아주어야 함에 유의.
 
{% endif %}로 닫아주어야 함에 유의.
 
|{% if 객체 %}
 
|{% if 객체 %}
 +
....
 
{% endif %}
 
{% endif %}
 
|-
 
|-
 
|여러 조건 넣기
 
|여러 조건 넣기
 
|조건에 해당하는 부분 사이의 문장을 보여준다.
 
|조건에 해당하는 부분 사이의 문장을 보여준다.
−
|{% if 조건문1 %}
+
|<syntaxhighlight lang="html+django">
−
{% elif 조건문2 %}
+
{% if 조건문1 %}
−
 
+
    명령
−
{% else %}
+
{% elif 조건문2 %}
−
 
+
    명령
−
{% endif %}
+
{% else %}
 +
    명령
 +
{% endif %}
 +
</syntaxhighlight>
 
|}
 
|}
 
===반복문===
 
===반복문===
122번째 줄: 158번째 줄:
 
{% endfor %}
 
{% endfor %}
 
|파이썬의 문법과 다를 건 거의 없다.
 
|파이썬의 문법과 다를 건 거의 없다.
−
사용할 수 있는 불린연산자는 다음과 같다. <code>and, or, not, and not, ==, !=, <, >, <=, >=, in, not in</code>
 
 
|-
 
|-
 
|{% if not forloop.last %}
 
|{% if not forloop.last %}
 
|for문의 마지막인지 아닌지 여부를 담는 변수 등이 있다.
 
|for문의 마지막인지 아닌지 여부를 담는 변수 등이 있다.
−
(세거나 그런 것들이...)
+
(세거나 그런 것들이...) for문 안에 넣어서 사용한다.
 +
|-
 +
|{% for key, value in 사전.items %}
 +
<nowiki>{{key}}</nowiki> : <nowiki>{{value}}</nowiki>
 +
 
 +
{% endfor %}
 +
|사전 안에 든 것은 .items를 붙여주어야 한다.
 +
리스트 안에 담긴 변수들을 각각 꺼내어 사용할 수도 있다.
 +
|}
 +
 
 +
==== 루프세트 ====
 +
for문 안에서 사용할 수 있는 기능들.
 +
{| class="wikitable"
 +
!기능
 +
!태그
 +
|-
 +
|for문 안에서 몇 번째 루프인지를 1번부터 세어준다.
 +
|<nowiki>{{forloop.counter}}</nowiki>
 +
|-
 +
|for문 안에서 몇 번째 루프인지를 0번부터 세어준다.
 +
|<nowiki>{{forloop.counter0}}</nowiki>
 +
|-
 +
|거꾸로 카운팅해준다. 1까지 세어준다.
 +
|<nowiki>{{forloop.revcounter}}</nowiki>
 +
|-
 +
|거꾸로 카운팅해준다. 마지막값이 0이 되게끔 카운팅.
 +
|<nowiki>{{forloop.revcounter0}}</nowiki>
 +
|}
 +
 
 +
== 변수 선언 ==
 +
변수를 view로부터 받기도 하지만, 직접 선언할 수도 있다.
 +
 
 +
굳이 탬플릿 내에서 변수를 설정할 필요가 있을까 싶긴 하다; 가능한 데이터는 뷰 내에서 다루어야 프론트 개발자와의 업무분장이 쉬워질 듯한데..
 +
{| class="wikitable"
 +
!태그
 +
!기능
 +
!응용
 +
|-
 +
|{% with 변수='값' %}
 +
{% endwith %}
 +
|변수와 값을 설정한다.
 +
|태그 사이에서 <nowiki>{{변수}}</nowiki> 형태로 기입한다.
 
|}
 
|}
−
forloop.counter 등 정리해보자.
 
  
 
== 기타 ==
 
== 기타 ==
142번째 줄: 217번째 줄:
 
|}
 
|}
  
 +
=== 기타 ===
 +
{| class="wikitable"
 +
!태그
 +
!기능
 +
|-
 +
|{# 내용 #}
 +
|내용을 주석 처리한다. html주석 안에 탬플릿태그를 넣으면 이조차 데이터로 취급하니, 가끔 쓰일 때가 있다.
 +
|}
  
 
[[분류:장고 탬플릿]]
 
[[분류:장고 탬플릿]]

2023년 10월 25일 (수) 12:09 기준 최신판

1 개요[편집 | 원본 편집]

view에서 탬플릿을 호출한 후 변수들을 처리하는데, 이 변수들을 넣을 공간을 태그로 표시하여 처리한다.

view에서 탬플릿을 읽고 해당하는 지점을 기계적으로 처리하기때문에 html에서 주석으로 넣어도 작동해버린다.

파이썬 문법과 다른(장고에서만 사용함.), 변수들을 처리하기 위해 탬플릿 내에서만 사용되는 문법이다.

2 탬플릿 변수[편집 | 원본 편집]

중괄호 2개로 감싸인 형태로, 변수와 그 하위속성을 불러오기 위해 사용한다.

2.1 객체, 변수 불러오기[편집 | 원본 편집]

태그 기능 응용
{{변수}}

{{객체}}

변수를 사용할 수 있다.(객체를 출력한다.)

정의가 되어있지 않은 경우, 빈 문자열이 된다. 빈 문자열은 settings.py에서 TEMPLATE_STRING_IF_INVALID 속성을 지정해주면 된다.(기본 빈문자열)

{{객체.속성}} 변수처럼 사용한다. '.'문법으로 하위속성에 접근할 수 있다.

하위변수에 접근할 땐 '.'을 쓴다. 변수.종속 형태로 쓴다.

다음의 순서로 확인하여 하위값을 반환한다.

1. 사전인가?

2. 속성을 포함했는가?(객체(모델)의 속성을 보여준다.)

3. 리스트인가? 리스트의 경우, 객체.0 형태로 인덱스로 정보를 뽑아낼 수 있다.

정의되어있지 않은 변수의 경우, 빈 문자열을 반환한다. 이 문자열을 변경하려면 settings.py에서 TEMPLATE_TRINGS_IF... 이걸 지정해주면 된다.

2.2 테이블(모델) 불러오기[편집 | 원본 편집]

모델 설명 예시
하위객체 예컨대, Question이라는 모델 아래에 Answer이라는 모델이 연결되어 있다면, Question을 템플릿에서 받은 후, 하위 모델에 접근할 수 있다.

{{question.하위모델_set.all}} 형태로 하위모델을 모두 불러올 수 있다.

연결된 것만 불러오려면 _set까지만 쓴다.


테이블명.속성_set.all : 테이블(모델)의 하위에 속하는 테이블(모델) 모두를 의미한다.

글에 달린 답변 불러오기.
상위객체 반대로 상위객체를 불러오는 것도 가능하다.

예컨대, Question 모델에서 author = models.ForeignKey(User, on_delete=models.PROTECT) 형태가 되었다면 뷰나 탬플릿에서 question.author.username 따위로 상위객체의 속성을 가져올 수 있다.

글의 작성자 불러오기.

3 탬플릿 태그[편집 | 원본 편집]

{% %} 로 둘러싸인 형태로, 특수한 기능을 구현하기 위해 사용한다.

3.1 url 불러오기[편집 | 원본 편집]

태그 기능
{% url 인덱스 %} 하드코딩 대신 인덱스를 쓰기 위한 태그. urls.py의 path에서 name속성에 기입한 인덱스 주소를 불러온다.

앱 이름을 지정했다면 {% url '앱이름:인덱스' %} 형태로 쓰인다.

변수를 보낼 수도 있어 {% url '앱이름:인덱스' 변수명 변수명2 %} 형태로도 가능하다.

3.1.1 템플릿에서 링크 연결[편집 | 원본 편집]

url을 사용하기 위해선 다음과 같은 방법이 있다. 일반적으로 <a href="http://도메인/경로"></a> 형태로 사용하는데, 실제 주소 대신 다음과 같이 사용할 수 있다.

방법 설명
기본 형태(하드코딩) 
<a href="http://도메인/주소"></a>
도메인이 바뀌거나 변경이 생기면 하드코딩의 경우 모든 페이지에서 일일이 바꾸어주어야 하는 불편이 있다.
태그 사용(인덱스 사용) 
<a href = "{% url '인덱스' 넘길변수%}">나타낼내용</a>
앱 안의 urls.py에서 지정한 name 속성을 따라 연결한다.

앞쪽의 도메인이나, 경로가 변경되어도 자동으로 잡아주어 편리하다.

태그 사용(이름공간 사용) 
<a href = "{% url '이름공간:인덱스' 넘길변수%}">나타낼내용</a>
앱 안의 urls.py에서 지정한 appname변수를 이름공간으로 사용하고, name 속성을 인덱스로 사용하여 연결한다.

각 앱에서 인덱스가 겹치는 것을 방지할 수 있다.

3.2 정적 파일 불러오기[편집 | 원본 편집]

태그 기능
{% static '파일이름or경로' %} 정적 파일을 불러올 때 사용하는 태그이다. 해당 파일의 절대경로를 URL로 만들어준다.(경로는 프로젝트루트부터)

href나 src 따위의 경로 안에 이 태그를 사용하면 알아서 찾아와 대입해준다.

3.3 조건문[편집 | 원본 편집]

탬플릿 내에서 조건문과 분기문을 사용할 수 있다.

사용할 수 있는 불린연산자는 다음과 같다. and, or, not, and not, ==, !=, <, >, <=, >=, in, not in

3.3.1 분기문[편집 | 원본 편집]

in 구문과 비교연산자도 그대로 사용 가능하다.

형태 기능 태그
기본형 객체가 있는지 확인, 있으면 endif 사이의 문장을 보여준다.

ex) {% if question_list %} 는 question_list가 있을 때 하위의 명령을 실행하라는 의미.



{% if 객체>0 and 객체<=10 %} 형태의 사용도 가능하다.

{% endif %}로 닫아주어야 함에 유의.

{% if 객체 %}

.... {% endif %}

여러 조건 넣기 조건에 해당하는 부분 사이의 문장을 보여준다. 
{% if 조건문1 %}
    명령
{% elif 조건문2 %}
    명령
{% else %}
    명령
{% endif %}

3.3.2 반복문[편집 | 원본 편집]

태그 기능
{% for 변수 in 리스트 %}

{% endfor %}

파이썬의 문법과 다를 건 거의 없다.
{% if not forloop.last %} for문의 마지막인지 아닌지 여부를 담는 변수 등이 있다.

(세거나 그런 것들이...) for문 안에 넣어서 사용한다.

{% for key, value in 사전.items %}

{{key}} : {{value}}

{% endfor %}

사전 안에 든 것은 .items를 붙여주어야 한다.

리스트 안에 담긴 변수들을 각각 꺼내어 사용할 수도 있다.

3.3.2.1 루프세트[편집 | 원본 편집]

for문 안에서 사용할 수 있는 기능들.

기능 태그
for문 안에서 몇 번째 루프인지를 1번부터 세어준다. {{forloop.counter}}
for문 안에서 몇 번째 루프인지를 0번부터 세어준다. {{forloop.counter0}}
거꾸로 카운팅해준다. 1까지 세어준다. {{forloop.revcounter}}
거꾸로 카운팅해준다. 마지막값이 0이 되게끔 카운팅. {{forloop.revcounter0}}

3.4 변수 선언[편집 | 원본 편집]

변수를 view로부터 받기도 하지만, 직접 선언할 수도 있다.

굳이 탬플릿 내에서 변수를 설정할 필요가 있을까 싶긴 하다; 가능한 데이터는 뷰 내에서 다루어야 프론트 개발자와의 업무분장이 쉬워질 듯한데..

태그 기능 응용
{% with 변수='값' %}

{% endwith %}

변수와 값을 설정한다. 태그 사이에서 {{변수}} 형태로 기입한다.

3.5 기타[편집 | 원본 편집]

3.5.1 보안관련[편집 | 원본 편집]

태그 기능
{% csrf_token %} CSRF를 공격을 막기 위한 수단.(서버로 들어온 요청이 사이트 내부에서 온 게 맞는지 확인하기 위한 용도)

form태그 바로 아래에 사용한다.

3.5.2 기타[편집 | 원본 편집]

태그 기능
{# 내용 #} 내용을 주석 처리한다. html주석 안에 탬플릿태그를 넣으면 이조차 데이터로 취급하니, 가끔 쓰일 때가 있다.
원본 주소 "http://id8436.iptime.org:2786/mediawiki/index.php?title=2._장고_탬플릿_태그,_탬플릿_변수&oldid=1593"