웹개발 2주차 강의 정리

1) 정적 웹페이지와 동적 웹페이지

• 정적 웹페이지(static web page)는 서버에 저장되어있는 HTML+CSS 파일 그대로 보여주는 것이다.
• 반면 동적 웹페이지(dynamic web page)는 상황에 따라 서버에 저장되어있는 HTML에 데이터 추가/가공을 해서 보여주는 방법이다.

동적 웹페이지의 종류

1. Client-side rendering (CSR)
   자바스크립트에 데이터를 포함해서 보낸 후, 클라이언트 쪽에서 HTML을 완성하는 방법
2. Server-side rendering (SSR)
   서버 쪽에서 템플릿 HTML에 데이터를 끼워넣어 완성된 형태의 HTML을 보내주는 방법
3. 복합적인 방법
   클라이언트 쪽에서 Ajax 요청을 보내서 서버에서 데이터를 받아와 HTML을 완성하는 방법

+)Jinja2 템플릿 언어란?

Flask 프레임워크에서 사용하는 템플릿 언어로,
'템플릿'이 되는 HTML 문서에 데이터가 들어갈 곳을 표시해놓는 역할을 한다.
위의 2번 SSR 방식에서 사용된다.

사용방법:
1. app.py에서 render_template에 콤마로 구분자를 준 후 변수를 넣어준다.
2. 해당 html 파일에서 {{}} 중괄호 두개의 내부에 app.py에서 넣어준 변수를 사용할 수 있다.
3. {% %} 내부에서 반복문, 조건문, 변수 설정등의 코드를 넣어준 뒤 사용할 수 있다.

{% for row in rows %}
    {% set gu_name = row.MSRSTE_NM %}
    {% set gu_mise = row.IDEX_MVL %}
    {% if gu_mise >= 50 %}
      <li>{{ gu_name }}: {{ gu_mise }}</li>
	{% endif %}
{% endfor %}

반복문, 조건문의 경우 위와 같이 반복문 끝에 endfor/if를 넣어줘야 한다.

4. jinja2로 body뿐만 아니라 head에도 넣어줄 수 있다.
5. 또한 GET요청에서 url에 담겨온 정보도 사용할 수 있다.

@app.route('/detail/<keyword>')
def detail(keyword):
    return render_template("detail.html", word=keyword)