본문 바로가기
Flask

Flask - jinja2 template

by DGK 2021. 11. 25.

 

Flask 입문 수업을 듣고 중요한 내용을 정리했습니다.
개인 공부 후 자료를 남기기 위한 목적이므로 내용 상에 오류가 있을 수 있습니다.

 

jinja2 template(Python)

jinja2 template를 사용하여, 파이썬(flask) 코드로 웹 페이지(HTML)를 만드는 연습을 하고자 한다.

 

jinja2 template 

jinja2 템플릿은 웹 페이지에서 필요한 부분을 변경할 필요가 있을 때, 사용하는 간단한 문법이다.

(웹 페이지에서 파이썬 프로그래밍 가능)

 

*참고

jinja2 템플릿 엔진이 해당 HTML 코드를 템플릿으로 만들면, 템플릿 안의 존재하는 파이썬 코드를 실행시켜 템플릿을 채운 후 최종 HTML 파일을 생성하는 원리이다.

 

 

jinja2 template 변수(문법)

*HTML 파일

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>Hello {{ name1 }}</h1>
    <h2>{{ name2 }}</h2>
    <h1>안녕하세요</h1>
  </body>
</html>

 

*파이썬 파일

from flask import Flask, render_template
app = Flask(__name__)


@app.route('/hello/<user>')
def hello_name(user):
    return render_template('variable.html', name1=user, name2=2)


if __name__ == '__main__':
    app.run(host="0.0.0.0", port="8080")

 

```

결과 :

http://localhost:8080/hello/kim

```

 

*기본 구조(문법)

   - {{ 변수명 }}

   - {%  파이썬 소스코드  %}

 

 

@app.route('/hello/<user>')는 앞서 배운 것처럼, 라우팅 경로인 /hello 뒤에 원하는 값 입력하면 해당 값을 hello_name() 함수의 인자로 넣을 수 있다.

 

또한, render_template() 함수를 통해 인자로 들어온 값은 변수 name1에 할당된다.

한편, render_template() 함수로 variable.html 파일을 열면서 변수 name1과 name2는 해당 html 파일의 jinja2 템플릿 문법에 적용된다.

즉, variable.html 파일에서 {{ name1 }}과 {{ name2 }} 위치에 해당 변수들이 들어가는 것이다. 

 

 

jinja2 template 반복문(문법)

*HTML 파일

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <ul>
      {% for value in values %}
      <li>목차 : {{ value }}</li>
      {% endfor %}
    </ul>
  </body>
</html>

 

*파이썬 파일

from flask import Flask, render_template
app = Flask(__name__)

@app.route('/hello_loop')
def hello_name():
    value_list = ['list1', 'list2', 'list3']
    return render_template('loop.html', values=value_list)

if __name__ == '__main__':
    app.run(host="0.0.0.0", port="8080")

 

```

결과 :

http://localhost:8080/hello_loop

```

 

*기본 구조

   - {% for %}   {% endfor %}

 

for로 반복문을 선언하고, endfor로 반복문을 끝내면 된다.

 

*예시

   - {% for value in values %}

      {{ value }}

      {% endfor %}

 

참고로, 인덴테이션(들여쓰기)는 안해도 된다.

 

 

jinja2 template 반복문(추가 문법)

*HTML 파일

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <ul>
      {% for index in range(values | length) %}
      <li>{{ values[index] }} {{ loop.index }}</li>
      {% endfor %}
    </ul>
  </body>
</html>

 

*파이썬 파일

from flask import Flask, render_template
app = Flask(__name__)

@app.route('/hello_loop')
def hello_name():
    value_list = ['list1', 'list2', 'list3']
    return render_template('loop.html', values=value_list)

if __name__ == '__main__':
    app.run(host="0.0.0.0", port="8080")

 

```

결과 :

http://localhost:8080/hello_loop

```

 

*예시

   - <ul>
         {% for index in range(values | length) %}
        <li>{{ values[index] }} {{ loop.index }}</li>
         {% endfor %}
      </ul>

 

jinja2 템플릿의 문법은 파이썬 문법과 유사한 것이지 완전히 동일한 것은 아니다.

 

*참고

range() : 파이썬 문법과 동일

len(values) : values | length로 작성해야 함

loop.index : 반복문의 횟수를 반복문 안에서 표시할 수 있음(단, 1부터 시작함)  > enumerate() 함수와 유사한 기능

value[index] : 파이썬 리스트 문법과 동일

 

 

jinja2 template 조건문(문법)

*HTML 파일

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    {% if data >= 30 %}
    <h3>30보다 큽니다.</h3>
    {% elif data > 25 %}
    <h3>25보다 큽니다.</h3>
    {% else %}
    <h3>{{ data }}</h3>
    {% endif %}
  </body>
</html>

 

*파이썬 파일

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")

 

```

결과 :

http://localhost:8080/hello_if

```

 

*기본 구조

   - {% if %} {% elif %} {% else %} {% endif %} 

 

if로 조건문을 선언하고, endif로 조건문을 끝내면 된다. (당연히 elif, else는 특정 상황에서만 사용하면 됨)

 

*예시

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

 

마찬가지로, 인덴테이션(들여쓰기)는 안해도 된다.

 

 

jinja2 template 주석(문법)

*HTML 파일

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    {% if data >= 30 %}
    <h3>30보다 큽니다.</h3>
    {#
    {% elif data > 25 %}
    <h3>25보다 큽니다.</h3>
    #}
    {% else %}
    <h3>{{ data }}</h3>
    {% endif %}
  </body>
</html>

 

*파이썬 파일

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")

 

```

결과 :

http://localhost:8080/hello_if

```

 

*기본 개념

   - {# #}으로 주석을 표시할 수 있다.

 

 

댓글