Template과 View

정적 파일 (static files) :

• 웹 페이지를 렌더링하는 과정에서 필요한 추가적인 파일
• ex) CSS, JS, PNG, FONT 등
• 정적 파일 넣어주는 구조도 샌드위치 형식 -> foods- static - foods 형식

 

{% load static %}

템플릿 태그 : static에 있는 정적 파일을 현재 이 템플릿 파일에서 사용한다고 알려주는 것 ( 코드 첫 줄에 쓰면 됨)

 

정적파일 사용하기

src="images/chicken.jpg"

 

                                                                   ↓

src={% static 'foods/images/chicken.jpg' %}

기존의 코드를 {% static '경로' %} 형식으로 사용해서 정적파일 사용

 

Template과 static의 폴더 구조

(앱 이름 - 폴더 이름 - 앱 이름) 샌드위치 구조를 사용하는 이유 

• 폴더구조가 샌드위치 구조가 아닐시 문제 발생할 수 있음
• 다른 앱에서 동일한 파일 이름을 이용하고 샌드위치 구조를 사용하지 않을 경우, 첫번쨰 앱의 파일로 연결됨

따라서 렌더링할때, `앱이름/파일 이름` 으로 사용하는 것이 효율적!!

템플릿 언어

• 템플릿 변수
  • 우리가 지정한 데이터로 변환
  • view에서 넘겨 받은 값으로 변환
  • {{ 변수명 }} 형식
  • {{변수명.속성}} 도 가능
• 템플릿 태그 
  • 템플릿 작성에 로직을 사용
  • {% 태그 %} {% end태그 %}
  • 반복, 조건, 상속 등도 가능
• 템플릿 필터
  • 템플릿 변수를 특정 형식으로 변환
  • {{변수명 | 필터}}
• 템플릿 주석
  • 템플릿 언어의 주석처리를 담당
  • {# 주석 #}

템플릿의 중복

템플릿 상속 : {% block %} {% extends %} 을 이용

 

 {% block date-block %}
{% endblock date-block %}

• 부모 템플릿에서 변경되는 부분은 block으로 만들어 줌

 

 

{% extends './base.html' %}
{% load static%}

{% block date-block %}
  <div>12 Aug, 2020</div>
{% endblock date-block %}

자식 템플릿에서는 base.html을 부모 템플릿으로 하겠다고 지정

(extends는 항상 첫 줄에!!)

• 자식 템플릿은 부모 템플릿을 상속받아서 사용
• block-endblock안에 변경되는 부분의 내용을 자식 템플릿에서는 써줌 

동적 웹 페이지 만들기

동적으로 날짜를 계속 렌더링해주는 함수 구현(views.py에 구현)

def index(request):
    today=datetime.today().date()
    context={"date":today}
    return render(request,'foods/index.html',context=context)

사전형으로 context라는 변수에 담고 context 변수를 render함수의 세번째 파라미터로 넘겨줌

 

 

{% block date-block %}
  <div>{{date}}</div>
{% endblock date-block %}

index.html에서는 템플릿 변수를 통해 date를 받아옴 

 

date 동적으로 구현 완료!

 path('menu/<str:food>/',views.food_detail)

우아한 URL : 경로 변수를 이용한 동적 URL

def food_detail(request,food):
    context={'name':food}
    return render(request,'foods/detail.html',context=context)

만약 url로 menu/chicken이 넘어온다면 chicken이 <str:food>의 인수로 들어가고 food_detail의 두번째 인자인 food로 chicken이 넘어감 

 

<h2>{{name}}</h2>

detail.html에서는 넘어온 name이 h2태그로 감싸져있음

 

menu/chicken인 경우

menu/pasta인 경우

이렇게 동적으로 url에 따라 웹 사이트 구현 완료!

 

URL -> 경로 변수 이용 

View -> 데이터 가공 후 템플릿으로 전달

Template -> 템플릿 언어를 이용해서 데이터를 사용

 

def food_detail(request,food):
    context=dict()
    if food== "chicken" :
        context["name"]="코딩에 빠진 닭"
        context["description"]="주머니가 가벼운 당신의 마음까지 생각한 가격 !"
        context["price"]=10000
        context["img_path"]="foods/images/chicken.jpg"
    return render(request,'foods/detail.html',context=context)

detail.html에서 name, description, price,img_path를 보낼 경우 

 

{% load static %}
<h2>{{name}}</h2>
<div>{{description}}</div>
<p>{{price}} 원</p>
<img src={% get_static_prefix %}{{img_path}}/>

템플릿 태그 안에 템플릿 변수를 중첩해서 사용할 수 없기 때문에

<img src={% static {{img_path}} %} 이런 형식은 사용할 수 없음

                                ↓          

<img src={% get_static_prefix %}{{img_path}}/>

get_static_prefix 템플릿 태그를 통해 템플릿 변수를 src로 사용 가능 !!

 

 

에러 페이지 처리하기

상태코드(status code) : 요청에 대한 처리 결과가 어떻게 되었는지 알려주는 코드 

• 1XX : 요청을 받아서 작업을 진행하고 있음
• 2XX : 요청에 대한 처리 결과가 정상
  • 200 : 정상
  • 204 : 정상 처리 되었지만, 서버에서 보내줄 데이터 없음 
• 3XX : 요청을 완료하기 위해 추가적인 동작 필요
  • 301 : 요청한 자원이 새로운 주소로 옮겨짐 
  • 304 : 요청에 대한 변경 사항이 없음-> 마지막으로 받았던 자원 사용

 

• 4XX : 클라이언트의 요청에 문제가 있음
  • 404 : 요청한 자원이 없음
  • 403 : 요청한 자원에 대한 접근 권한이 없음 
• 5XX : 서버가 요청을 처리하는 과정에서 문제 발생
  • 500 : 서버 내부 오류를 의미

from django.shortcuts import render
from django.http import HttpResponse
from datetime import datetime
from django.http import Http404

def food_detail(request,food):
    context=dict()
    if food== "chicken" :
        context["name"]="코딩에 빠진 닭"
        context["description"]="주머니가 가벼운 당신의 마음까지 생각한 가격 !"
        context["price"]=10000
        context["img_path"]="foods/images/chicken.jpg"
    else:
        raise Http404("이런 음식은 없다구요")
    return render(request,'foods/detail.html',context=context)

Django의 Http404를 이용하여 food가 chicken이 아닌 다른 경로일때, 에러를 발생시킴 

raise: 파이썬에서 지정한 에러 강제 발생

 

menu/chicken일 경우 잘 나옴

 

menu/chicken이 아닐 경우

 

menu/chicken이 아닌 다른 경로일 경우, 404 에러 처리를 해줌 !