2-1 정적 웹페이지 vs. 동적 웹페이지(필수개념)

1. Flask의 더 많은 기능을 배운다.
2. API에 보안 키를 전달할 수 있다.
3. 멀티페이지 사이트를 만들 수 있다!

• 정적 웹페이지(static web page)는 서버에 저장되어있는 HTML+CSS 파일 그대로 보여주는 것!
• 반면 동적 웹페이지(dynamic web page)는 상황에 따라 서버에 저장되어있는 HTML에 데이터 추가/가공을 해서 보여주는 방법입니다 🙂
• 정적 웹페이지는 추가적인 통신&계산이 필요 없기 때문에 속도가 빠르고 서버에 부담이 적은 반면, 추가/수정/삭제 등 내용 변경이 필요할 때 HTML 자체를 수정해야 하기 때문에 번거롭다는 단점이 있습니다.
• 동적 웹페이지는 한 페이지에서 상황/시간/사용자요청에 따라 다른 모습을 보여줄 수 있다는 장점이 있지만 상대적으로 보안에 취약하고 모습이 계속 변하기 때문에 (많은 경우 주소도 같이 변하죠!) 검색 엔진 최적화(search engine optimazation, SEO)가 어렵습니다.

동적 웹페이지의 종류

• Client-side rendering (CSR)

ex)html을 보낼떄 자바스트립트도 같이보내는데 그 때 자바 스크립트안에 데이터를 다 담아서 보내고

클라이언트 쪽에서 html을 받았을때 자바스크립트가 값을 채워넣는 형식

 

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

• Server-side rendering (SSR)

ex)html을 만들 때 빨강에는 단어를 넣어줘 주황에는 발음을 넣어줘 등 표시를 해놓고 사용자가 

단어를 검색을 하면 그 단어에 해당하는 값을 찾고 끼워넣어서 html를 완성한 다음에

통째로 보내주는 형식

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

• 복합적인 방법

ex)처음 요청이 들어오면 html에다가 자바스크립트를 심어서 보내주고 그 다음

그 페이지가 뜨고 나면 자바스크립트 코드가 다시 돌면서 ajax가 서버로 요청을 보내서

데이터를 다시 오고 채워주는 형식

---->서버에 요청을 2번을 보내는 방식

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

Jinja2 템플릿 언어

Flask 프레임워크에서 사용하는 템플릿 언어 '템플릿'이 되는 HTML 문서에 데이터가 들어갈 곳을

표시해놓는 역할을 합니다!

API 키

• Open API라도 너무 많은 요청을 보내는 등의 악용을 방지하기 위해, API 키를 배부 받아 요청 시에 같이 보내줘야하는 경우가 있습니다. 오늘 쓸 Owlbot 사전 API처럼요!
• 이 API 키를 1) 플라스크 서버에서 API로 요청을 보낼 때, 2) 클라이언트에서 API로 요청을 보낼 때 어떻게 같이 보내줘야하는지 배워보겠습니다.

 

2주차에 만들내용

http://spartacodingclub.shop/wp/vocab