Django Template System

 

우리의 성경이 될 Django의 공식 문서

https://docs.djangoproject.com/en/4.2/

Django documentation | Django documentation

 

💡 이 세상에 존재하는 모든 Django 강의는 이 문서documentation를 벗어나지 않습니다.

이 문서를 잘 요약한 블로그가 더 익숙할 수는 있지만, 이 문서가 핵심이라는 걸 기억해 두세요!

(Django 문서 정도면 정말 깔끔하게 정리가 잘 되어있는 편입니다)

 

 

필요한 게 있을 땐, 검색창에서 검색하여 필요한 정보를 얻으면 된다!

 

개발 학습을 위해 아래 두 내용을 기억합시다!

✔️ 가능하면 영어로 볼 것.
✔️ 문서도 보는 버릇을 들여야 보는 눈이 생긴다.

 

---

Django Template System

 

✔️ Template?

Django에서의 Template은 데이터를 보여주는 로직을 작성하는 부분

 

Template 기본 경로

• app_name / templates

❓ 그렇다면 Django는 템플릿 파일이 여기에 있다는걸 어떻게 기가막히게 찾지?

 

Django는 setting.py의 TEMPLATES의 APP_DIRS를 보고 답을 찾습니다!

→ 이를 통해 Django는 template 파일을 찾을 때,

App안에 있는 templates라는 이름으로 된 경로를 보고, 그 안에 있는 template들을 찾게 됩니다.

 

우리는 HTML 뿐만 아니라 데이터를 반영해서 보여주고 싶다!
이러한 요구를 해결해 주기 위해 Django의 Template System은 데이터 표현을 위한 다양한 도구를 제공하고 있습니다.

---

html파일을 동적으로 바꿔주려면?

➡️ 내가 원하는 데이터를 html파일에 넣어준다

➡️  데이터 표현

➡️ DTL!

 

Django Template Language (DTL)

Django Template 안에서 사용하는 문법으로 Python에 익숙할 Django 개발자를 위해 Python과 비슷하게 되어 있습니다.

여기에서 주의할 점은 Python으로 만들어져있어 비슷하지만,  Python이 동작하는 것이 아니라는 것!
파이썬과는 다릅니다 !!

 

DTL 문법

변수, Variable

• 변수의 기본 형태  {{ 중괄호 두개 }}

{{ variable }}

 

• view의 context로 넘긴 데이터(딕셔너리 형태)를 접근할 수 있음
• . 을 사용하여 변수의 속성값에 접근 가능
• render() 의 세번째 인자인 context에 dict 형태로 넘겨진 데이터 중
• key 값이 template에서 사용 가능한 변수가 됨
  (지금 설명만 보고 헷갈리시죠?  해보면 이해될겁니다 걱정 X !)

 

필터, Filters

• 필터의 기본 형태  {{ 중간에 버티컬 바 | 사용 }}

{{ variable|filter }}

