View 및 Template 코딩 🧠

애플리케이션 개발하기 - View 및 Template 코딩

polls 애플리케이션을 개발할 때 3개의 페이지가 필요했다. 이를 위한 뷰와 템플릿을 코딩한다.

URL과 뷰는 1:1 관계로 매핑된다. 이러한 URL/뷰 매핑을 URLconf라고 하며 urls.py 파일에 작성한다.

이 설계 내용을 개발하기 위해 아래 순서대로 코딩을 진행한다. 로직의 흐름상 URLconf를 먼저 코딩한 후에 뷰, 템플릿 또는 템플릿, 뷰 순서로 코딩하는 것이 일반적이다.

1. urls.py 작성 - URLconf 내용 코딩
2. views.index() 함수 작성 - index.html 템플릿도 같이 작성
3. views.detail() 함수 작성 - detail.html 템플릿도 같이 작성
4. views.vote() 함수 작성 - 리다이렉션 처리 들어있음
5. views.results() 함수 작성 - results.html 템플릿도 같이 작성

URLconf 코딩

Admin 사이트 포함 5개의 URL과 뷰가 필요하다.

urls.py

from django.contrib import admin
from django.urls import path
from polls import views

# URL 패턴 매칭은 위에서 알래로 진행하므로, 정의하는 순서 유의
urlpatterns = [ 
    path('admin/', admin.site.urls),
    path('polls/', views.index, name='index'),
    path('polls/<int:question_id>/', views.detail, name='detail'),
    path('polls/<int:question_id>/results/', views.results, name='results'),
    path('polls/<int:question_id>/vote/', views.vote, name='vote'),
]

path() 함수는 route, view 2개의 필수 인자와 kwargs, name 2개의 선택 인자를 받는다.

• route : URL 패턴을 표현하는 문자열 (=URL 스트링)
• view : URL 스트링이 매칭되면 호출되는 뷰 함수. HttpRequest 객체와 URL 스트링에서 추출된 항목이 뷰 함수의 인자로 전달.
• kwargs : URL 스트링에서 추출된 항목 외에 추가적인 인자를 뷰 함수에 전달할 때, 파이썬 사전 타입으로 인자를 정의
• name : 각 URL 패턴별로 이름을 붙여준다. 여기서 정해준 이름은 주로 템플릿 파일에서 사용한다.

만일 URL이 /polls/3/ 이라면 URL 스트링에서 3이 추출되므로 뷰 함수를 호출 시 views.detail(request, question_id=3)처럼 인자가 대입된다.

mystie/settings.py 파일에 ROOT_URLCONF 항목이 정의된다. 장고는 URL 분석 시, 이 항목에 정의된 urls.y 파일을 가장 먼저 분석하기 시작한다.

URLconf를 코딩할 때 앞에서처럼 하나의 urls.py 파일에 작성할 수도 있고 다음과 같이 mysite/urls.py와 polls/urls.py 2개의 파일에 작성할 수도 있다.

mysite/urls.py

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('polls/', include('polls.urls')),
]

polls/urls.py

from django.urls import path
from polls import views

# URL 패턴의 이름이 충돌나는 것을 방지하기 위한 이름 공간
app_name = 'polls' 

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

]

이렇게 URLconf 모듈을 계층적으로 구성하는 것이 변경도 쉬워지고 확장도 용이해지기 때문에 더 좋다.

뷰 함수 index() 및 템플릿 작성

UI 화면을 생각하면서 로직을 풀어나가는 것이 쉽기 때문에 뷰보다 템플릿을 먼저 코딩하는 것이 좋다.

index.html

{% if latest_question_list %}
<!--latest_question_list 객체는 index() 뷰 함수에서 넘겨주는 파라미터이다.-->
    <ul>
    {% for question in latest_question_list %}
        <li><a href="/polls/{{ question.id }}/">{{ question.question_text }}</a></li>
    {% endfor %}
    </ul>
{% else %}
    <p>No polls are available</p>
{% endif %}

index.html을 작성하면서 필요한 변수가 무엇인지 찾아내야 한다. 이 변수는 뷰 함수에서 context 변수로 정의해서 템플릿으로 넘겨줘야 하기 때문이다.

