Jinja2를 사용해서 페이지를 만들어보자

저번 시간에 크롤링을 해서 필요한 데이터를 다 저장했다!! 

 

2022.05.10 - [Python] - BeautifulSoup + Selenium을 이용한 동적 페이지 크롤링

BeautifulSoup + Selenium을 이용한 동적 페이지 크롤링

그러면 페이지에 데이터를 넣을려면 JQuery / Ajax를 사용해서 넣기만 하면 되는데...

솔직히 Ajax사용해서 데이터를 받는건 그렇다 처도

그거 하나씩 일일히 테그를 만들어서 추가하는걸 하자니 솔직히 귀찮고

Javascript으로 Html 태그를 추가하는것이니 한눈에 보기도 쉽지가 않다.

그래서 Spring에서는 ViewResolver을 사용해서 하면 되지만 flask에서도 비슷한게 있지 않을까 해서 찾아낸것이

JinJa !!

그래 사람 사는것도 다 비슷하고 서버 프로그램은 다 비슷하다니까!

게다가 얘는 애초에 flask내부에 들어있어서 추가로 모듈을 설치할 필요도 없다는게 마음에 들었다.

 

그러면 어떻게 사용할까?

 

서버쪽에서는 보낼 데이터를 render_template에 같이 보내기만 하면 끝!

@app.route('/'):
	# 보넬 데이터를 자유롭게 구성하면된다. txt, list, dict 다 가능하다
	data1 = [{'key1' : 'value1',
        'key2' : 'value2'},
    	{'key1' : 'value1',
        'key2' : 'value2'},
        {'key1' : 'value1',
        'key2' : 'value2'},....]
    data2 = ['test1','test2',...]
    data3 = 'hello'
    # 그리고 키값을 지정해서 데이터를 넣기만 하면 끝!, 여러개도 가능하다.
    render_template('index.html', this = data1, is = data2, key = data3)

그리고 html을 구성할때도 데이터 활용을 자유롭게 할 수 있다.

# 그냥 데이터 표시할때
<p>{{data3}}</p>

# 조건에 따라 다른 테그를 표시할때
{% if data3 == 'hello' %}
<p> {{ data3 }} 은 'hello'이다 </p>
{% elif data3 == 'not hello'} %}
<p> {{ data3 }} 은 'not hello' 이다. </p>
{% else %}
<p> {{ data3 }} 은 'hello' 도 'not hello' 도 아니다. </p>
<% endif %}

# 데이터에 따라 여러 태그를 작성할때
# 단순 반복
{% for x in range(5) %}
 	<p>{{ x }}</p>
{% endfor}

# 리스트 반복
{% for x in data2 %}
<p>{{ x }}</p>
{% endfor %}

# list + json 표시
# 동적 페이지를 구성하는데 자주 이용
{% for x in data1 %}
<p>{{ x['key1'] }}</p>
<p>{{ x['key2'] }}</p>
{% endfor %}

이렇게 하니 html 테그 수정하자고 javascript 파일 건드릴 필요도 없고 

api 설계 하나 더 줄어들고 

가독성은 더 좋아지고 ~~