장고(Django) 뷰(Views)

뷰(Views)

 

지금까지 우리는 모델을 이용해 데이터 베이스를 객체화해 다루고 이를 장고 쉘(Shell)에서만 다뤄봤는데요.

 

장고 뷰는 모델로 읽어온 데이터를 활용해 보여주는 곳입니다.

 

헷갈리거나 잊지 않기위해 우리는 지금

 

DjangoProjects 가상환경의

mysite 프로젝트의

polls 앱을 다루고 있습니다.

 

 

 

 

 

views.py로 모델의 데이터들 보여주기

 

http://127.0.0.1:8000/polls/index 라는 URL을 입력하면

브라우저에서 Question 목록이 뜨도록 하려고 합니다.

 

그 전에 지난 시간 우리가 장고 서버에서 URL 경로를 어떻게 지정했는지 복습겸 다시 살펴보겠습니다.

 

 

mysite/urls.py입니다.

 

mysite 프로젝트 전체를 관장하는 mysite 디렉토리의 urls.py에서 (polls/urls.py가 아닙니다!)

http://127.0.0.1:8000/polls/ 로 시작하는 URL이 들어오면 polls/urls.py에서 처리하도록 한다고 설정했습니다.

 

 

 

 

polls/urls.py입니다.

 

http://127.0.0.1:8000/polls/~ 로 시작하는 URL을 polls/urls.py에서 처리할 때는

 

http://127.0.0.1:8000/polls/로 뒤에 아무 것도 붙지 않는 주소라면 polls/views.py의 index 메서드에서 처리하고

http://127.0.0.1:8000/polls/some_url라는 주소라면 polls/views.py의 some_url 메서드에서 처리한다고 설정했습니다.

 

 

 

 

 

polls/views.py입니다.

 

위와 같이 설정했었군요.

이제 우리는 index 메서드를 Question의 목록들을 보여주도록 코드를 작성할 것입니다.

 

 

 

 

 

1. Question 모델을 쓸 수 있도록 같은 polls/ 에 있는 models.py에서 모델 클래스들을 import 했습니다.

 

2. latest_question_list라는 변수에 쉘의 명령어와 똑같이 Question 객체들을 pub_date 내림차순으로 가져왔습니다.

order_by()는 오름차순이 기본으로 pub_date 앞에 마이너스(-)표시를 붙여 내림차순으로 정렬되게 하였습니다.

날짜의 경우 내림차순이어야 최근 것들이 먼저 나오기 때문입니다. 그리고 모든 데이터가 아닌 최근 5개만 가져옵니다.

 

3. 지난 시간 쉘에서 수차례 보았듯이 latest_question_list에는 쿼리셋(QuerySet)이 담기게 됩니다.

이를 그냥 HttpResponse로 출력하면 TypeError가 나기 때문에 쿼리셋을 리스트화 시켰습니다.

 

브라우저에서는 어떻게 뜰까요?

 

 

 

 

127.0.0.1:8000/polls를 URL로 입력시 Question의 목록들이 뜨게한다는 소기의 목적은 달성했지만

알아보기가 힘이 듭니다.

 

 

 

 

 

polls/views.py

def index(request):
    latest_question_list = Question.objects.order_by('-pub_date')[:5]
    output = ', '.join(q.question_text for q in latest_question_list)
    return HttpResponse(output)

 

Question의 question_text 필드만 쉼표와 한칸 띄어쓰기를 구분자로 삼아 출력하도록 합니다.

 

 

 

훨씬 보기 좋습니다!

 

 

 

 

 

 

 

 

 

 

 

 

 

 

템플릿(Templates)란?

 

우리가 위에서 브라우저로 보여준 Question의 목록들은 단순히 html body에 뿌려진 텍스트들입니다.

 

 

 

개발자 도구로 보니 실제 그렇다는 것을 확인할 수 있습니다.

 

 

그런데 이렇게 뷰(polls/views.py)에서 HttpResponse의 도움만으로 내용을 보여주기에는 아쉽습니다.

 

HTML이나 CSS, JavaScript의 도움을 받아 조금 더 예쁘게 보여줄 수 있도록 프론트 엔드 코드들을 작성할 공간이 있으면 좋을 것 같습니다.

 

