항해99 1주차 프로젝트를 진행하기 위하여 추가적으로 공부할 거리가 생겼다.
0주차 때 공부한 "웹개발 종합반" 강의에서 더 나아가 Flask 심화학습이다.
Flask 프레임워크에서 다이내믹한 웹페이지를 구현하기 위해 사용하는 언어 Jinja2를 학습하였다.
Jinja2는 템플릿 언어로 칭해진다. HTML 문서에 데이터가 들어갈 곳을 표시하고 Jinja2만의 문법을 통해 HTML문서에 직접적으로 접근하여 데이터 바인딩을 가능케 해주는 아주 신박한 언어이다.
이전 퍼블리셔 시절 공부했던 React, Vue와 비슷한 느낌을 받았다. 순수 자바스크립트에서 template를 작성해 append 하던 것을 생각하면 정말 편리한 방식이다.
우선 routing에 대해서 학습하였다.
메인페이지 -> 상세페이지 이동할 때는 HTML에서 링크이동할 때 사용하는 a태그의 href속성에 "/경로값"을 지정해주었다.
<a href="/detail">상세 페이지로 가기</a>상세페이지 -> 메인페이지 이동 시에는 a태그가 아닌 button태그를 사용하고 onclick속성으로 to_main함수를 넣어주었다.
function to_main() {
window.location.href='/';
}<button type="button" onclick="to_main()">메인으로 돌아가기</button>to_main 함수처럼 간단한 함수 같은 경우 이렇게 바로 onclick 속성에 지정해줄 수도 있다.
<button type="button" onclick="window.location.href='/'">메인으로 돌아가기</button>
다음으로는 Jinja2의 기본 문법에 대해 학습하였다.
먼저, app.py의 main 함수에서 변수 "myname"을 선언하고 index.html에 "name"이라는 이름으로 값을 넘겨 주고
@app.route('/')
def main():
myname = "sparta"
return render_template("index.html", name=myname)html에서 "name" 값을 받을 자리를 표시하고 대입시켜주었다.
<h3>Hello, {{ name }}!</h3>
- 문법
{{ 변수명 or 표현식 }}
jinja2의 여러 문법을 경험 해보기 위해 "서울시 미세먼지 OPEN API"를 ajax로 요청하여 리스트에 바인딩 하는 실습을 진행하였다.
기존의 방식이었다면
<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);
$('#gu-list').empty();
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 >= 60) {
let temp_html = `<li>${gu_name}: ${gu_mise}</li>`;
$('#gu-list').append(temp_html);
}
}
}
});
}
</script><ul id="gu-list"></ul>이런 형식으로 구현했을 것이다.
Jinja2 문법을 사용하면 이렇게 풀이할 수 있다.
python 파일에서 html에 미세먼지 데이터를 넘겨준다.
@app.route('/detail')
def detail(keyword):
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)detail.html에서는 jinja2의 for, if 표현문을 통해 위와 같은 결과를 가져다 주었다.
<ul id="gu-list">
{% for row in rows %}
{% set gu_name = row['MSRSTE_NM'] %}
{% set gu_mise = row['IDEX_MVL'] | int %}
{% if gu_mise >= 50 %}
<li>{{ gu_name }}: {{ gu_mise }}</li>
{% endif %}
{% endfor %}
</ul>
- 변수선언 문법
{% set 변수명 = 값 %}
(!) 변수선언 시, set 키워드를 사용하여 선언한다.
- for 문법
{% for 요소변수 in 배열변수 %}
{% endfor %}
- if 문법
{% if 조건문 %}
{% endif %}
(!) for, if문은 반드시 {% endfor %} {% endif %}로 닫아 주어야 한다.
결과는
데이터 출력이 잘 된다.
마지막으로 URL의 일부를 변수로 받는 법에 대해 학습하였다.
브라우저에 HTML이 출력 되는 것은 GET 요청이기 때문에, URL 뒤에 ?를 붙여 파라미터를 넘겨줄 수 있다. (*query string)
브라우저의 주소창에
"?word_give=hello" 파라미터를 넘겨주었다.
app.py으로 돌아가
@app.route('/detail')
def detail():
word_receive = request.args.get("word_give")
return render_template("detail.html", word=word_receive)서버에서 파라미터 값을 받아 "word"라는 이름으로 detail.html에 넘겨 주었다.
<h3>받은 단어는 {{ word }}</h3>결과는 이러하다.
Flask에서 보다 더 깔끔한 형식의 URL로 파라미터를 받아 올 수 있다.
@app.route('/detail/<keyword>')
def detail(keyword):
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, word=keyword)@app.route('/detail/<keyword>')
def detail(keyword):@app.route 메소드의 인자의 경로 뒤에 를 넣어 주고 detail 함수에서 파라미터로 "keyword"를 받아
return render_template("detail.html", rows=rows, word=keyword)"word"라는 이름으로 keyword 파라미터를 detail.html에 넘겨주었다.
결과는
잘 출력되는 것을 확인할 수 있다.
오늘은 Jinja2의 아주 기본적인 면만 들여다 본 것 같다.
