Jinja2 template

미호,미미와 함께하는 개발 blog.·2022년 5월 24일

Python

목록 보기

8/10

jinja2란?

1) python flask 패키지에 내장된 템플릿 엔진
2) 동적 웹 페이지를 쉽게 구현 가능
3) 고정적으로 출력되어야 할 서식 html코드가 존재, 동적으로 변해야할 자리는 jinja2문법으로 비워둠
4) 이후 클라이언트가 웹 브라우저를 통해 엔드포인트(/sample) 에 접근하면, 비워둔 자리에 값을 설정하여 클라이언트에게 출력
5) 이처럼 고정 & 변화를 쉽게 할 수 있다는 장점

jinja 템플릿 문법은 크게 두가지로 구분
- {{ ... }}
  : 변수나 표현식의 결과를 출력하는 구분자(delimeter)
- {% ... %}
  : if문이나 for문 같은 제어문을 할당하는 구분자
  
  ( 구분자 : jinja 템플릿 문법임을 구분하는 용도 )

기존 ajax 를 이용해서 하던 방법과 jinja2 템플릿을 사용할 때와 다른 부분 비교해보기

< 기본 구조 >

# 기존 ajax
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        get_list()
    })

    function get_list() {
        $.ajax({
            type: "GET",
            url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
            data: {},
            success: function (response) {
                let rows = response["RealtimeCityAir"]["row"];
                console.log(rows)
            }
        })
    }
</script>

# jinja2
// requests 요청 보내기
r = requests.get('http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99')
response = r.json()
rows = response['RealtimeCityAir']['row']
// 렌더링할 html에 미세먼지 정보 보내기
return render_template("index.html", name=name, rows=rows)

< 태그 >

# ajax
// 미세먼지 수치가 50 이상일 때만 태그 추가하기
if (gu_mise >= 50) {
    let html_temp = `<li>${gu_name}: ${gu_mise}</li>`
    $("#gu-list").append(html_temp)
}

# jinja2
// 미세먼지 수치가 50 이상일 때만 태그 만들기
{% if gu_mise >= 50 %}
    <li>{{ gu_name }}: {{ gu_mise }}</li>
{% endif %}

< 변수 저장 >

# ajax
// 각 구에 대해서 구 이름과 미세먼지 수치를 변수에 저장하기
for (let i=0;i<rows.length;i++) {
    let gu_name = rows[i]["MSRSTE_NM"]
    let gu_mise = rows[i]["IDEX_MVL"]
    console.log(gu_name, gu_mise)
}

# jinja2
// 변수에 저장하기
{% set gu_name = rows[0].MSRSTE_NM %}
{% set gu_mise = rows[0].IDEX_MVL %}
<li>{{ gu_name }}: {{ gu_mise }}</li>
// 모든 구에 대해서 태그 만들기
{% for row in rows %}
    {% set gu_name = row.MSRSTE_NM %}
    {% set gu_mise = row.IDEX_MVL %}
    <li>{{ gu_name }}: {{ gu_mise }}</li>
{% endfor %}