본문 바로가기

Pyhon/Django

[Pyhon/Django] 장고 기초#008. 장고 템플릿(Template) & HTML

템플릿(Template)과 HTML(HyperText Markup Language)

이전 문서에서 post_list.html에 대한 뷰를 제공하였습니다. 하지만 html 파일을 작성하지 않았기 때문에 http://127.0.0.1:8000/post_list URL으로 요청을 보내더라도 Page not found 에러가 발생합니다. html 파일을 작성하기 앞서 템플릿에 대한 이해가 필요합니다. 템플릿이란 템플릿 코드를 해석해서 템플릿 파일을 만드는데(Rendering), 장고에서 이 결과물은 html 파일입니다. 처음부터 html 문서를 작성하지 않고, 템플릿 코드를 통해서 html 문서를 만드는 이유는 장고(그리고 다른 템플릿 시스템도 마찬가지로)에서 제공하는 추가적인 기능을 이용(기존 html 마크업 언어에서는 제공하지 않는)하기 위함입니다.

먼저 템플릿을 사용하기 위해서 templates 디렉토리가 필요합니다. 장고 서버를 실행한 상태에서 http://127.0.0.1:8000/ URL으로 요청을 보내면 다음과 같은 에러(TemplateDoesNotExist) 에러를 확인 할 수 있습니다.

blog/urls.py에서 경로('')로의 요청(http://127.0.0.1:8000/)에 대해서 views.post_list를 실행하고, 해당 뷰에서 blog/post_list.html을 반환하고 있기 때문입니다. 이를 해결하기 위해서 블로그 애플리케이션 디렉토리 아래에 templates 디렉토리를 만듭니다. 그리고 templates 디렉토리 아래에 다시 blog 디렉토리를 만듭니다. 마지막으로 생성한 blog 디렉토리 아래에 post_list.html 파일을 만들고, 서버에 다시 요청(http://127.0.0.1:8000/)을 보냅니다. 만약 이전과 같이 TemplateDoesNotExist 에러 대신 빈 페이지가 출력된다면 템플릿을 통해 페이지가 잘 렌더링 되고 있는 것입니다. 아래와 같이 간단한 html 구문을 입력하고, 파일을 저장하고 다시 요청을 보내면 실시간으로 반영 되는 것을 확인 할 수 있습니다. 장고 템플릿은 디폴트로 캐싱하지 않으므로 html 문서(템플릿)이 변경 될 경우 서버를 내렸다가 올릴 필요가 없습니다.

<html>
    <p>This is my first django template html page</p>
</html>

 

템플릿 코드 작성

템플릿 코드를 작성하면 기존 마크업 언어에서 불가능한 처리를 할 수 있습니다. 예를 들어 숫자 1~5를 html에 표시하기 위해서는 다음과 같이 작성되어야 합니다(또는 자바스크립트를 사용해야 합니다).

<html>
    <ul>
        <li>
            <p>1</p>
        </li>
        <li>
            <p>2</p>
        </li>
        <li>
            <p>3</p>
        </li>
        <li>
            <p>4</p>
        </li>
        <li>
            <p>5</p>
        </li>
    </ul>
</html>

장고 템플릿을 사용하면 이를 단순화 할 수 있는데, 테스트를 위해서 우선 views.py의 코드를 다음과 같이 수정합니다.

from django.shortcuts import render

def post_list(request):
    context = {
        "datas": [1,2,3,4,5],
    }
    
    return render(request, 'blog/post_list.html', context)

context가 입력된 세 번째 파라미터가 빈 오브젝트({})에서 임의의 데이터를 포함({"datas": [1,2,3,4,5],})하게 된 것에 차이가 있습니다. 이 코드를 좀 더 개선하면 사용자 요청에 따라서 DB의 데이터를 읽어 올 수 있을 것입니다. 다음으로 post_list.html 파일에서 아래와 같이 for 구문을 사용하여 view에서 전달한 인자("datas")를 li 태그에 출력하도록 수정합니다.

<html>
    <ul>
        {% for data in datas %}
            <li><p>{{ data }}</p></li>
        {% endfor %}
    </ul>
</html>

다시 한 번 서버에 요청(http://127.0.0.1:8000/)을 보내면 이전과 동일한 결과를 표시하는 것을 확인 할 수 있습니다. 이는 장고 템플릿이 제공하는 for 구문을 사용하면, 템플릿이 렌더링 과정을 통해서 템플릿 코드를 html 문서로 재작성하기 때문입니다.