[TIL]KDT_20230425

📚 KDT WEEK 4 DAY 2 TIL

• Django
  • 뷰(views)와 템플릿(templates)
  • 페이지 만들기
  • 에러 처리하기, 방어하기
  • 페이지 커스터마이징

 

---

 

🟥 뷰와 템플릿

polls/views.py에서 우리가 html을 그려주기 위해 render 기능을 활용해보자.

 

from django.http import HttpResponse
from .models import *
from django.shortcuts import render # index.html을 그려주는 역할 Django 기능

def index(request):
    latest_question_list = Question.objects.order_by('-pub_date')[:5]
    context = {'questions' : latest_question_list}
    return render(request, 'polls/index.html', context)

polls/views.py의 일부분을 가져와보았다. 

각 항목에 대해 설명해보자면..

• latest_question_list에 order_by 기능으로 정렬하여 가장 최근 항목 5개를 가져온다.
• context는 템플릿에 전달될 데이터를 담아간다. 보내는건 render가 처리해준다!
• render는 Django의 내장함수로, HTTP 요청을 받아 해당 요청에 대해 원하는 템플릿 파일을 렌더링하여 응답한다.
  • render(요청 , 템플릿 파일의 경로 , context데이터) 처럼 처리해주면 된다.

앞서 render에서 파일의 경로를 'polls/index.html'로 처리한 것은,

미리 polls폴더에 templates/polls/index.html 을 만들어두었기 때문이다.

 

이제, context를 전달받은 index.html에서 화면을 그려주는 역할을 해줄 것이다.

{% if questions %}
<ul>
    {% for question in questions %}
        <li>{{question}}</li>
    {% endfor %}
</ul>
{% else %}
<p>no question</p>
{% endif %}

• html에서는 if, for 문을 앞뒤에 {% 와 %} 형태로 처리해줘야한다.
• if, for문이 끝나면 endif, endfor가 필요하다!
• context로 받은 questions의 존재여부에 따라 화면의 출력이 달라지는 코드이다.

questions이 존재할 때의 화면

 

---

 

상세 (detail) 페이지 만들기

먼저, 페이지를 추가할 때는 polls/urls.py에 어떤 url로 추가할 것인지 정의한다.

from django.urls import path
from . import views

app_name = 'questions' # app_name을 만들어주면, 다른 하위 url name이 같아서 혼동되는 걸 방지할 수 있다!
urlpatterns = [
    path('', views.index, name='index'),
    path('some_url', views.some_url),
    path('<int:question_id>/', views.detail, name='detail'), # 추가한 부분
]

detail 페이지를 추가하기 위해 urls.py에 해당 코드를 삽입하였다.

이제, < > 안의 int로 받아오는 question_id를 경로로 사용하게 될 것이다.

 

다음으로, 실제 polls/views.py에 다음 문구를 삽입하여 detail 페이지를 정의한다.

def detail(request, question_id):
    question = Question.objects.get(pk=question_id)
    return render(request, 'polls/detail.html', {'question': question})

아까 context에 dict 형태를 정의하고 넘겨준 것과 다르게, 이번에는 render함수 인자에 직접 dict를 넣어줬다.

render 함수에서 detail.html을 그리기로 했으니, detail.html도 필요할 것이다.

 

polls/templates 안에 detail.html을 하나 만들어 다음과 같이 만들어 주었다.

<h1>{{ question.question_text }}</h1>
<ul>
{% for choice in question.choice_set.all %}
    <li>{{ choice.choice_text }}</li>
{% endfor %}
</ul>

render에서 url에 입력한 question_id에 해당하는 question을 받아왔으니, 이를 사용해서 필요한 부분을 출력해보았다.

 

저장하고 사이트에서 확인해보면..

url을 잘 확인해보자. question_id = 1인 question과 그 choice들이 잘 나타나고 있다!

 

 

상세 (detail) 페이지 안에 링크 추가해보기

url에 직접 입력하는 것이 아니라 사이트 안에서 링크를 타고 이동하는 경우를 구현해보았다.

 

html을 공부할 때 사용했던 링크 태그.. a 태그를 똑같이 html에 구현하면 된다!

index.html ▶ detail.html로 이동할 것이므로 index.html에 a태그를 추가한다.

a 태그를 사용하면서 이동할 url에 작성에 주의하자.

{% if questions %} <!-- questions이 없을 경우를 대비 -->
<ul>
    {% for question in questions %}
         <li><a href="{% url 'questions:detail' question.id %}">{{ question.question_text }}</a></li>
    {% endfor %}
<ul>
{% else %}
<p>no questions</p>
{% endif %}

question_text를 나타냈던 부분에 a 태그를 추가해주었다.

