on
웹개발 플러스 2주차 강의
웹개발 플러스 2주차 강의
동적 웹페이지 vs 정적 웹페이지
- 정적 웹페이지(static web page)는 서버에 저장되어 있는 HTML+CSS 파일을 그대로 보여주는 것!
- 반면 동적 웹페이지(dynamic web page)는 상황에 따라 서버에 저장되어 있는 HTML에 데이터 추가 / 가공을 해서 보여주는 방법이다.
- 정적 웹페이지는 추가적인 통신 & 계산이 필요 없기 때문에 속도가 빠르고 서버에 부담이 적은 반면, 추가/수정/삭제 등 내용 변경이 필요할 때 HTML 자체를 수정해야 하기 때문에 번거롭다는 단점이 있다.
- 동적 웹페이지는 한 페이지에서 상황/시간/사용자 요청에 따라 다른 모습을 보여줄 수 있다는 장점이 있지만 상대적으로 보안이 취약하고 모습이 계속 변하기 때문에 (많은 경우 주소도 같이 변한다) 검색 엔진 최적화(Search Optimazation, SEO)가 어렵다.
동적 웹페이지 종류
1) Client-Side Rendering (CSR)
: 자바스크립트에 데이터를 포함해서 보낸 후, 클라이언트 쪽에서 HTML을 완성하는 방법
2) Server-Side Rendering(SSR)
: 서버 쪽에서 템플릿 HTML에 데이터를 끼워넣어 완성된 형태의 HTML을 보내주는 방법
3) 복합적인 방법
: 클라이언트 쪽에서 Ajax 요청을 보내서 서버에서 데이터를 받아와 HTML을 완성하는 방법
jinja2 템플릿 언어
: Flask 프레임워크에서 사용하는 템플릿 언어
: '템플릿'이 되는 HTML 문서에 데이터가 들어갈 곳을 표시 해놓는 역할을 한다.
API키
- Open API라도 너무 많은 요청을 보내는 등의 악용을 막기 위해서 API 키를 배부 받아 요청 시에 같이 보내줘야 하는 경우가 있다. 오늘 쓸 Owlbot 사전 API처럼(나는 허락 받은 사람이야!라는 것을 알려주기 위해서 API 키를 사용한다.)
- 이 API 키를 1) 플라스크 서버에서 API로 요청을 보낼 때 2) 클라이언트에서 API로 요청을 보낼 때 어떻게 같이 보내줘야 하는 지 배운다.
나만의 단어장
플라스크로 멀티 페이지 사이트 만들기 - 기초
1) 페이지 간 이동하기
- 프로젝트 생성
폴더 구조
+ 패키지 설치하기(Flask, pymongo, requests)
+ app.py 기본 코드
from flask import Flask, render_template app = Flask(__name__) @app.route('/') def main(): return render_template("index.html") @app.route('/detail') def detail(): return render_template("detail.html") if __name__ == '__main__': app.run('0.0.0.0', port=5000, debug=True)
- 페이지 간 연결하기
메인 페이지 상세 페이지로 가기
상세 페이지 메인 페이지로 이동하기
2) jinja2 템플릿 언어 이용하기
@app.route('/') def main(): myname = "Sparta" return render_template("index.html", name=myname)
메인 페이지 상세 페이지로 가기 {{name}}아 안녕!
플라스크로 멀티 페이지 사이트 만들기 - 응용
1) jinja2 템플릿 언어 이용하기 응용편
@app.route('/detail') def detail(): # 값을 받아와서 renger_template에 보낼 값이 필요함 r = requests.get('http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99') response = r.json() rows = response['RealtimeCityAir']['row'] return render_template("detail.html", rows=rows)
상세 페이지 메인 페이지로 이동하기 {# 반복문 사용 #} {% for row in rows %} {# 변수를 받을 때 사용 #} {% set gu_name = row["MSRSTE_NM"] %} {% set gu_mise = row["IDEX_MVL"]|int %} {# 조건문 사용 #} {% if gu_mise > 65 %} {{gu_name}} : {{gu_mise}} {% endif %} {# for문이 어디서 끝나는 지 알려줘야 한다. #} {% endfor %}
2) URL의 일부를 변수로 받기
@app.route('/detail/') def detail(keyword): # 값을 받아와서 renger_template에 보낼 값이 필요함 r = requests.get('http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99') response = r.json() rows = response['RealtimeCityAir']['row'] word_receive = request.args.get("word_give") print(word_receive) return render_template("detail.html", rows=rows, word=keyword)
사전 API 이용하기
1) 사전 API 구경하기
https://owlbot.info/
2) API 키 신청하기
3) 파이썬으로 API에 요청 보내기
r = requests.get("https://owlbot.info/api/v4/dictionary/owl", headers={"Authorization": "Token [내토큰]"}) result = r.json() print(result)
4) Ajax로 요청 보내기
$.ajax({ type: "GET", url: "https://owlbot.info/api/v4/dictionary/owl", beforeSend: function (xhr) { xhr.setRequestHeader("Authorization", "Token [내토큰]"); }, data: {}, error: function (xhr, status, error) { alert("에러 발생!"); }, success: function (response) { console.log(response) } })
나만의 단어장 만들기
시작 코드
Sparta Vocabulary Notebook
Sparta Vocabulary Notebook
폰트 아이콘 사이트
https://fontawesome.com/v4.7/icons/
-> Font Awesome 링크
from http://eundol1113.tistory.com/54 by ccl(A) rewrite - 2021-11-02 12:26:24