Django 동적 url의 세부내용

이전 포스팅에서 동적 url 기능을 활용해 하나의 url과 연결된 하나의 view 그리고 하나의 템플릿에서 여러 페이지를 불러오고, 각 페이지별 입력된 url에 맞는 포켓몬 이름을 호출하는 방법을 설명했다. 본 포스팅에서는 포켓몬 이름 뿐만 아니라, 설명, 이미지 등을 호출하는 방법을 설명한다.

views.py 파일 함수에 조건문 사용하기

views.py 함수에 if 조건문을 추가해 포케몬의 이름 뿐만 아니라, 설명, 이미지 등을 추가한다. 기존에 작성된 views.py 파일은 다음과 같다.

def pokemon_list(request):
	return render(request, 'pokemon-book/pokemon-list.html')

def pokemon_detail(request, pokemon_name):
	context = {"name":pokemon_name}
	return render(request, 'pokemon-book/pokemon-detail.html', context=context)

우리는 여기서 pokemon_detail 함수에 조건문을 추가한다.

def pokemon_list(request):
	return render(request, 'pokemon-book/pokemon-list.html')

def pokemon_detail(request, pokemon_name):  📌조건문 추가
	context = dict()
	if pokemon_name == "pikachu":
    	context["name"] = "피카추"
		context["description"] = "피카추는 전기속성 포켓몬이다"
        context["level"] = 3
	return render(request, 'pokemon-book/pokemon-detail.html', context=context)

코드를 살펴보면 먼저 변수 context를 dict()를 사용해 빈 사전형 자료로 만든다. 이후 if 조건문을 사용해 urls로 부터 전달받은 pokemon_name 인자가 pikachu라면 context의 키 name에 대한 값을 피카추로, 키 description에 대한 값을 피카추는 전기속성 포켓몬이다로 키 level에 대한 값을 3으로 추가했다.

파이리에 대한 조건문도 추가해보자.

def pokemon_list(request):
	return render(request, 'pokemon-book/pokemon-list.html')

def pokemon_detail(request, pokemon_name):  
	context = dict()
	if pokemon_name == "pikachu":
    	context["name"] = "피카추"
		context["description"] = "피카추는 전기속성 포켓몬이다"
        context["level"] = 3
    elif pokemon_name == "charmander":  📌파이리 조건문 추가
    	context["name"] = "파이리"
		context["description"] = "파이리는 불속성 포켓몬이다"
        context["level"] = 5
	return render(request, 'pokemon-book/pokemon-detail.html', context=context)

파이리에 대한 조건문을 추가했다. 이번에는 urls로 부터 전달받은 pokemon_name이 pikachu와 charmander가 아닌 경우에 대한 else 문을 추가해보자.

def pokemon_list(request):
	return render(request, 'pokemon-book/pokemon-list.html')

def pokemon_detail(request, pokemon_name):  
	context = dict()
	if pokemon_name == "pikachu":
    	context["name"] = "피카추"
		context["description"] = "피카추는 전기속성 포켓몬이다"
        context["level"] = 3
    elif pokemon_name == "charmander":
    	context["name"] = "파이리"
		context["description"] = "파이리는 불속성 포켓몬이다"
        context["level"] = 5
    else:  📌else문 추가
    	context["name"] = "미등록"
        context["description"] = "등록되지 않은 포켓몬이다"
        context["level"] = "알 수 없음"
	return render(request, 'pokemon-book/pokemon-detail.html', context=context)

---

pokemon-detail 템플릿 수정

pokemon-detail.html 템플릿을 아래와 같이 수정한다.

<h2>{{name}}</h2>
<div>{{description}}</div>
<p>레벨 : {{level}}</p>

---

이미지 추가

각 포켓몬에 맞는 이미지를 추가해본다. 다시 views.py 파일로 이동한다.

def pokemon_list(request):
	return render(request, 'pokemon-book/pokemon-list.html')

def pokemon_detail(request, pokemon_name):  
	context = dict()
	if pokemon_name == "pikachu":
    	context["name"] = "피카추"
		context["description"] = "피카추는 전기속성 포켓몬이다"
        context["level"] = 3
        context["img_path"] = "pokemon-book/images/pikachu.jpg"  📌
    elif pokemon_name == "charmander":
    	context["name"] = "파이리"
		context["description"] = "파이리는 불속성 포켓몬이다"
        context["level"] = 5
        context["img_path"] = "pokemon-book/images/charmander.jpg"  📌
    else:  
    	context["name"] = "미등록"
        context["description"] = "등록되지 않은 포켓몬이다"
        context["level"] = "알 수 없음"
        context["img_path"] = "pokemon-book/images/noimage.jpg"  📌
	return render(request, 'pokemon-book/pokemon-detail.html', context=context)

변수 context의 img_path 키에 각 이미지 경로를 값으로 추가했다.

---

pokemon-detail 템플릿 수정

pokemon-detail.html 템플릿에 이미지 데이터를 불러오는 내용을 추가한다. 이미지는 정적파일이기 때문에 정적 파일을 불러오는 템플릿 태그를 작성한다.

{% load static %}  📌정적 파일을 불러오는 템플릿 태그

<h2>{{name}}</h2>
<div>{{description}}</div>
<p>레벨 : {{level}}</p>
<img src={% static '{{img_path}} %}/>  📌이미지를 불러오는 태그

코드를 살펴보면 템플릿 태그로 정적파일을 불러오고, view로부터 context로 전달받은 템플릿 변수를 입력했다. 그런데 여기서는 문제가 있다. 장고는 템플릿 태그 안에 템플릿 변수를 중첩하는 것을 허용하지 않는다. 따라서 에러가 난다.

이런 경우 get_static_prefix 템플릿 태그를 사용하면 된다.

{% load static %}

<h2>{{name}}</h2>
<div>{{description}}</div>
<p>레벨 : {{level}}</p>
<img src={% get_static_prefix %}{{img_path}}/>  📌get_static_prefix로 템플릿 변수에 담긴 이미지를 불러오는 템플릿 태그