예제의 템플릿에서는 질문으로 사용될 여러 개의 question_text를 화면에 보여줘야 하고 URL 링크를 연결하기 위해 question.id도 필요하다. 이 두 가지 정보가 함께 들어있는 Question 객체를 뷰 함수로부터 넘겨받으면 된다. Question 객체들의 리스트가 들어있는 latest_question_list 변수를 뷰 함수로부터 템플릿 파일로 전달해야 한다.

from django.shortcuts import render # 단축함수 render import
from polls.models import Question

def index(request):
    # Question 테이블 객체에서 pub_date 컬럼의 역순으로 정렬하여
    # 5개의 최근 Question 객체를 가져와서 만든다.
    latest_question_list = Question.objects.all().order_by('-pub_date')[:5]
    
    # 템플릿에 사용될 변수명과 그 변수명에 해당되는 객체를 매핑하는 사전 타입으로
    # context 변수를 만들어 이를 render() 함수에 보내준다.
    context = {'latest_question_list': latest_question_list}
    
    # render() 함수는 템플릿 파일인 polls/index.html에 context 변수를 적용하여
    # 사용자에게 보여줄 최종 HTML을 만들고 이를 담아 HttpResponse 객체를 반환한다.
    return render(request, 'polls/index.html', context)

단축함수란?
웹 프로그램 개발 시 자주 사용되는 기능들, 예를 들어 render() 함수처럼 템플릿 코드를 로딩한 후에 컨텍스트 변수를 적용하고, 그 결과를 HTTPResponse 객체에 담아 반환하는 작업 등의 공통적으로 사용되는 기능들을 장고에서는 이미 개발하여 내장 함수로 제공하고 있는데 이를 단축함수라고 한다.

뷰에서 지정하는 템플릿의 위치

장고에서 템플릿 파일을 찾을 때 TEMPLATES, INSTALLED_APP에서 지정된 디렉토리를 검색하는데 이 중 INSTALLED_APPS 항목의 각 애플리케이션에 대한 템플릿 파일의 위치는 주의할 것이 있다.

애플리케이션 개수가 늘어나고 템플릿 파일이 많아지면 이름이 같은 경우가 발생할 수 있기 때문에 templates 디렉토리 하위에 다시 애플리케이션 명으로 디렉토리를 만들어 템플릿 파일을 위치시키는 방법을 사용한다.

ch3/polls/templates/polls/index.html

뷰 함수 detail() 및 폼 템플릿 작성

ch3/polls/templates/polls/detail.html

<h1>{{ question.question_text }}</h1>

{% if error_message %}
    <p><strong>{{ error_message }}</strong></p>
{% endif %}

<form action="{% url 'polls:vote' question.id %}" method="post">
    {% csrf_token %}
    {% for choice in question.choice_set.all %}
        <input type="radio" name="choice" id="choice{{ forloop.counter }}" \
               value="{{ choice.id }}" />
        <label for="choice{{ forloop.counter }}">{{ choice.choice_text }}</label>
    {% endfor %}
    <input type="submit" value="Vote" />
</form>

코드 설명

{% if error_message %}
    <p><strong>{{ error_message }}</strong></p>
{% endif %}

에러를 체크하는 로직은 다음 절의 vote() 뷰 함수에 있다.
vote() 뷰 함수에서 익셉션이 발생하면 error_message를 담아
detail.html 템플릿을 렌더링하고, 그에 따라 지금의 detail.html 템플릿에서
에러 메시지를 보여준다.

<form action="{% url 'polls:vote' question.id %}" method="post">

서버 측에서 데이터를 변경하는 경우 일반적으로 POST 방식을 사용한다.

< form action> 속성에 {% url %} 템플릿 태그를 사용하여 받을 곳의 URL을 polls:vote로 지정했다. polls:vote는 URLconf에서 정의한 URL 패턴 이름이다. 동일한 일므으로 인한 충돌을 막기 위해 이름 공간을 추가해서 polls:vote가 된 것이다.

{% for choice in question.choice_set.all %}

for 태그로 뷰 함수에서 넘어온 객체를 순회한다. question.choice_set.all의 의미는 Question 객체의 choice_set 속성에 들어있는 항목 모두를 뜻한다.

<input type="radio" name="choice" id="choice{{ forloop.counter }}" \
               value="{{ choice.id }}" />

