Django 모델 적용하기

최근 포스팅에서는 html 템플릿에 렌더되는 내용을 동적 웹페이지로 구현해보고, url을 문자열로 받아 if 조건문을 사용하여 포켓몬 이름, 설명, 레벨을 url 별로 다르게 호출하는 방법을 사용했다. 이번에는 직접 하드코딩 하지 않고, view에 model을 적용해 html 템플릿을 렌더하는 방법을 살펴본다.

---

프로젝트 디렉토리 구조

프로젝트 디렉토리 구조는 다음과 같다.

📂pokemon
    📄manage.py
    📄db.sqlite3
    📂pokemon
        📄__init__.py
        📄settings.py
        📄urls.py
        📄wsgi.py
    📂pokemon-book
    	📂static  
    	📂templates  
        	📂pokemon-book
            	📄pokemon-list.html  
                📄detail-pikachu.html  
                📄detail-charmander.html  
                📄detail-squirtturtle.html  
        📂migrations
        📄__init__.py
        📄admin.py
        📄apps.py
        📄models.py  📌
        📄tests.py
        📄views.py
        📄urls.py

---

views.py 수정

model을 통해 데이터를 불러올 수 있도록 views.py 파일을 다시 작성한다.

가장 먼저 Poke 모델을 불러온다.

#pokemon/pokemon-book/views.py

from django.shortcuts import render
from pokemon-book.models import Poke  📌Poke 모델을 불러온다

def pokemon_list(request):

context 변수에 여러 데이터를 넣어야 하니 context 변수를 빈 사전형 자료로 만들어준다.

#pokemon/pokemon-book/views.py

from django.shortcuts import render
from pokemon-book.models import Poke  

def pokemon_list(request):
	context = dict()  📌

모든 데이터를 가져와서 pokemonlist 변수에 넣어준다.

#pokemon/pokemon-book/views.py

from django.shortcuts import render
from pokemon-book.models import Poke  

def pokemon_list(request):
	context = dict()  
    pokemonlist = Poke.objects.all()  📌

pokemonlist 변수를 context 변수에 담아준다.

#pokemon/pokemon-book/views.py

from django.shortcuts import render
from pokemon-book.models import Poke  

def pokemon_list(request):
	context = dict()  
    pokemonlist = Poke.objects.all()  
    context["pokemonlist"] = pokemonlist  📌

현재 날짜를 불러오기 위해 datetime 모듈을 불러온다

#pokemon/pokemon-book/views.py

from django.shortcuts import render
from pokemon-book.models import Poke
from datetime import datetime  📌

def pokemon_list(request):
	context = dict()  
    pokemonlist = Poke.objects.all()  
    context["pokemonlist"] = pokemonlist

today 변수에 datetime 모듈로 불러온 현재날짜를 담아준다.

#pokemon/pokemon-book/views.py

from django.shortcuts import render
from pokemon-book.models import Poke
from datetime import datetime  

def pokemon_list(request):
	context = dict()  
    pokemonlist = Poke.objects.all()  
    context["pokemonlist"] = pokemonlist
    today = datetime.today().date()  📌

today 변수를 context 변수에 담아준다.

#pokemon/pokemon-book/views.py

from django.shortcuts import render
from pokemon-book.models import Poke
from datetime import datetime  

def pokemon_list(request):
	context = dict()  
    pokemonlist = Poke.objects.all()  
    context["pokemonlist"] = pokemonlist
    today = datetime.today().date()
    context["today"] = today

render 함수를 작성한다.

#pokemon/pokemon-book/views.py

from django.shortcuts import render
from pokemon-book.models import Poke
from datetime import datetime  

def pokemon_list(request):
	context = dict()  
    pokemonlist = Poke.objects.all()  
    context["pokemonlist"] = pokemonlist
    today = datetime.today().date()
    context["today"] = today
	return render(request, 'pokemon-book/pokemon-list.html', context=context)

---

pokemon-list.html 템플릿 수정

기존에 하드코딩된 템플릿은 다음과 같다.

{% block date-block %}  
	<div>2023년 12월 26일</div>
{% endblock date-block %}

{% block container %} 
	<div>
      <h2>피카추</h2>
      <img src="images/Pikachu.jpg">
      <p>전기 속성 포켓몬이다.</p>
      <p>3</p>
	</div>
{% endblock container %}

view로부터 context에 today 데이터를 전달받았으니 date-block 영역에 템플릿 변수 today(키)를 입력한다. 이렇게 하면 today(값) = today datetime.today().date()를 불러온다.

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

{% block container %} 
{% endblock container %}

view로부터 context에 pokemonlist 데이터를 전달받았으니 for 문을 작성한다.

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

{% block container %}
	{% for pokemon in pokemonlist %}  📌pokemonlist 데이터를 반복해 pokemon을 찾는다.
	{% endfor %}
{% endblock container %}

img_path는 템플릿 태그와 템플릿 변수의 중첩이 불가능해 get_static_prefix 템플릿 태그와 템플릿 변수를 사용하고, name, description,level 은 템플린 변수를 사용한다.

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

{% block container %}
	{% for pokemon in pokemonlist %}  
		<img src={% get_static_prefix %}{{pokemon.img_path}}/>  📌
        <p>{{pokemon.name}}</p>  📌
        <p>{{pokemon.description}}</p>  📌
        <p>{{pokemon.level}}레벨</p>  📌
	{% endfor %}
{% endblock container %}

다시 확인해보니 스태틱 파일을 불러오는 템플릿 태그와 부모 템플릿을 상속받는 태그가 비어있다. 작성해주자.

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

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

{% block container %}
	{% for pokemon in pokemonlist %}  
		<img src={% get_static_prefix %}{{pokemon.img_path}}/>
        <p>{{pokemon.name}}</p> 
        <p>{{pokemon.description}}</p>
        <p>{{pokemon.level}}레벨</p>
	{% endfor %}
{% endblock container %}