웹개발플러스-나만의 단어장(1)

이번주차 프로젝트는 두 페이지로 이루어진 웹페이지를 만들어 본다고 한다.

씐난다 'ㅅ'// 내가 필요로 했던 스킬이라 이거쥐~~!!@@

 

먼저 프로젝트 시작 전 개념 정리부터@!

정적VS동적 , API키에 대해서 사전 체크!

---

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

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

>> 요즘 대부분 웹사이트는 동적으로 구성이 되어있다. 즉, 우리도 동적 웹페이지를 만들 줄 알아야한다!!

 

동적웹페이지 종류

• Client-side rendering (CSR)

우리가 HTML을 보낼때 자바스크립트를 담아서 보내듯,

자바스크립트에 데이터를 다 담아서 보낸 후, 클라이언트 쪽에서 HTML을 열어봤을때 자바스크립트가 돌면서 값을 채워나가는 (완성하는) 방법

• Server-side rendering (SSR)

서버 쪽에서 템플릿 HTML에 데이터를 끼워넣어 완성된 형태의 HTML을 보내주는 방법 = 단어장 만들떄 사용될 방법!

• 복합적인 방법

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

---

flask에서는 Server-side rendering을 어떻게 하는가?

>>우리가 Jinja2 템플릿 언어를 배워야 한다.

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

---

Owlbot 사전 API키

 

Open API라도 너무 많은 요청을 보내는 등의 악용을 방지하기 위해, API 키를 배부 받아 요청 시에 같이 보내줘야하는 경우가 있습니다. 이번주차 프로젝트에서 사용할 Owlbot 사전 API처럼@@

 

이 Owlbot 사전 API 키를

1) 플라스크 서버에서 API로 요청을 보낼 때,

2) 클라이언트에서 API로 요청을 보낼 때 어떻게 같이 보내줘야하는지 배울예정쓰

---

이번주차 project결과물 살펴보기

단어 검색, 클릭 시 상세페이지가 나오고, 단어 저장이 가능한  페이지를 만들어 볼 예쩡'ㅅ'/