🧵'플라스크 웹 개발' 3장, 템플릿

Jake_Young·2020년 7월 30일

Book: Flask Web Development Flask jinja2 python template

플라스크 웹 개발, Flask Web Development

목록 보기

4/5

유지 보수하기 쉬운 어플리케이션 작성 시 중요한 점은 깔끔하고 잘 구성된 코드를 작성하는 것
비즈니스 로직과 프레젠테이션 로직을 구분하기 위해 플라스크는 Jinja2라는 템플릿 엔진을 사용

Jinja2 템플릿 엔진

템플릿 렌더링

기본적으로 플라스크는 애플리케이션 폴더 안에 위치한 templates 서브폴더에서 템플릿을 검색한다. 그곳에 위치시킨 user.html 파일을 이용하여 렌더링 하는 예제 코드는 아래와 같다.

from flask import Flask, render_template

#...
@app.route('/user/<name>')
def user(name):
  return render_template('user_html', name=name)

변수

html 파일에 동적으로 할당되는 변수는 아래 코드처럼 작성할 수 있다.

<h1>Hello, {{name}}!</h1>
<h1>You have a important schedule: {{taskList[3]}}!</h1>
<h1>Hello, {{name|capitalize}}! <!-- name 변수의 첫 문자를 대문자로 변환 --></h1>

Jinja2는 어떠한 타입의 변수라도 인식한다.
리스트, 딕셔너리, 오브젝트와 같은 복합 타입도 인식한다.
변수는 필터를 사용하여 수정할 수 있으며 파이프 기호를 분리자로 하여 추가한다.
변수 필터 중 대표적인 것들을 아래에 정리하였다.

safe : 이스케이프를 적용하지 않고 값을 렌더링한다
capitalize : 첫 번째 문자를 대문자로 만들고 나머지는 소문자로 만든다
lower : 값을 소문자로 만든다
upper : 값을 대문자로 만든다
title : 값의 각 단어들을 캐피털라이즈한다
trim : 앞부분과 뒷부분에서 공백 문자를 삭제한다
striptags : 렌더링하기 전에 값에 존재하고 있는 HTML 태그를 제거한다

제어 구조

쉽게 말해 html 파일 내에 파이썬과 같은 로직 기능을 추가하는 것이다
대표적인 예로는 if문과 for문 그리고 macro와 import 그리고 include 등이 있다.

<!-- if -->

{% if user %}
  Hello, {{ user }}!
{% else %}
  Hello, Stranger!
{% endif %}

<!-- for -->

<ul>
  {% for comment in comments %}
    <li>{{ comment }}</li>
  {% endfor %}
</ul>

<!-- macro(function) -->

{% macro render_comment(comment) %}
  <li>{{ comment }}</li>
{% endmacro %}

<ul>
  {% for comment in comments %}
    <li>{{ render_comment(comment) }}</li>
  {% endfor %}
</ul>

<!-- macro(function)2: import macro from other file -->

{% import 'macros.html' as macros %}
<ul>
  {% for comment in comments %}
    <li>{{ macros.render_comment(comment) }}</li>
  {% endfor %}
</ul>

<!-- include -->

{% include 'common.html' %}

<!-- inheritance, "base.html" & "*.html" -->

<html>
  <head>
    {% block head %}
    <title>{% block title %}{% endblock %} - My Application</title>
    {% endblock %}
  </head>
  <body>
    {% block body %}
    {% endblock %}
  </body>
</html>

{% extends "base.html" %}
{% block title %}
  Index
{% endblock %}
{% block head %}
  {{ super() }} <!-- 기존의 내용이 존재하여 이를 유지하기 위한 경우 -->
  <style></style>
{% endblock %}
{% block body %}
  <h1>Hello, World!</h1>
{% endblock%}

Flask-Bootstrap과 트위터 부트스트랩의 통합

부트스트랩은 트위터에서 제공하는 오픈 소스 프레임워크이다.
Flask-Bootstrap은 생성자에 있는 애플리케이션 인스턴스에 넘겨져서 초기화한다.

from flask.ext.bootstrap import Bootstrap

#...
bootstrap = Bootstrap(app)

이러면 bootstrap/base.html을 extends 하여 페이지를 만들 수 있다.

커스텀 에러 페이지

에러에 대해 커스텀 핸들러를 제공하는 예제 코드는 아래와 같다

@app.errorhandler(404)
def page_not_found(e):
  return render_template('404.html'), 404

하지만 이보다는 bootstrap/base.html을 상속한 파일을 상속하며 해결하는 것이 더 낫다.

링크

템플릿에 직접 링크하는 것처럼 URL을 작성하는 것은 간단한 라우팅 방법이지만, 이는 원하지 않는 의존성을 생성하여 링크가 깨질 수 있다.
이러한 문제를 해결하기 위해 플라스크는 url_for() 헬퍼 함수를 제공하는데 이 함수는 애플리케이션 URL 맵에 저장된 정보를 통해 URL을 생성한다.

url_for('index') # '/'
url_for('index', _external=True) # 'http://localhost:5000'
url_for('user', name='john', _external=True) # 'http://localhost:5000/user/john'
url_for('index', page=2) # '/?page=2'

첫번째 인수는 뷰 함수의 이름이다.
보통은 상대 경로를 반환하는데 이메일로 링크를 보낼 때는 절대 경로를 'external'로 보내야한다.
동적 URL은 동적 파트를 키워드 인수(name='john')로 넘겨서 보낼 수 있다.
쿼리 문자열에 추가 인수('/?page=2')를 더할 수도 있다.

정적 파일

정적 파일을 불러오는 방법은 아래와 같다.

url_for('static', filename='css/styles.css', _external=True)
# http://localhost:5000/static/css/styles.css

Flask-Moment를 이용한 날짜와 시간 지역화

UTC 표준시를 사용자에 맞게 바꿔주는 라이브러리로 moment.js가 있다
이를 플라스크에 맞게 통합한 확장 프로그램이 Flask-Momet이다.
사용법은 아래와 같다

# 1
from flask.ext.moment import Moment
moment = Moment(app)

# 2.
{% block scripts %}
  {{ super() }}
  {{ moment.include_moment() }}
{% endblock %}

# 3.
from datetime import datetime

@app.route('/')
def index():
  return render_template('index.html', current_time=datetime.utcnow())

# 4.
<p>The local date and time is {{ moment(current_time).format('LLL') }}</p>
<p>That was {{ moment(current_time).fromNow(refresh=True) }}</p>

moment.js에서 사용할 수 있는 메소드로는 format(), fromNow(), fromTime(), calendar(), valueOf(), unix(), lang() 가 있다.

Jake_Young

자바스크립트와 파이썬 그리고 컴퓨터와 네트워크

이전 포스트

🎨'플라스크 웹 개발' 2장

다음 포스트