어떤 url로 이동하는지 보면, 형태가 조금 특이하다.

 

한 부분씩 나누어 보면..

{% url 'questions:detail' question.id %}

• url : url 을 사용하겠다는 명시
• 'questions:detail' : urls.py에 명시된 'app_name:path_name' 의 형태를 갖춘다!
• question.id : 해당 path에서 필요했던 데이터, question.id를 보내야하므로 마지막 인자로 넣어준다!

 

링크 처리가 된 모습, 누르면 해당 question의 detail 페이지로 이동한다.

 

 

---

 

404 에러 처리하기

다음은 url에 들어가는 question_id를 잘못 입력했을 때 나타나는 오류 화면이다.

개발자 도구로 확인해보면, 404가 아닌 500의 오류를 나타내고있다.

서버의 잘못(500)이 아닌 요청의 잘못(404)이므로, 404에러로 처리하는 것이 좋아보인다!

 

여기서 밑으로 조금만 스크롤해보면, 어디서 에러가 발생했는지 알 수 있다.

detail.py의 16 line에서 에러가 발생했다

 

에러가 발생한 구간에서 에러 처리를 해주면 된다.

from django.http import HttpResponse, Http404
from .models import *
from django.shortcuts import render

def detail(request, question_id):
    try :
        question = Question.objects.get(pk = question_id)
    except Question.DoesNotExist:
        raise Http404("Question does not exist")
    
    return render(request, 'detail.html', {'question' : question})

polls/detail.py 코드의 일부이다.

이처럼 늘하던 python의 try ~ except 구문으로 에러처리를 해도 좋다.

 

하지만 Django에서는 이러한 경우가 빈번하므로 따로 기능을 지원한다.

from django.http import HttpResponse
from .models import *
from django.shortcuts import render, get_object_or_404

def detail(request, question_id):
    question = get_object_or_404(Question, pk=question_id) # Django의 get Error 404처리
    return render(request, 'detail.html', {'question' : question})

get_object_or_404( get할 모델 , 조건 )

이렇게 한줄이면 손쉽게 404 에러처리가 가능하다!

 

---

 

🟦 폼(Forms)

상세 페이지 화면에서 어떤 choice를 선택하면, 해당 choice의 vote를 1 올리는 기능을 추가해보겠다.

 

html 강의에서 배웠던 대로, form 태그의 input을 활용하여 해당 기능을 추가한다.

<form action="{% url 'questions:vote' question.id %}" method="post">
    {% csrf_token %} <!-- 간단한 토큰 생성 -->
    <h1>{{question.question_text}}</h1>

    {% for choice in question.choice_set.all %} <!-- Shell과 다르게 all()의 괄호는 필요 없음 -->
        <input type="radio" name="choice" id="chocie{{ forloop.counter }}", value="{{choice.id}}"> <!-- forloop는 loop가 돌때마다 카운터가 1씩 증가함 -->
        <label for="chocie{{ forloop.counter }}">
            {{choice.choice_text}}
        </label>
        <br>
    {% endfor %}

<input type="submit", value="Vote">
</form>

• form 태그를 보면, action에 url을 넣었다. 아까 배웠던대로, { app_name : path_name }의 형태인데, path_name이 새로운 vote로 정의했다. 이 vote는 나중에 urls.py에 추가한다.
• {% csrf_token %} 은 자동으로 토큰을 추가해주는 기능이다. 이게 없으면 토큰이 없다고 오류 발생
• choice마다 radio input이 필요하므로 for문안에 넣어주었다.
  • 모든 radio가 똑같은 "choice" name을 가지므로, 그 중 하나만 선택할 수 있다.
  • id는 forloop에 의해 자동으로 1씩 증가된 형태를 가진다.
  • value는 choice.id를 가지는데, 나중에 이 value 값을 조회하여 해당 choice의 vote를 1 올려줄 것이다.
• 마지막에 Vote라는 이름의 버튼으로 제출할 수 있다.

 

아까 말했던 vote를 바로 polls/urls.py에 추가해보자.

path('<int:question_id>/vote/', views.vote, name='vote'),

detail이 받던 것처럼 question_id를 똑같이 받아오고, 그 뒤에 /vote 경로를 추가한 형태를 가진다.

 

url의 path로 경로를 만들었으니 바로 views.py에 어떻게 할 것인지 작성해준다.

from django.http import HttpResponseRedirect # 사용자를 다른페이지로 보내는 기능
from django.urls import reverse
def vote(request, question_id):
    question = get_object_or_404(Question, pk=question_id)
    selected_choice = question.choice_set.get(pk=request.POST['choice'])    
    selected_choice.votes += 1
    selected_choice.save()
    return HttpResponseRedirect(reverse('questions:index'))

