TIL 8 | jinja2

TIL

동적 웹페이지의 종류로는 CSR, SSR과 복합적인 형태가 있음.
오늘은 flask에서 사용하는 템플릿 언어인 jinja2를 활용한 SSR 방식을 구현 해봄.

동적 웹페이지

• Client-side rendering (CSR)
  : 자바스크립트에 데이터를 담아서 보내고, 클라이언트에서 HTML을 열었을 때 자바스크립트가 돌면서 값을 채워 넣는 형태
• Client-side rendering (CSR)
  : 사용자가 단어를 검색하면 서버에서 그 단어에 해당하는 값을 찾아 템플릿 HTML에 데이터를 끼워넣어 HTML을 완성해서 보내주는 형태
• 복합적인 형태
  : 클라이언트 쪽에서 Ajax 요청을 보내서 서버에서 데이터를 받아와 HTML을 완성하는 형태

jinja2

(jinja2는 파이참 settings의 Languages & Frameworks 에서 템플릿 언어를 jinja2로 설정해주면 자동완성과 하이라이팅 기능을 사용할 수 있다...!)

기본 형태

# app.py
@app.route('/')
def main():
    myname = "sparta"
    return render_template("index.html", name=myname)

{# index.html #}
<h3>Hello, {{ name }}!</h3>

기존의 Ajax 활용

// javascript
<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"];
            	for (let i=0;i<rows.length;i++) {
    		let gu_name = rows[i]["MSRSTE_NM"]
    		let gu_mise = rows[i]["IDEX_MVL"]
                if (gu_mise >= 50) {
		let html_temp = `<li>${gu_name}: ${gu_mise}</li>`
    		$("#gu-list").append(html_temp)
                }
                }
            }
        })
    }
</script>

{# html #}
<ul id="gu-list">
</ul>

jinja2 활용

# python
@app.route('/detail')
def detail():
    r = requests.get('http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99')
    response = r.json()
    rows = response['RealtimeCityAir']['row']
    return render_template("detail.html", rows = rows)

{# html #}

{% for row in rows %}
	{% set gu_name = row["MSRSTE_NM"] %}
    	{% set gu_mise = row["IDEX_MVL"] %}
       	{% if gu_mise >= 60 %}
	  	<li>{{ gu_name }}: {{ gu_mise|int }}</li>
        {% endif %}
{% endfor %}

이런식으로 서버에서 바로 가져와 HTML에 활용할 수 있음.

브라우저에 HTML을 띄우는 것은 GET 요청이기 때문에 주소 뒤에 ?를 붙여 파라미터를 넘겨줄 수 있음.

http://localhost:5000/detail?word_give=hello

# python
@app.route('/detail')
def detail():
    word_receive = request.args.get("word_give")
    return render_template("detail.html", word=word_receive)

역시나 {{  }}를 활용해 변수에 저장된 값 사용
<h2> 인사는 {{ word }} </h2>

flask 프레임워크에서는 URL을 변수로 받을 수도 있음.

# python
@app.route('/detail/<keyword>')
def detail(keyword):
    word_receive = request.args.get("word_give")
    return render_template("detail.html", word=keyword)

API 키

Open API의 악용을 방지하기 위해 API를 사용하기 위해서 key값을 받아야 하는 경우가 있음.

파이썬 API 요청

@app.route('/detail/<keyword>')
def detail(keyword):
    r = requests.get(f"https://owlbot.info/api/v4/dictionary/{keyword}", headers={"Authorization": "Token fb6efa1760c8be0ec90507ee68d6433ace214501"})
    # Token에 키값을 넣고 get으로 요청한 주소를 f-string을 이용해 keyword 값에 해당하는 데이터를 받아올 수 있음
    result = r.json()
    print(result)
    # print를 해서 결과값을 볼 수 있음
    return render_template("detail.html", word = keyword)

Ajax API 요청

$.ajax({
    type: "GET",
    url: `https://owlbot.info/api/v4/dictionary/${word}`,
    beforeSend: function (xhr) {
        xhr.setRequestHeader("Authorization", "Token fb6efa1760c8be0ec90507ee68d6433ace214501");
    },
    data: {},b
    error: function (xhr, status, error) {
        alert("에러 발생!");
  // 오타가 있어서 API키를 잘못 적었다든지해서 값을 가져오지 못했을 경우
    },
    success: function (response) {
        console.log(response)
    }
})
// word에 값을 할당해줘서 원하는 값을 찾을 수 있음