�ݺ�ߣ

Flask 스터디 – 템플릿
7/9/2013

템플릿이 뭐에요?
• 웹 개발에서 템플릿은 데이터를 덧씌울
HTML 파일을 지칭
• 웹 템플레이트 (Web Template)

???
• 웹 개발 간단 리뷰
• 일반적인 웹 서비스의 구조
– 클라이언트
– 웹 서버
– 웹 애플리케이션 (+ 데이터베이스)

클라이언트 -> 웹서버
• Flask가 제공하는 개발 전용 웹서버
– Apache 등을 설치할 필요 없이 개발 환경에서 간
단한 웹서버를 구동
– 클라이언트에서 받은 HTTP request 실시간 확인
– 실제 서비스 용도는 아님!

웹서버 -> 웹 애플리케이션
• 웹서버로 온 HTTP Request -> 웹앱 전달
• 웹 애플리케이션은 request에 대응해서,
– 데이터베이스에서 데이터를 가져온 후 가공
– 데이터를 HTML에 입힌 후 전송 (response)
• 데이터를 입히는 작업을 “렌더링” 혹은 “템플레이
팅”이라고 부름
• 이 작업을 하는 도구가 “템플릿 엔진”

Flask의 템플릿 엔진
• Jinja2
– Flask에 포함된 템플릿 엔진
– 하지만 Flask와 독립된 프로젝트
• Flask 프로젝트에서 Jinja2 아닌 다른 템플릿 엔진
사용 가능 (Genshi, Mako 등)
• 그러나 Flask의 플러그인 호환성을 위해 Jinja2는
기본적으로 설치 해야 됨

Jinja2 기본 Syntax
• 표현식은 {% … %}
• 변수는 {{ … }}
• 표현식은 파이썬과 비슷
– 예) team_list라는 리스트를 렌더링할때:
{% for team in team_list %}
{{ team }}
{% endfor %}

템플릿 렌더링 예제
• 일반 HTML 페이지
• 데이터가 바뀔 때마다
HTML을 수정해야 됨

템플릿 렌더링 예제
• 템플릿화 된 HTML
• HTML이 아닌 템플릿 언
어로 프레젠테이션 로직
을 표현
• 템플릿 렌더링을 통해,
HTML 수정 없이 동적인
페이지를 제작

렌더링된 페이지
• HTML 수정 없음!
• “내용”과 “프레젠테이션”의 분리
– 내용은 서버에서 데이터를 가공
– 프레젠테이션 로직은 템플릿 언어로 표현

• 다음과 같은 표현도 가능:
– {{ foo.bar }}
– {{ foo[„bar‟] }}
• 예제 1)
– View에서 다음 dict object를 보내면,
var = { „name‟ : u‟플라스크‟, „date‟ : u‟7/9/2012‟ }
– 템플릿에서 {{ var.name }}이나 {{ var.date }}로
사용 가능

• 예제 2)
class Study():
name = u‟플라스크‟
my_study = Study()
• view에서 my_study를 넘겨준 후,
{{ my_study.name }}

• flow control:
{% if kenny.sick %}
Kenny is sick.
{% elif kenny.dead %}
You killed Kenny! You bastard!!!
{% else %}
Kenny looks okay --- so far
{% endif %}

• function:
{% for number in range(5) %}
<li class="empty"><span>...</span></li>
{% endfor %}

Jinja2 필터
• filter:
{{ name|capitalize }}
-> capitalize(name)과 같은 효과
• argument도 사용 가능
{{ "%s - %s"|format("Hello?", "Foo!") }}
-> “Hello? - Foo!”

Jinja2 필터
• 쉽게 custom filter를 등록해서 사용
• 예제:
from jinja2 import contextfilter
@contextfilter
def my_filter(context, value):
result = do_something(value)
return result
-> {{ name|my_filter }}

Jinja2 테스트
• 표현식 내에서 사용 가능한 간단한 테스트들
{% if loop.index is divisibleby(3) %}
• number(), string(), defined(), 등등…
• http://jinja.pocoo.org/docs/templates/#builtin-
tests

Jinja2 템플릿 상속
• 예제) hello.html의 header와 footer 부분을 base.html로
떼어내기

• 예제) hello.html의 header와 footer 부분을 base.html로
떼어내기
• 분리된 hello.html:

• 한 템플릿 안에 여러 {% block %} 생성 가능
• 예제)
Base.html:
<!doctype html>
<html>
{% block header %}{% endblock %}
{% block css %}{% endblock %}
{% block body %}{% endblock %}
{% block footer %}{% endblock %}
{% block javascript %}{% endblock %}
</html>

Jinja2 Autoescaping
• 경우에 따라, 렌더링하는 변수에 HTML이 포함되는 경우
가 있음:
description = <h1>Hello</h1>
{{ description }}
• 만일 적절한 처리가 되어 있지 않다면, 악성 스크립트가
렌더링되는 경우가 발생 -> 보안 위험 (XSS 공격)
• 따라서, HTML 특수 기호 <,> 등은 렌더링할때 HTML로
인식되지 않게 처리 -> “autoescape” (기본 설정 on)

Jinja2 Autoescaping
• 만일 HTML을 렌더링 하고 싶으면, autoescape
설정을 끄면 됨:
description = <h1>Hello!</h1>
{% autoescape false %}
{{ description }}
{% endautoescape %}
-> <h1>이 HTML 태그로 렌더링 됨
• 보안 위험 주의!

Jinja2의 모든 기능
• 다양한 Jinja2의 filter, built-in test들은 공식 문서
를 참고!
• http://jinja.pocoo.org/docs/templates/

�ݺ�ߣ

플라스크 템플릿

Recommended

More Related Content

What's hot (20)

Similar to 플라스크 템플릿 (20)

플라스크 템플릿