TanzDev

Django Templates 복습 본문

기록보드/TIL

Django Templates 복습

Tanz-dev 2024. 4. 10. 15:33

Template이란? 

  • Django에서 Templates은 화면이다.
  • 데이터를 보여주는 로직을 작성할 수 있음
  • 데이터 표현을 위한 다양한 도구를 제공해준다.

Django Templates Language(*DTL)

  • 장고 템플릿에서 사용하는 문법 (템플릿문법이라고도함)
    • 주의 : Python에서 문법이랑 비슷하지만 Python에서 쓰는게 아님
  • 데이터를 표현하는 방법

DTL 문법

  1. 변수 (Variable) : 1순위
    • {{ variable }}
    • 표현하고 싶은곳에 {{ 변수 }}를 작성해주면 된다.
    • 이 변수는 View의 Context로 넘긴 데이터를 접근가능
  2. 필터 (Filters) : 선택
    • {{ first_name | filter }}
    • 변수에 어떠한 작업을 추가적으로 해주어야 할 때 선택적으로 사용
    • 약 60개의 built-in template filter가 제공되며 일부 필터는 인자를 제공받아야함
    • 필터 사용 예시
      • View에서 넘겨준 데이터는 LeeJungwoo 이지만, 소문자로 적용받고싶다면
      • {{ first_name | lower }} 를 적용해주면 소문자로 표기된다.
  3. 태그 (Tags) : 2순위
    • { % Tag %}
    • 반복과 논리를 수행하여 제어 흐름을 만들거나 특수한 기능을 수행
    • 일부는 시작태그와 종료태그가 있음
  4. 주석 (Comments) 
    • {# 한 줄 주석 #}

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

 

urlpatterns = [
    path("admin/", admin.site.urls),
    path("index/", views.index),
    path("users/", views.users),
    path("hello/", views.hello)
]

 

urls에 hello를 연결해두고

 

def hello(request):
    name = "정우"
    tags = ["python", "django", "html", "css"]
    books = ["해변의 카프카", "코스모스", "백설공주", "어린왕자"]
   
    context = {
        "name" : name,
        "tags" : tags,
        "books" : books,
    }
    return render(request, "hello.html", context)

 

view.py에 관련된 사항들을 적어두었다.

 

context는 개별적으로 적기엔 너무 시간이 많이들수있는 부분이기때문에 간략화해주었다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Hello! {{ name }}</h1>
    <p> 첫번째 태그는 {{ tags.0|upper }}</p>
    <p> 모든 책 목록</p>
    <ul>
        {% for book in books %}
            <li>{{ book }}</li>
        {% endfor %}
    </ul>
</body>
</html>

 

h1은 이름별로 들어갈 수 있게,

첫번째 태그부분은 소문자로 된 부분을 대문자로 변경하는 필터를 적용해주었다.

모든 책 목록부분은 반복문을 사용해 출력해주었다.

 

 

Template Inheritance

  • 코드의 재사용성에 초점이 맞춰져 있으며, 상위 템플릿에 공통이 될 부분을 정의하고 하위 템플릿에서 달라질 부분을 블록(Block)으로 만드는 Skeleton 형태
  • 쉽게 이야기해서 웹사이트의 고정되는부분과 변경되는 부분을 정의해두고 필요한 부분만 변경해주어 작업효율을 늘리는 방법으로 보면 될것같다.

 

  • 문법은 대략
    • {% block block_name %} {% endblock block_name %}
      • 상위 템플릿에서 하위 템플릿 마다 달라질 부분을 정의
    • {% extends 'template_name' %}
      • 하위 템플릿에서 상위 템플릿을 상속해서 확장한다는 것
      • 템플릿의 가장 최상단에 위치해야함
      • 다중상속을 지원하지 않음
{% extends 'base.html' %}

{% block content %}
<h1>Hello! {{ name }}</h1>
    <p> 첫번째 태그는 {{ tags.0|upper }}</p>
    <p> 모든 책 목록</p>
    <ul>
        {% for book in books %}
            <li>{{ book }}</li>
        {% endfor %}
    </ul>
{% endblock content%}

 

위와같이 index, users, hello.html들을 수정해주었고

 

base.html을 따로 만들어 연동해주었다.

 

출력은 이전과 똑같이 출력이된다.

 

 

'기록보드 > TIL' 카테고리의 다른 글

Django Namespace  (0) 2024.04.12
Django ORM  (0) 2024.04.11
Django Templates  (0) 2024.04.09
MTV MVC 이미지 패턴  (0) 2024.04.08
장고 학습 종료 팀원들과 마무리  (0) 2024.04.08
'기록보드/TIL' Related Articles more