장고(Django) 개발: MVC 패턴, 템플릿(Template)

히즈웨드 |

    템플릿이란 MVC 패턴에서 V에 속하는 것으로, 디자인 영역의 분리 및 재사용성을 높이기 위해, HTML 구조만을 따로 모아놓은 것이다. {{ 변수 }}, {% 태그 %}와 같은 방법으로 뷰에서 제어한다.

    • 장고의 Model = Model
    • 장고의 View = Controller
    • 장고의 Template = View


    장고(Django) 개발: 프로젝트 시작과 구성 포스팅에서 템플릿 부분만을 자세히 정리한 것이다.


    작년에 장고(Django) 프레임워크로 프로젝트를 진행하면서 공부했던 개발 지식을 블로그에 다시 정리하려고 합니다. 개인 위키에 정리했던 것을 옮기는 수준이라, 친절한 설명은 기대하기 어렵고, 프로그래밍 언어와 파이썬 지식이 어느정도 있어야 이해할 수 있을 것입니다.


    아래 내용들은 Django 1.6~1.7 버전을 기준으로하고, "쉽고 빠른 웹개발 Django"란 책에서 1/3, 공식 위키에서 1/3, 그리고 나머지는 구글링을 바탕으로 정리한 지식입니다. 말투가 존대와 반말이 섞여있어도 이해바랍니다 :)




    1 템플릿 만들기

    2 템플릿 변수와 필터

    3 템플릿 태그

    4 템플릿 주석처리




    1 템플릿 만들기

    setting.py에 템플릿 디렉토리를 등록하고, 해당 디렉토리에 HTML 파일을 만들어서 쓰면 된다.

    import os
    BASE_DIR = os.path.dirname(os.path.dirname(__file__))
    TEMPLATE_DIRS = (
        os.path.join(BASE_DIR, 'templates'),
    )



    2 템플릿 변수와 필터

    {{ 변수 }}

    템플릿 변수 예제
    <p>{{ username }}의 북마크입니다.</p>

    필터

    템플릿 변수를 필터링 하기위해서 "변수|필터" 를 사용함

    • escape : 브라우저가 HTML태그를 그대로 보여줌 (크로스-사이트 스크립팅 공격을 예방하기 위한 예외 처리)
    • urlencode : url의 예외 처리
    • urlizetrunc:40 : URL을 링크 형식으로 변경해줌 (URL이 40자가 넘으면, 40자까지만 잘라서 만듬)
    • linebreaks : 줄바꿈을 <p>와 <br />태그로 바꿔줌
    • join:"," : 문자열을 따옴표 안의 인수로 조인함
    템플릿 변수의 필터 예제
    {% for tag in tags %}
        <a href="/tag/{{ tag.name|urlencode }}" class="tag-cloud-{{ tag.weight }}">
            {{ tag.name|escape }}
        </a>
    {% endfor %}



    3 템플릿 태그

    • block : 영역 구분하기
    • extends : 템플릿 상속받기
    • include : 특정 템플릿 추가하기
    • load : 기본 템플릿 태그 외에 특정한 템플릿의 태그를 불러올 때 사용
    템플릿 태그 예제
    {% extends "base.html" %}
    {% block external %}
        <script type="text/javascript" src="/site_media/bookmark_edit.js"></script>
    {% endblock %}
    {% block title %}{{ username }}{% endblock %}
    {% block head %}{{ username }}의 북마크입니다.{% endblock %}
    {% block content %}
        {% include "bookmark_list.html" %}
    {% endblock %}



    4 템플릿 주석처리

    {# 주석처리 #}