220307 항해99 1일차 (2)

웹페이지와 템플릿언어를 Araboza!

정적 웹페이지 VS 동적 웹페이지

• 정적 웹페이지: 서버에 저장이 되어있는 HTML+CSS 파일 그대로 보여주는 것
  • 추가적인 통신&계산이 필요 없기 때문에 속도가 빠르고 서버에 부담이 적다.
  • 단, 추가/수정/삭제 등의 내용 변경이 필요할 땐 HTML 자체를 수정해야 하기 때문에 번거롭다.

• 동적 웹페이지: 상황에 따라 서버에 저장되어있는 HTML에 데이터 추가/가공을 해서 보여주는 것

  • 한 페이지에서 상황/시간/사용자요청에 따라 다른 모습을 보여줄 수 있다는 장점이 있다.

  • 대신 상대적으로 보안에 취약하고, 모습이 계속해서 변하기 때문에 검색 엔진 최적화가 어렵다.
    

    ---

동적 웹페이지의 종류

• Client-side rendering(CSR)

  • 자바스크립트에 데이터를 포함해서 보낸 후, 클라이언트 쪽에서 HTML을 완성하는 방법

• Server-side rendering(sSR)

  • 서버 쪽에서 템플릿 HTML에 데이터를 끼워넣어 완성된 형태의 HTML을 보내주는 방법

• 복합적인 방법

  • 클라이언트 쪽에서 Ajax 요청을 보내서 서버에서 데이터를 받아와 HTML을 완성하는 방법

Jinja2 템플릿 언어

• Flask 프레임 워크에서 사용하는 템플릿 언어
• '템플릿'이 되는 HTML 문서에 데이터가 들어갈 곳을 표시해놓는 역할을 한다.

사용 예시

1. 서버에서 name 이라는 이름으로 값을 보내준다

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

2. html 파일에서 이 값이 들어갈 자리를 표시해준다.

<h3>Hello, {{ name }}!</h3>

3. 화면에는 Hello, sparta 라고 출력.

간단한 문법

• {{ ... }} : 변수나 표현식의 결과를 출력하는 구분자(delimeter)
• {% ... %} : if문이나 for문 같은 제어문을 할당하는 구분자(delimeter)
  • if문과 for문은 {% endif %}, {% endfor %}을 끝에 적어주어야 종료가 된다.
• {# ... #} : 주석 처리