장고에서는 이러한 공간을 제공하고 이를 템플릿(Templates)라고 합니다.

 

템플릿은 단순히 HTML 코드 등을 적는 것을 넘어 파이썬 코드를 이용할 수 있습니다.

HTML 등의 코드들과 파이썬을 같은 공간에서 한번에 작성할 수 있다는 뜻입니다.

 

 

 

템플릿(Templates) 만들기

 

 

 

먼저 위와 같이 polls앱 폴더 안에

template/polls 폴더를 만들고

그 안에 index.html 파일을 만들어 줍니다.

 

경로는 mysite(프로젝트)/polls(앱)/templates/polls/index.html입니다.

 

 

<ul>
    <li>text</li>
</ul>

 

index.html에 위와 같이 간단한 코드를 적어주세요.

 

 

이제 우리의 목표는 이렇게 만들어진 index.html을 뷰(polls/views.py)에서 보여주도록 하는 것입니다.

 

 

 

 

 

polls/views.py에서 아래와 같이 코드를 수정합니다.

 

 

 

polls/views.py

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

def index(request):
    latest_question_list = Question.objects.order_by('-pub_date')[:5]
    output = ', '.join(q.question_text for q in latest_question_list)
    return render(request, 'polls/index.html')

def some_url(request):
    return HttpResponse("Some url을 구현해보았습니다.")

 

 

템플릿의 html을 그려주기 위해 render를 import 했습니다.

render는 index.html을 그려주는 역할을 합니다. render의 첫번째 인자는 request이고, 두번째 인자는 템플릿을 향한 경로를 받습니다.

 

경로에 대해 궁금하거나 설정을 변경하고 싶다면

구글링으로 django render template path로 검색하시거나 

공식문서를 참조 바랍니다.

 

브라우저에서 새로고침을 하면

 

 

위와 같이 우리가 템플릿에서 작성한 index.html을 뷰에서 잘 보여줬음을 확인할 수 있습니다.

 

 

 

 

 

 

 

 

그런데 DB에서 데이터를 가져와 이를 html에 적용시켜 브라우저로 보여주는 것이 웹의 기본입니다.

 

이 과정을 장고로 간단하고 빠르게 구현하기 위해 우리는 지금 장고를 배우고 있습니다.

우리가 만든 모델에서 데이터를 가져와 뷰에서 템플릿을 이용해 보여주는 장고의 기본 과정을 실습해 봅시다!

 

polls/views.py에서

 

 

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

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

def some_url(request):
    return HttpResponse("Some url을 구현해보았습니다.")

 

위와 같이 context 변수에 딕셔너리(dictionary)타입의 객체를 담아 render에 세번째 인자로 줍니다.

context를 살펴보면 first_question이라는 키(key)에 Question 모델에서 가장 최근에 작성된 질문 하나를 값(value)으로 담았습니다.

 

render는 첫번째 인자로 request를, 두번째 인자로 경로를, 세번째 인자로 context라는 dict타입을 받습니다.

 

이러면 context의 키값을 이용해 템플릿의 html에서 context에 담긴 값들을 넘겨 받아 사용할 수 있습니다.

 

tmplates/polls/index.html에서 자세히 살펴보면

 

 

빨간색 박스의 first_question은 중괄호 2개 {{}}로 감싸졌고 이렇게 감싸진 first_question은 뷰의 render에 담긴 context의 키 first_question을 지칭합니다.

 

반면 파란색 박스의 first_question은 말 그대로 문자열 first_question입니다.

 

브라우저에서 실행해보면

 

 

위의 NEW!!로 시작하는 li태그는 빨간색 박스로 표시된 context의 키 'first_question'의 값 Question 모델의 가장 최근 작성된 질문이 출력되고

 

아래는 파란색 박스로 표시된 단순한 문자열 first_question이 출력된 것을 볼수 있습니다.

 

NEW!!라고 붙은 것은 우리가 지난 시간 만든지 24시간이 지나지 않은 질문은 NEW!!!를 붙인다고 models.py의 Question 클래스의 __str__ 메서드에서 정의해줬기 때문입니다.