01.Flask 기초 - Jinja template

ID짱재·2021년 4월 22일

목록 보기

4/8

🌈 Jinja template

🔥 Jinja 템플릿이란?

🔥 변수 사용하기 : {{변수명}}

🔥 반복문 사용하기 : {% for %} ~ {% endfor %}

🔥 조건문 사용하기 : {% if %} {% elif %} {% else %} ~ {% endfor %}

🔥 크롤링하여 html 정보 전달하기

1. Jinja 템플릿이란?

간단한 문법으로 html에서 {}, {{}} 등의 규칙을 이용하여 python 프로그래밍이 가능

데이터를 담은 변수를 return값으로 html과 함께 넘겨준 뒤, html에서 jinja 템플릿 규칙에 따라 화면에 표현할 수 있음

Jinja 템플릿 html에서 주석은 {# 주석으로 처리할 내용 #}으로 표시

2. 변수 사용하기 : {{변수명}}

Jinaja Templates은 flask에서 제공하는 엔진으로 html을 렌더링할 때, 변수를 전달해주면 해당 html에서 전달된 변수를 사용 가능

http://127.0.0.1:8080/hello/jaewon에 접속하면 아래와 같은 결과가 나타남

http://127.0.0.1:8080/hello/의 뒤에 경로(<user>)에 따라 페이지의 내용이 변경됨

Jinja2 Tempaltes 변수 넘기기 : {{}}
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/hello/<user>') # <user> 생성
def hello_name(user): # <user> 변수값을 함수로 넘김
    return render_template('variable.html', name1=user, name2='This is Jinja2 template') # 변수들을 html로 넘김
if __name__ == '__main__':
    app.run(host="0.0.0.0", port="8080")
html에서 Jinja2 templates 변수 활용 방법 : {{}}
<!DOCTYPE html>
<html>
  <body>
    <h1>Hello {{ name1 }}</h1>
    <h2>{{ name2 }}</h2>
    <h2>URL : http://127.0.0.1:8080/hello/{{ name1 }}</h2>
  </body>
</html>

3. 반복문 사용하기 : {% for %} ~ {% endfor %}

{% for %} ~ {% endfor %}이 사이에 html코드와 {{변수를}} 위치시키면 for문 처럼 사용할 수 있음

들여쓰기는 신경쓰지 않아도 됨

range함수도 사용할 수 있으며, len() 함수를 쓰고자할 때는 {% for value in ranage(values | length) %} 형식으로 작성함

{{ loop.index }} 는 for문에서 enumerate처럼 번호를 매길 때 사용하고, 1번부터 번호를 붙임
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/hello_loop')
def hello_name():
    value_list = ['list1', 'list2', 'list3'] # 리스트를 변수에 담아 html로 return
    return render_template('loop.html', values=value_list)
if __name__ == '__main__':
    app.run(host="0.0.0.0", port="8080")
✍html에서 Jinja2 templates for문 활용 방법
<html>
  <body>
    <ol>
      {% for value in values %}
      <li>{{ value }}</li>
      {% endfor %}
    </ol>
    <ul>
      {% for i in range(values | length) %}
      <li>{{ values[i] }} : {{ loop.index }}번째</li>
      {% endfor %}
    </ul>
  </body>
</html>

4. 조건문 사용하기 : {% if %} {% elif %} {% else %} ~ {% endfor %}

{% %} 의 규칙을 이용하여, if, elif, else 사용 가능하고, {% endfor %}으로 조건문 종료
들여쓰기 규칙 무시

from flask import Flask, render_template
app = Flask(__name__)
@app.route('/hello_if')
def hello_html():
    value = 27
    return render_template('condition.html', data=value)
if __name__ == "__main__":
    app.run(host="0.0.0.0", port="8080")

html에서 Jinja2 templates if문 활용 방법

<html>
  <body>
    {% if data >= 30 %}
    <h3>30보다 큽니다.</h3>
    {% elif data > 25 %}
    <h3>25보다 큽니다.</h3> 
    {% else %}
    <h3>{{ data }}</h3>
    {% endif %}
  </body>
</html>

5. 크롤링하여 html 정보 전달하기 : google 클론

기존에 있는 사이트를 requests를 통해 html을 전부 크롤링한 뒤, 이를 flask에서 return으로 던지면 페이지가 복사됨

물론, 일부 css 효과나 img파일은 실제 google 서버에 있기 때문에 적용되지 않음
from flask import Flask, render_template
import requests
app = Flask(__name__)
@app.route('/google')
def get_google():
    res = requests.get('https://www.google.com')
    return res.text
if __name__ == "__main__":
    app.run(host="0.0.0.0", port="8080")