템플릿(Template)이란?
사용자의 요청에 대해 뷰함수에서 응답하는 HTML 파일을 장고에서는 템플릿이라고 부른다.
템플릿 환경 설정
- 앱 디렉토리 로더
'app_directories.Loader'는 Django의 각 애플리케이션 디렉토리 내의 'templates' 서브 디렉토리에서 템플릿을 찾는다. 이 로더는 각 앱이 자체 템플릿 파일을 가질 수 있도록 함으로써, 코드와 템플릿 파일을 조직적으로 관리하는 데 유용하다.
작동 방식
- 앱 디렉토리 탐색: Django는 INSTALLED_APPS 설정에 나열된 각 애플리케이션 디렉토리를 탐색한다.
- 템플릿 서브 디렉토리: 각 애플리케이션 디렉토리 내의 templates라는 이름의 서브 디렉토리를 찾는다.
- 템플릿 파일 로드: 특정 템플릿을 요청할 때, Django는 이러한 templates 서브 디렉토리 내에서 해당 템플릿 파일을 찾는다.
- 파일시스템 로더
'filesystem.Loader'는 지정된 파일 시스템 경로에서 템플릿을 찾는다. 이 로더는 프로젝트 수준의 템플릿 디렉토리를 관리하는 데 유용하며, 다양한 위치에 템플릿 파일을 저장할 수 있다.
작동 방식
- 디렉토리 목록 지정: DIRS 설정에서 지정한 디렉토리 목록을 탐색한다.
- 템플릿 파일 로드: 특정 템플릿을 요청할 때, Django는 지정된 디렉토리 목록에서 해당 템플릿 파일을 찾는다.
- 템플릿 설정
위 설정에서 'DIRS'는 'filesystem.Loader'가 템플릿을 찾을 디렉토리 목록을 지정하고, 'APP_DIRS: True'는 'app_directories.Loader'를 활성화하여 각 애플리케이션의 'templates' 디렉토리를 자동으로 탐색하도록 한다.
템플릿 응답
- render 함수
'render' 함수는 Django 뷰에서 템플릿을 렌더링하고, 이를 HTTP 응답으로 반환하는 데 사용된다.
- context
'context'는 뷰에서 템플릿으로 전달되는 데이터이다. context는 key:value 형식의 딕셔너리 타입으로 지정한다.
- Path 중복
예를 들어 다음과 같은 상황이라고 하자.
INSTALLED_APPS = [
'blog.apps.BlogConfig',
'shop.apps.ShopConfig',
]blog/templates/list.html
shop/templates/list.html
return render(request, 'list.html')이렇게 되면 render를 할 때 어떤 디렉토리의 list.html을 가리키는지 명확히 알 수 없다. 따라서 아래와 같이 템플릿의 경로를 지정하면 좋다.
blog/templates/blog/list.html
shop/templates/shop/list.html
템플릿 태그
Tip! 'ctrl + space + 태그'로 자동완성 기능을 사용할 수 있다.
- for 태그
# for 문법
{% for 변수 in iterable 객체 %}
반복 실행문
{% endfor %}
실습1
실습2
- if
실습1
템플릿 필터
템플릿에서 {{ }} 문법은 {{ }} 안의 값을 페이지에 출력하는 명령문이다. 그런데 값을 출력할 때 그대로 출력하는 것이 아니라 가공을 해서 출력할 수 있도록 장고 템플릿은 '필터'라는 것을 제공한다. 필터는 출력 전 전처리 작업을 하는 함수이다.
템플릿 필터가 잘 정리된 사이트가 있어서 링크를 걸어두었다.
https://himanmengit.github.io/django/2018/02/23/Built-In-Template-Filter.html
Django 내장 템플릿 필터 · 초보 웹 프로그래머
himanmengit.github.io
템플릿 상속
- 부모 템플릿
{% block 이름 %}
{% endblock %}
- 자식 템플릿
{% extends "부모템플릿.html" %}
layout.html 상속 실습
# blog/templates/layout.html
<html>
<head>
<meta charset="utf-8" />
<title>{% block title %}{% endblock %}</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<style>
html {position: relative; min-height: 100%}
body{margin-bottom: 60px}
#page-footer{
position: absolute;
bottom: 0;
width:100%;
height: 60;
line-height: 60px;
background-color: #f5f5f5;
}
</style>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container">
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="/blog/">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
{% if not user.is_authenticated %}
<li><a href="#">회원 가입 </a> </li>
<li><a href="#">로그인</a></li>
{% else %}
<li><a href="#">{{user}}님!</a></li>
<li><a href="/blog/profile/">프로필</a> </li>
<li><a href="#">로그 아웃</a></li>
{% endif%}
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-sm-12">
{% block content %}
{% endblock %}
</div>
</div>
</div>
<div id="page-footer">
<div class="container">
<p class="text-muted">
Copyright © 2020 KINO Data Systems All Right Reserved
</p>
</div>
</div>
</body>
</html>
- 1:N 관계
- 1:1 관계
layout.html 수정
- N:M 관계
'web > Django' 카테고리의 다른 글
| [Django] 장고 모델(Model) 개념 (0) | 2024.05.22 |
|---|---|
| [Django] 장고 모델 관계 이름 (0) | 2024.05.22 |
| [Django] 장고 모델 관계 설정 (0) | 2024.05.22 |
| [Django] 장고 Model: 모델 생성 - admin 앱에서 데이터 조작(2) (0) | 2024.05.22 |
| [Django] 장고 Model: 모델 생성 - 장고쉘에서 데이터 조작(1) (0) | 2024.05.22 |