• get_object_or_404로 Question에서 get 기능과 함께 에러처리를 수행한다.
• 가져온 question 오브젝트에서 requset.POST['choice'] 를 통해 선택했던 choice를 가져온다.
  • 여기서 'choice'는, 아까 input radio 타입에서 name으로 정의했던 'choice'를 가리킨다.
• HttpResponseRedirect 기능을 사용하면, 사용자를 다른 페이지로 보낼 수 있다.

 

이렇게만 하면, 사용자가 radio 버튼을 선택했을 때는 정상작동하지만 그렇지 않으면 오류가 발생한다.

이것도 같이 처리해야한다.

 

아까의 views.py의 vote를 try ~ except 구문으로 에러 처리한다.

def vote(request, question_id):
    question = get_object_or_404(Question, pk=question_id)

    try:
        selected_choice = question.choice_set.get(pk=request.POST['choice'])
    except (KeyError, Choice.DoesNotExist):
        return render(request, 'detail.html', {'question':question, 'error_message': '선택이 없습니다'})
    else:   
        selected_choice.votes += 1
        selected_choice.save()
        return HttpResponseRedirect(reverse('questions:index'))

KeyError : 아무것도 선택하지 않았을 때 발생하는 오류

Choice.DoesNotExist : get에서 없는 Choice를 찾으려고 할 때 발생하는 오류

 

오류가 발생하면 detail.html로 똑같이 렌더링되지만, error_message를 함께 가져간다.

가져간 error_message를 detail.html에서 처리하면 끝!

 

detail.html에 해당 구문을 추가하였다.

    {% if error_message %}

    <p><strong>{{ error_message }}</strong></p>

    {% endif %}

 

선택하지 않고 버튼을 눌렀더니, 에러가 잘 처리된 모습.

 

---

 

에러 방어하기

항상 브라우저가 정상작동한다고 생각하지 않고, 여러 가지 경우를 따져 에러를 방어하는 것이 중요하다!

 

• vote를 하는 도중 해당 choice가 DB에서 사라진 경우 ▶ Choice.DoesNotExist 처리 필요
• 서로 다른 서버에서 같은 DB를 사용할 때, 동시에 votes를 증가시킨 경우 ▶ 서버가 아닌, DB에서 처리하면 됨

DB에서 처리하는 방법은 간단하다. django 기능인 F를 사용한다.

from django.db.models import F

selected_choice.votes = F('votes') + 1 # F는 DB에서 바로 값을 불러옴

F를 import해주고, votes의 연산을 위 코드처럼 바꿔준다.

F는 'votes'를 DB에서 바로 참조하여 가져오기 때문에, 각 서버에서 연산하여 오류가 나는 상황을 방지할 수 있다.

 

 

---

 

결과(result) 조회 페이지 만들기

상세 페이지 만들기와 유사하므로 비슷한 과정은 패스했다.

각 추가한 내용

---

polls/views.py

def result(request, question_id):
    question = get_object_or_404(Question, pk=question_id)
    return render(request, 'polls/result.html', {'question': question})

 

polls/templates/polls/result.html

<h1>{{ question.question_text }}</h1><br>
{% for choice in question.choice_set.all %}

    <label>
        {{ choice.choice_text }} -- {{ choice.votes }}
    </label>
    <br>
{% endfor %}

 

polls/urls.py

from django.urls import path
from . import views

app_name = 'polls'
urlpatterns = [
    path('', views.index, name='index'),
    path('<int:question_id>/', views.detail, name='detail'),
    path('<int:question_id>/vote/', views.vote, name='vote'),
    path('<int:question_id>/result/', views.result, name='result'),
]

---

 

투표 이후 result 페이지로 이동시키기 위해 polls/views.py에서 vote의 return을 수정했다.

return HttpResponseRedirect(reverse('questions:result', args= (question_id,)))

questions:result를 통해 result화면으로 넘어갔으며, args로 여러개의 변수를 받을 수 있다.

꼭 필요한 인자 question_id를 넣어둔다.

 

---

 

 

🤔 공부하면서 어려웠던 내용

웹 사이트를 다루면서 경로를 이리저리 맞춰 설정해주는 점이 조금 어려웠다.

아무래도 이러한 부분에 확실한 이해가 필요할 것 같다.. 다음에 꼭 복습해봐야지..

Django의 새로 배운 기능도 여러 가지있었고, 파이썬만 해도 *args, **kwargs는 처음 써보는 기능이었다.

여러번 다시해보지않으면 까먹을 것 같으니.. 더미 프로젝트를 하나 만들어봐야겠다.