1) 정적 웹페이지 vs 동적 웹페이지
정적) 서버에 저장되어있는 html +css 를 그대로 보여줌
동적) 상황에 따라 서버에 저장되어있는 html에 데이터 추가가공을 해서 보여줌
정적)
그대로 보여주니 서버부담이 적고 속도가 빠르다
항상 같은 모습으로 서비스가 한정적, 내용 변경이 까다롭다 ex) 포트폴리오, 회사소개 페이지
ㄴserver side rendering(SSR)
서버쪽에서 아예 html에 데이터를 끼워넣어 완성된 형태의 html 을 보내주는 방법
동적)
대부분 동적구성
상황에 맞게 변하는 모습, 관리가 쉽다
보안에는 취약하며 모습이 계속 변하다 보니 검색엔진최적화가 어렵다
ex) 블로그, client-side rendering (CSR)
자바스트립트에 데이터를 포함해서 보내면 클라이언트 쪽에서 html 을 채워 넣어 완성하는 방법
복합적 방법)
복합적 방법도 많이 사용함
<-요청
html + 자바스크립트->
서버에 요청을 2번 보내는 방법
jinja2-flask 프레임워크에서 사용하는 템플릿 언어
템플릿이 되는 html에 데이터가 들어갈 곳을 표시
-악용방지를 위해 모든 client에게 api키를 제공
-jinja2
사람마다 다른 동적 부분을 끼워 넣을 때 html에는 중괄호 2개로 받아서 넣는다 {{}}
app 에서는 변수만들고 return에서 같이 보내줌
html에서만 작동하기에 external css를 만들면 그안에 넣어놓은 사진들 path를 바꿔줘야함
*숫자표현할때 정수형으로 표현해줘
| int
ex){{rows[0]["MSRSTE_NM"] }}: {{ rows[0]["IDEX_MVL"]|int }}
*변수
{%set 변수이름 = 변수값%}
- 반복문/조건문->끝내는 절이 필요
for
{% for row in rows %}
{% endfor %} -끝낼때 어디서 끝날건지를 알려줘야함
if
{% if 조건%}
{% endif %}
url 주소에서 데이터받기
python에
word_receive = request.args.get("word_give")
definition.example.encode('ascii', 'ignore').decode('utf-8')|safe
encode('ascii', 'ignore')- ascii코드로 바꿀 수 없는 부분은 무시해
decode('utf-8')- 그 부분을 다시 문자열로 바꿔줘
|safe 위험하지 않으니까 그냥 그대로 보여줘
words = list(db.words.find({}, {"_id": False}))
_id :db에서 자동으로 만들어주는 id값
자료형이 특이->id열은 빼고 보내야 에러를 피할 수 있음
리스트에 포함이 되는지 안되는지 확인
if(word_list.includes(word))
=>word가 word_list에 포함되는지
$(#)[0].scrollIntoView()
scrollIntoView-해당하는 부분을 스크롤해서 들어오게 하기
