[내배캠/TIL(4/29)]웹개발 플러스 2주차

day10(4/29) TIL

day10 느낀점

오늘은 좀 더 앞으로 프로젝트에 사용할 수 있는 부분들의 개념을 정확히 잡을 수 있었다.
그리고 앞으로 더 다양한 api를 경험해보고싶다.

정적 웹페이지 vs 동적 웹페이지

정적 웹페이지

• 정적 웹페이지(Static web page)는 서버에 저장되어있는 HTML+CSS 파일 보여주는 것이다.
• 속도가 빠르고 서버 부담이 적다.
• 서비스가 한정적이고, 내용 변경이 어렵다.

동적 웹페이지

• 동적 웹페이지(dynamic web page)는 상황에 따라 서버에 저장되어있는 HTML에 데이터 추가또는 가공을 해서 보여주는 방법이다.

• 상황에 맞게 변화할 수 있고, 변경을 관리하는 데 쉽다.

• 보안에 취약하고 때로 주소가 변하기때문에 검색엔진 최적화가 어렵다.

• 동적 웹페이지의 종류

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

Jinja2 템플릿 언어

렌더링할 html에 정보 보내기

return render_template("index.html", name=name, rows=rows)

변수 저장

{% set gu_name = rows[0].MSRSTE_NM %}
{% set gu_mise = rows[0].IDEX_MVL %}

변수 사용

<li>{{ gu_name }}: {{ gu_mise }}</li>

제어문 사용

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

필터

서버에서 받아온 데이터를 자바스크립트에서 사용할때 깨지는 문제 해결

|tojson : 받아온 값을 json 형태로 바꾸는 것

let words = {{ words|tojson }};

아스키코드로 인코딩 안되면 버리고 얘는 utf-8로 디코딩할것이다.

<span class="example">{{ definition.example.encode('ascii', 'ignore').decode('utf-8')|safe }}</span>

pymongo 인덱싱

pymongo에서 저장된 값을 찾을때는 순서대로 나오므로 인덱스를 이용해 값을 찾는 방법을 사용할 수 있다.

example = list(db.examples.find({"word": word_receive}))[number_receive]["example"]

url_for()

static 폴더에 mystyle.css 파일에 있다.

url_for("static", filename="mystyle.css")

main으로 돌아가고, msg변수를 함께 전달한다.

redirect(url_for("main", msg="단어가 이상해요"))