라디오 버튼으로 답변 항목을 보여준다. 해당 라디오 버튼을 선택하면 POST 데이터가 'choice'='3' 형태로 구성되도록 name과 value 속성을 정의한다.

<label for="choice{{ forloop.counter }}">{{ choice.choice_text }}</label>

forloop.counter 변수는 for 루프를 실행한 횟수를 담고 있는 변수이다. label for 속성과 input id 속성은 값이 같아야 서로 바인딩된다.

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

Vote 버튼을 클릭하면 사용자가 선택한 폼 데이터가 POST 방식으로 polls:vote URL로 전송된다. 전송된 데이터는 vote() 뷰 함수에서 request.POST['choice'] 구문으로 엑세스한다. input 태그의 name과 value 속성값들이 request.POST 사전에 key, value로 사용된다는 점을 유의해야 한다.

Question 객체의 choice_set 속성

Question과 Choice 테이블의 관계는 1:N 관계이고, 외래키로 연결되어 있다. 즉, question.choice_set.all() 이라고 하면 Question 테이블의 question 레코드에 연결된 Choice 테이블의 레코드 모두를 뜻한다.

detail.html 파일에서 필요한 변수, 즉 detail() 뷰 함수에서 정의해야 할 context 변수가 어떤 게 있는지 찾아보자
question.text, error_message, question.id, question.choice_set, forloop.counter, choice.id, choice.choice_text 등의 변수들이 사용되고 있다.

forloop.counter : 장고에서 제공하므로 정의할 필요 없다.
error_message : vote() 함수에서 정의할 예정

question.text, question.id, question.choice_set : 각각 context 변수로 정의해도 되지만 question 변수만 정의하면 그 변수의 속성으로 엑세스할 수 있다.

choice.id, choice.choice_text : question.choice_set 변수가 정의되면 엑세스 가능하다.

결론적으로 detail() 뷰 함수에서 정의해야 할 변수는 question 변수 하나 뿐이다.

이렇게 html 파일을 먼저 코딩하면서 context 변수를 찾는 식으로 숙지하는 것이 좋다.

detail() 뷰 함수 작성

index.html 화면에서 질문 하나를 선택하면 /polls/1/과 같은 URL이 넘어오게 되어 있다.

index.html의 아래 코드를 뜻한다.

        <li><a href="/polls/{{ question.id }}/">{{ question.question_text }}</a></li>

또한 urls.py에서 다음과 같이 정의했다.

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

위 두 라인에 의해 질문 하나를 선택하면 detail() 뷰 함수가 호출되는 것이다.

이제 views.py에 deatil()을 작성한다.

# 뷰 함수를 정의한다. request 객체는 필수 인자이고, 추가적으로 question_id 인자를
# 더 받는다. URL 패턴으로부터 추출된 question_id가 뷰 함수의 인자로 넘어온다.
def detail(request, question_id):
    # get_object_or_404() 단축함수
    question = get_object_or_404(Question, pk=question_id)
    
    # 템플릿에게 넘겨주는 컨텍스트 사전을 render() 함수의 인자로 직접 써주고 있다.
    # 템플릿 파일에서는 question이란 변수를 사용할 수 있게 된것이다.
    return render(request, 'polls/detail.html', {'question':question})

get_object_or_404() : 이 함수의 첫 번째 인자는 모델 클래스이고, 두 번째 인자부터 검색 조건을 여러 개 사용할 수 있다. 이 예제에서는 Question 모델 클래스로부터 pk=question_id 검색 조건에 맞는 객체를 조회한다. 조건에 맞는 객체가 없으면 Http404 익셉션을 발생시킨다.

뷰 함수 vote() 및 리다이렉션 작성

vote() 뷰 함수의 호출과 연계된 URL은 detail.html 템플릿 파일에서 받는다. 즉, detail.html 템플릿에 있는 폼을 제출하면 폼의 기능에 의해 /polls/5/vote/와 같은 URL이 POST 방식으로 넘어온다.

detail.html의 form 부분

<form action="{% url 'polls:vote' question.id %}" method="post">

urls.py의 vote 부분

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

위 두 라인에 의해 사용자가 Vote 버튼을 누르면 vote() 뷰 함수가 호출된다.

