Django_template

minjoo0613 2024. 8. 27. 02:19

2024. 8. 27. 02:19

요청이 들어오면 장고는 어떻게 처리할까?

요청(request) ➡️ URL(urls.py) 처리 ➡️ View(views.py) 처리 ➡️ Template(html) 처리 ➡️ 응답(Response)

: 장고가 요청을 받고 응답하는 과정을 이해하여, 각 도구의 사용법을 익히면서 작동 원리를 공부해야 함.

URL

프로젝트를 처음 생성하면 urls.py이 있음

urls.py란?

: 어떤 url패턴으로 들어오면, 지정된 뷰로 보내는 곳 (경로를 설정해줌)

💡Django에서 특정URL에 대한 요청을 처리할 뷰(View)와 연결할 때 주로 사용하는 함수는 무엇인가요?
==> path()

💡경로를 설정하기 위해선 urlpatterns가 반드시 필요하며, urlpatterns 내부에 정의해주면 된다.

💡 "index/" 처럼 반드시 경로 뒤에 " / "를 붙여준다.
이를 Trailing Slash 이라고 함.

💡 "from articles import views" 는 articles의 views 모듈을 사용하겠다는 뜻.

View

생성한 앱 내에 views.py 가 있음.

view를 작성하는 방법(FBV, CBV)

FBV(Function Based View = 함수형 뷰)	CBV(Class Based View = 클래스형 뷰)
모든 흐름을 보기 위해서, 간단한 로직 혹은 상속이 필요하지 않는 로직일 경우 함수형 뷰가 간편하다.	상속과 같은 것을 이용할 수 있기 때문에 만들어진 코드를 상속해서 사용한다면 작성해야하는 코드가 줄어든다

함수형 뷰로 작성

URL에서 보내진 요청을 처리하는 index 함수 작성
HTTP 요청을 받고, HTTP 응답을 반환

위의 코드처럼, HTML 코드를 View에 작성하는 것보다 HTML 파일을 따로 만들어, 화면에 보여줄 코드는 따로 정리하는 게 좋을 것 같음.

Template

: Django에서의 Template은 데이터를 보여주는 로직을 작성하는 부분 (화면 상의 로직을 처리함)

뷰에서 템플릿 파일을 반환하기 위해 사용하는 함수는?

render (from django.shortcuts import render)

render 란?
: 주어진 template을 context와 결합해서 렌더링을 거친 후 완성된 html을 HttpResponse로 돌려주는 함수

render( reqeust, template_name, context ) 일단 이것만 기억하기!

html
<body> 태그에 내용을 작성한다.

view 파일이 있는 앱 내에 "templates" 폴더를 만들고, html파일만 해당 폴더 안에서 관리한다.
이때, templates 폴더(복수로!) 안에 "앱 이름"의 폴더를 또 생성한 후, html파일을 관리한다. (햄버거 구조)

ex. articles/templates/articles/index.html

주의할 점 : 장고가 template파일을 찾기 위해선 폴더명이 정확히 "templates"로 작성해야 됨.
( Django는 setting.py의 TEMPLATES의 APP_DIRS를 보고 파일을 찾)
Tip)
VScode에서는 !를 입력하고 Tab 버튼을 누르면 기본적인 HTML파일 구조가 생성되는 자동완성 지원

Django Template System

1. Django Template Language (DTL)

: Django Template에서 사용하는 문법

DTL 문법

변수, Variable

{{ variable }}

view의 context로 넘긴 데이터를 접근할 수 있음
" . " 을 사용하여 변수의 속성값에 접근 가능
render()의 세번째 인자인 context에서, dict형태로 넘겨진 데이터 중 key 값이 template에서 사용 가능한 변수가 됨

필터, Filters

{{ variable|filter }}

ex. frist name을 소문자로 변경하고 싶다면?
{{ first_name|lower }}

변수에 어떠한 작업을 추가적으로 더해 수정하고 싶을때 사용
약 60개의 built-in template filter가 제공되며 일부 필터는 인자를 받기도 함.

태그, Tags

{% tag %}

ex. if조건문 태그를 쓴다면?
{% if ~ %}
{% endif %}

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

주석, Comments

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

2. Django template 작성해보기

context 넘기기 (views.py에서 render 함수 사용)

: template에서 사용할 데이터를 view에서 context에 담아 넘기기

Django 내장 템플릿 필터 사용하기

: 장고 공식문서를 참고하여 적절한 필터를 사용해보자

{% for %}
사용하여 반복문 만들 수 있음.
context에 key 값이 반복가능할 때, for문 태그를 사용하여 value를 반환한다.
이때 파이썬처럼 인덱싱 처리를 할 수 있으나 표기법이 다르니 주의할 것.

{{ key.0 }} , {{ key.1 }} 과 같이 [0]이 아니라 .0 으로 표기한다.

파이썬 문법들이 장고에도 있지만, 표기가 다를 수 있기 때문에 주의할 것.

length

: 값의 길이를 반환

{{ value|length }}

# abcd or ['a','b','c','d'] -> 4

join

: python의 join과 같이 문자열로 합침

{{ value|join:" // " }}

# ['a','b','c'] -> "a // b // c"

lower (upper (대문자 변환)도 있음)

: 문자열을 소문자로 변환

{{ value|lower }}

# Totally LOVING this Album! -> totally loving this album!

slice

: 리스트의 일부를 되돌려줌. 파이썬과 비슷하게 작동

{{ some_list|slice:":2" }}

['a', 'b', 'c'] -> ['a', 'b']

time

: 주어진 형식에 따라 시간을 포맷함.

{{ value|time:"H:i" }}

# datetime.datetime.now() -> "01:23"

timesince

: 해당 날짜 이후의 시간으로 날짜를 형식화

{{ blog_date|timesince:comment_date }}

# blog_date=2006/6/1 comment_date=2006/6/1 08:00 -> 08:00

title

: 단어를 대문자로 시작하고 나머지문자를 소문자로 변환.

{{ value|title }}

# my FIRST post = My First Post

3. Template Inheritance

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

base.html 생성

: html에서 <body> 부분 외에는 거의 다 내용이 중복됨. 즉 base.html 을 생성하여 중복되는 코드는 상속받으면 훨씬 편리하게 작업할 수 있음. (부트스트랩 작업하기에도 더 좋음!)

하위 템플릿에서 상속처리

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

{% block block_name %} {% endblock block_name %}
: 상위 템플릿에서 하위 템플릿 마다 달라질 부분을 정의

{% extends 'template_name' %}
- 하위 템플릿에서 상위 템플릿을 상속해서 확장한다는 것
- 템플릿의 가장 최상단에 위치해야함
- 다중상속을 지원하지 않음

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

BASE_DIR 이란?
- 프로젝트 최상단 경로값
프로젝트 최상단 경로에 templates 디렉토리를 생성한 후, base.html을 해당 폴더 안에 둔다.
장고가 base.html 템플릿을 먼저 읽은 후, 앱내에 있는 templates를 읽고 템플릿을 반환한다.

'Django' 카테고리의 다른 글

장고 폼(Form) / 모델폼(ModelForm) (1)	2024.09.12
장고 심화 (0)	2024.09.02
Django_MTV Pattern (0)	2024.08.23
Django App (0)	2024.08.23
장고_개발 환경 구성 및, 장고 설치 (0)	2024.08.20

minjoo0613 님의 블로그