• 변수에 어떠한 작업을 추가적으로 더해 수정하고 싶을때 사용
• 약 60개의 built-in template filter가 제공되며 일부 필터는 인자를 받기도 함. ex. {{ value|date:"D Y M D" }}
  • 모든 건 공식문서에
    (https://docs.djangoproject.com/en/4.2/ref/templates/builtins/#built-in-filter-reference)

• 필터 사용 예시
  • view에서 넘겨준 데이터는 Aiden Lim 이런식이지만 보여줄때는 소문자로 보이게 하고 싶다면

{{ first_name|lower }}

• 내가 필요한 함수가 없다면 커스텀 필터를 만들어 줄 수도 있다.

 

태그, Tags

• 태그의 기본 형태

{% tag %}

• 반복문 또는 논리, 조건문을 수행하여 제어 흐름을 만들거나 특수한 기능을 수행
• 일부는 시작 태그와 종료 태그가 있음

{% if ~ %}
{% endif %}

❗ DTL에 쓰이는 형태가 python과 비슷하죠?
하지만 꼭 기억해 두셔야 할 것!!

파이썬 코드가 안쪽에 들어가는것이 아님!
DTL 문법에 불과
(공식문서 참조)

 

 

주석, Comments

{# 한 줄 주석 #}

{% comment %}
 여러줄
 주석
{% endcomment %}

---

실습

/hello 로 들어오면 아래의 화면이 나오도록 작성해 주세요.

• urls, view, template 작성 필요

🔽 정답

 

 

이름을 바꾸고 싶다면?

• context 넘기기
  
  ❗ 이제는 template에서 사용할 데이터를 view에서 context에 담아 넘겨볼게요!
  

 

• 더 많은 데이터 넘기기

 

• 템플릿 필터 사용하기

🔽 HINT

length, join 함수를 이용하면 됩니다!

 

 

• 템플릿 태그 사용하기

• HINT : {% for %}

 

---

 

🧐 그런데 지금 코드를 살펴보면, 코드 반복이 많죠?

• 앞으로 늘어날 페이지들을 생각하면 더욱 많은 중복코드가 생길 것 같은데?
  → 만약 부트스트랩 CDN을 넣는다고하면?
  → 모든 코드의 에 CDN을 다 넣어야줘야함

이런 코드 중복 문제를 해결하기 위해 Django는 템플릿 상속을 지원합니다!

 

Template Inheritance (템플릿 상속)

• 코드의 재사용성에 초점이 맞춰져 있으며, 상위 템플릿에 공통이 될 부분을 정의하고
  하위 템플릿에서 달라질 부분을 블록(Block)으로 만드는 Skeleton 형태

 

문법은 대략

• {% block block_name %}  {% endblock block_name %}
  • 상위 템플릿에서 하위 템플릿 마다 달라질 부분을 정의
    * 하나만 적을 수 있는게 아닌, 여러개를 적을수도 있다!
    * endblock은 닫아주기만 하는 것이기 때문에 옆에 block_name을 적지 않아도 작동하지만,
    블럭이 여러개라면 헷갈릴 수도 있으니 가독성을 위해 적어주는 것이 좋다.
    
• {% extends 'template_name' %}
  • 하위 템플릿에서 상위 템플릿을 상속해서 확장한다는 것
  • 템플릿의 가장 최상단에 위치해야함
  • 다중상속을 지원하지 않음
    → 만약 다중 상속같은 구조를 만들고 싶다면
    A를 상속 받아서 B를 만든 후 → B를 상속받아 C를 만드는 형태로 해야한다!

 

프레임워크는 실전이 빠릅니다

• base.html 생성
  • 공통적으로 적용될 상위 템플릿 (주로 base.html 이름 사용)

 

• 하위 템플릿에서 상속
  • extends 태그를 이용해서 상속할 상위 템플릿 지정
  • block 태그를 이용해서 달라진 부분만 명시

템플릿 상속 적용 후 (코드 실행하면, 화면 그대로 똑같이 잘 보임!)

템플릿 상속 적용 전

 

Template 참조 위치

• base.html 파일의 위치가 articles 앱 안쪽의 templates에 있는게 불편하다.
  • 하나의 프로젝트는 여러개의 앱으로 구성될 수 있음
  • 만약 users 라는 앱이 추가되고 거기에서도 base.html 을 써야한다면?
    • articles / templates / base.html 에서 가져와서 users에서 사용해야함
      → 구조적으로 이상하다 → 공통된 템플릿은 다른곳에 모아두고 싶다 !!

→ 여러 앱에서 공통적으로 사용하는 템플릿이 있다면?
→  가장 최상위(상위 my_first_pit아래!) 에 templates 폴더 생성(폴더 이름은 상관없음)
→ articles에 있던 base.html을 드래그하여 이 경로로 옮겨준다.

 

 

커스텀 템플릿 경로 추가하기

• Django가 템플릿을 참조하는 위치는 settings.py에서 결정됨

• DIRS에 Django가 추가적으로 템플릿을 참조할 위치를 추가할 수 있음
  
  
  
• my_first_pjt 최상단 경로에 templates 디렉토리 생성 (이름은 달라져도 되지만 templates 권장)

디렉토리 위치를 잘 보고 만들자

 

• 위 폴더 아래에 base.html 을 두자

 

 

이제 Django가 우리가 새로 생성한 templates 에서도 템플릿을 참조할 수 있게 적어주면 된다.

→   이렇게 해주면, 장고가 app안을 먼저 뒤져본 후, 없으면 이 경로에서도 찾아주는것!

 BASE_DIR

• Django가 친절하게 ‘너네 이 위치 많이 참조하더라?’ 싶어서 적어둔 프로젝트 최상단 경로값
  settings.py 파일 위쪽을 확인해보면 더 자세히알 수 있다.

settings.py

 

__file__  :  현재 이 파일

BASE_DIR = 현재 이 파일(setting.py)의 부모(my_first_pit == 앱 폴더)의 부모(MY_FIRST_PIT == 프로젝트 폴더) 위치

 

= OS.path()나 (MY_FIRST_PIT/my_first_pit/setting.py/)이런식으로 문자열로 경로를 다 적어줘도 된다.

from pathlib import Path 패스 라이브러리를 사용했기 때문에 저렇게 사용이 가능한것!

 

더 궁금하다면 공식문서를 참조하자.
https://docs.python.org/ko/3.10/library/pathlib.html#module-pathlib

 

---