🧡'ν”ŒλΌμŠ€ν¬ μ›Ή 개발' 3μž₯, ν…œν”Œλ¦Ώ

devgosunmanΒ·2020λ…„ 7μ›” 30일
0

μœ μ§€ λ³΄μˆ˜ν•˜κΈ° μ‰¬μš΄ μ–΄ν”Œλ¦¬μΌ€μ΄μ…˜ μž‘μ„± μ‹œ μ€‘μš”ν•œ 점은 κΉ”λ”ν•˜κ³  잘 κ΅¬μ„±λœ μ½”λ“œλ₯Ό μž‘μ„±ν•˜λŠ” 것
λΉ„μ¦ˆλ‹ˆμŠ€ 둜직과 ν”„λ ˆμ  ν…Œμ΄μ…˜ λ‘œμ§μ„ κ΅¬λΆ„ν•˜κΈ° μœ„ν•΄ ν”ŒλΌμŠ€ν¬λŠ” 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() κ°€ μžˆλ‹€.

profile
μžλ°”μŠ€ν¬λ¦½νŠΈμ™€ 파이썬 그리고 컴퓨터와 λ„€νŠΈμ›Œν¬

0개의 λŒ“κΈ€