form으로부터 수신한 POST 데이터를 처리하는 vote() 뷰 함수를 views.py 파일에 작성한다.

def vote(request, question_id):
    # Choice 테이블을 검색한다. request.POST는 제출된 폼의 데이터를 담고 있는
    # 객체로서 key로 그 값을 구할 수 있다.
    # request.POST['choice']는 폼 데이터에서 키가 'choice'에 해당하는 값인
    # choice.id를 스트링으로 리턴한다.
    question = get_object_or_404(Question, pk=question_id)
    try:
        selected_choice = question.choice_set.get(pk=request.POST['choice'])
    
    # 'choice'라는 키가 없으면 KeyError 익셉션 발생
    # 검색 조건에 맞는 객체가 없으면 Choice.DoesNotExist 익셉션 발생
    except (KeyError, Choice.DoseNotExist):
        # 익셉션이 발생하면 render() 함수에 의해 question과 error_message
        # 컨텍스트 변수를 detail.html 템플릿으로 전달
        # 에러 메세지와 함께 질문 항목 폼을 다시 보여줘서 재입력할 수 있도록 함
        return render(request, 'polls/detail.html', {
            'question': question,
            'error_message': "You didn't select a choice",
        })
    else:
        selected_choice.votes += 1
        
        # 변경 사항 Choice 테이블 저장
        selected_choice.save()
        
        # POST 데이터를 정상적으로 처리했으면
        # 항상 HttpResponseRedirect를 반환하여 리다이렉션 처리
        # 최종적으로 vote() 뷰 함수는 리다이렉트할 타겟 URL을 담은
        # HttpResponseRedirect 객체 반환
        return HttpResponseRedirect(reverse('polls:results', args=(question.id,)))

vote() 뷰 함수가 반환하는 객체는 HttpResponseRedirect 객체이다. HttpResponseRedirect 클래스의 생성자는 리다이렉트할 타겟 URL을 인자로 받고 타겟 URL은 reverse() 함수로 만든다.

이처럼 POST 방식의 폼 데이터를 처리하는 경우, 그 결과를 보여줄 수 있는 페이지로 이동시키기 위해 HttpResponseRedirect 객체를 리턴하는 것이 일반적이다.

reverse() 함수

URLconf는 일반적으로 URL 스트링과 뷰를 매핑한 각 라인을 URL 패턴이라 하고 이름을 하나씩 부여한다. 그런데 그 반대로 reverse() 함수를 사용하여 URL 패턴명으로부터 URL 스트링을 구할 수도 있다.

reverse() 함수의 인자로 URL 패턴의 이름과 URL 스트링에 사용될 파라미터, 2개의 인자를 받는다.

reverse() 함수를 사용하여 URL을 구하는 것은 URLconf에 이미 정의된 URL 패턴을 활용해서 URL 스트링을 추출하는 방식이므로, 소스에 URL 스트링을 하드코딩하지 않도록 해준다.

뷰 함수 results() 및 템플릿 작성

리다이렉트하라는 응답을 받은 웹 브라우저는 리다이렉트 URL로 다시 요청을 보낸다.

urls.py의 results 부분

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

리다이렉트 요청과 위 라인에 의해 results() 뷰 함수가 호출된다.

results() 뷰 함수에 폼 데이터 처리 결과를 보여주는 로직을 작성한다. 이번엔 뷰 -> 템플릿 순으로 코딩해본다.

views.py 파일에 results() 뷰 함수를 작성한다.

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

results.html UI

results.html

<h1>{{ question.question_text }}</h1>

<ul>
<!--    뷰 함수에서 넘어온 question 변수를 이용해 Choice 객체를 순회-->
    {% for choice in question.choice_set.all %}
        <li>{{ choice.choice_text }} -- {{ choice.votes }} vote{{ choice.votes|pluralize }}</li>
    {% endfor %}
</ul>

<a href="{% url 'polls:detail' question.id %}">Vote again</a>

흥미로운 점은 뷰 함수와 템플릿 태그 양쪽에서 모두 URL 스트링을 추출할 수 있다는 것이다. 뷰 함수에서는 reverse() 함수를 사용하고 템플릿에서는 {% url %} 태그를 사용한다.

출처: Django로 배우는 파이썬 웹 프로그래밍(기초) - 김석훈님