웹개발 플러스 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을 완성하는 방법

slack 4기 잡담방에 어떤 분이 서버 사이트 렌더링이랑 클라이언트 사이트 렌더링을 이해하신 내용을 올려 주셨는데

이해하기 쉽게 설명을 풀어 주신 것 같아서 써보았다.

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)

- 페이지 간 연결하기

    <body>
        <h1>메인 페이지</h1>
        <a href="/detail">상세 페이지로 가기</a>
    </body>

    <body>
        <h1>상세 페이지</h1>
        <button onclick="window.location.href = '/'">메인 페이지로 이동하기</button>
    </body>

2) jinja2 템플릿 언어 이용하기

@app.route('/')
def main():
    myname = "Sparta"
    return render_template("index.html", name=myname)

<body>
        <h1>메인 페이지</h1>
        <a href="/detail">상세 페이지로 가기</a>
        <h3>{{name}}아 안녕!</h3>
    </body>

플라스크로 멀티 페이지 사이트 만들기 - 응용

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)

    <body>
        <h1>상세 페이지</h1>
        <button onclick="window.location.href = '/'">메인 페이지로 이동하기</button>
        <ul id="gu_list">
            {# 반복문 사용 #}
            {% for row in rows %}
                {# 변수를 받을 때 사용 #}
                {% set gu_name = row["MSRSTE_NM"] %}
                {% set gu_mise = row["IDEX_MVL"]|int %}
                {# 조건문 사용 #}
                {% if gu_mise > 65 %}
                    <li>{{gu_name}} : {{gu_mise}}</li>
                {% endif %}
            {# for문이 어디서 끝나는 지 알려줘야 한다. #}
            {% endfor %}
        </ul>
    </body>

2) URL의 일부를 변수로 받기

@app.route('/detail/<keyword>')
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/

Owlbot Dictionary API

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)
    }
})

나만의 단어장 만들기

시작 코드

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <title>Sparta Vocabulary Notebook</title>

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
              integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
              crossorigin="anonymous">
        
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
                integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
                crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
                integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
                crossorigin="anonymous"></script>

    </head>
    <body>
    </body>
</html>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <title>Sparta Vocabulary Notebook</title>

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
              integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
              crossorigin="anonymous">
        
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
                integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
                crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
                integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
                crossorigin="anonymous"></script>

    </head>
    <body>
    </body>
</html>

폰트 아이콘 사이트

https://fontawesome.com/v4.7/icons/

Font Awesome Icons

Get 1535 icons right now with FA Free, plus another 7020 icons with Pro, which also gets you another 53 icon category packs as we finish them! Our all-new SVG with JavaScript gives you all the power of SVG without the usual hassle. Ligatures for easier des

fontawesome.com

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

-> Font Awesome 링크

저작자표시

'항해 중 > 웹 개발 플러스' 카테고리의 다른 글

웹개발 플러스 4주차 강의 (0)	2021.11.04
웹개발 플러스 3주차 강의 (0)	2021.11.03
웹개발 플러스 1주차 강의 (0)	2021.11.01

비 오는 날 개구리

웹개발 플러스 2주차 강의

'항해 중 > 웹 개발 플러스' 카테고리의 다른 글

댓글

티스토리툴바

웹개발 플러스 2주차 강의

'항해 중 > 웹 개발 플러스' 카테고리의 다른 글

관련글

댓글

티스토리툴바