본문 바로가기
Doc/컴퓨터

컴퓨터과학 CS50 2020 Lecture 9 : Flask

페르디낭 2022. 7. 3. 18:37

 

 

 

<강의 필기>

 

 

Web programming
http-server가 정적인 페이지에만 반응한다.
dynamic하게 웹페이지를 반환하기 위해서는
http-server를 parse하여 GET /search?q=cats HTTP/1.1와 같이 headers를 분석하고 요청한다.

 

 

 

 

Flask

Flask는 http-server를 parse하는 함수를 포함하는 파이썬 프레임워크이다.


application.py는 web server를 호출하는 Python Code이다.
requirements.py는 어플리케이션에 포함되는 라이브러리의 목록을 포함한다.
static/는 CSS와 JavaScript 파일과 같은 정적인 http-server를 구성한다.
templates/는 HTML를 구성하는 데 사용할 dictionary file이다.

 

Flask는 일반적으로 MVC(Model-View-Controller) design pattern을 따른다.

Model은 SQL 데이터베이스와 CSV file와 같은 어플리케이션의 데이터이다.

View는 HTML와 CSS 같이 사용자와 상호작용하는 user interface이다.

Controller는 어플리케이션의 전반적인 논리와 코드이다.

 

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route("/")
def index():
    return render_template("index.html", name=request.args.get("name", "world"))

 

Flask 변수에 해당하는 파일 이름 name을 부여하는 app 변수를 할당한다.

@app.route에서 route /는 함수에 이름을 붙이고 decorator @는 함수를 다른 함수에 적용한다.

templates/ directory file과 index.html를 불러와 Flask의 내용을 채운다. 
server’s URL에 접속하면 flask run의 결과가 반환된다.
render_template는 name과 같은 argument를 get한다.
name은 placeholders에서 template, HTML file로 대체된다. 

<html lang="en">
    <head>
        <title>hello</title>
    </head>
    <body>
        hello, {{ name }}
    </body>
</html>


placeholder
변수의 타입을 미리 설정해놓고 필요한 변수를 나중에 받아서 실행하는 것이다.

 

 

 

 

 

POST

@app.route("/greet", methods=["POST"])
def greet():
    return render_template("greet.html", name=request.form.get("name", "world"))

request.args에서 GET 요청의 파라미터를 설정하는 동안
request.form를 POST 요청의 파라미터를 사용한다.

 

 

 

 

 

Layouts

<html lang="en">
    <head>
        <title>hello</title>
    </head>
    <body>
        {% block body %}
        ...
        {% endblock %}
    </body>
</html>

 

Flask는 {% %}의 placdholder blocks 문법을 쓰는 템플릿 언어 Jinja를 지원한다.
body 요소에서 HTML을 포함하는 block을 형성한다.
템플릿 언어는 HTML 작업을 더 수월하게 해주는 장고 프레임워크 상의 언어이다. 

 

 

 

 

 

Storing data
web server에 registered students, registrants, dictionary를 저장한다.

from cs50 import SQL
from flask import Flask, redirect, render_template, request

app = Flask(__name__)

db = SQL("sqlite:///froshims.db")

...

sqlite3 froshims.db은 데이터베이스를 열고 .schema 명령은 id, name, sport 테이블을 불러온다.

 

 

@app.route("/register", methods=["POST"])
def register():

    name = request.form.get("name")
    if not name:
        return render_template("error.html", message="Missing name")
    sport = request.form.get("sport")
    if not sport:
        return render_template("error.html", message="Missing sport")
    if sport not in SPORTS:
        return render_template("error.html", message="Invalid sport")

    db.execute("INSERT INTO registrants (name, sport) VALUES(?, ?)", name, sport)

    return redirect("/registrants")


@app.route("/registrants")
def registrants():
    registrants = db.execute("SELECT * FROM registrants")
    return render_template("registrants.html", registrants=registrants)

db.execute에서 반환되는 것은 dictionary이다.

registrant.name와 registrant.sport에 접근하는 key와 value로 이루어진 행을 사용할 수 있다.

 

 

 

 

 

 

flask_mail

이메일 사용자를 위한 라이브러리이다.

username, password, mail server와 같은 세부사항을 설정하는 기능을 제공한다.

 

 

 

 

 

Sessions
HTTP/1.1 200 OK
Content-Type: text/html
Set-Cookie: session=value
...

http-server는 set-cookie라는 header를 보낸다.

 

 

cookie

웹서버의 데이터 조각이다. 사용자의 접속 도중에 생성되는 고유의 식별정보와 흔적이다.

실생활의 사례로 비유하자면, 놀이공원에서 놀이기구를 타고 떠날 때 손도장을 받는 것과 같다.

 

 

from flask import Flask, redirect, render_template, request, session
from flask_session import Session

app = Flask(__name__)
app.config["SESSION_PERMANENT"] = False
app.config["SESSION_TYPE"] = "filesystem"
Session(app)


@app.route("/")
def index():
    if not session.get("name"):
        return redirect("/login")
    return render_template("index.html")


@app.route("/login", methods=["GET", "POST"])
def login():
    if request.method == "POST":
        session["name"] = request.form.get("name")
        return redirect("/")
    return render_template("login.html")


@app.route("/logout")
def logout():
    session["name"] = None
    return redirect("/")

라이브러리 flask_session를 사용한다.

IDE의 filesystem을 사용하기 위해 sessiln 라이브러리를 사용한다.
Flask는 session 변수를 유지하기 위해 HTTP cookies를 이용하고 사용자는 각자의 cookie를 갖는다.
/ route에서는 session에 대한 default 정보를 갖는다.
/login route를 거쳐 POST 메소드를 통해 session의 이름을 설정한다.

로그아웃을 하면 /login에서 / route로 돌아간다.

 

 

 

 

 

 

store, shows

websites의 shopping carts는 서버에 저장된 쿠키와 세션 변수를 실행한다.
application.py는 데이터베이스와 세션을 사용하기 위해 어플리케이션을 초기화한다.
index()에서 default route database에 저장된 책 목록을 render한다.
templates/books.html는 책의 목록을 보여준다. Add to Cart라는 식으로 표현할 수 있다.
/cart route는 session 변수에서 POST 메소드의 id를 저장한다.
GET 메소드에서는 /cart sessio의 id와 책 목록의 id를 match하여 보여준다.
 

 

 

 

 

 

Front-End / Back-End
사용자에게 시각적으로 보이는 영역 front-end에서 JavaScript
관리자가 확인하는 서버 영역 back-end에서 Python를 사용한다.

 

 

 

 

 


jsonify
dictionary의 list로 이루어진 json 포맷의 파일을 show한다.

 

 

 

 

 

 

JQuery

$.get은 더 많은 데이터를 불러오기 위해 HTTP를 JavaScipt에 요청하는 AJAX call이다.

AJAX call는 비동기 통신을 한다.

새로 페이지가 로드되는 방식이 아닌 ajax 요청을 한 데이터만 가져와 서버의 부담을 줄인다.

$.get에서 network tab을 열면 서버에서 요청한 key를 볼 수 있다.

 

 

 

 

 

 

 

 

Design an MVC Model using Python for Flask Framework Development | Semantic Scholar

The results showed that the presence of MVC on the flask framework could make users easier in creating new projects and have faster fully load time. The Model-View-Controller (MVC) framework has become the standard in modern software development, with the

www.semanticscholar.org

 

 

 

텐서플로우(Tensorflow) - 플레이스홀더(Placeholder) (Tistory Blog 자비스가 필요해)

 

텐서플로우(Tensorflow) - 플레이스홀더(Placeholder)

텐서플로우(tensorflow)에는 플레이스홀더(Placeholder)라는 기능이 있습니다. 바로 전 포스팅에서 텐서플로우의 그래프(graph)에 대해서 설명을 드렸는데 텐서플로우는 그래프라는 것을 미리 만들어

needjarvis.tistory.com

 

 

 

Template Language (Velog pkj6962)

 

Template Language

템플릿 언어는 HTML 작업을 더 수월하게 해주는 장고 프레임워크 상의 언어이다. 템플릿은 (지금까지 배운 내용 하에서) {% %}로 감싸진 형식 안에 태그 와 변수로 이루어진다. 변수는 '{{ }}' 안에

velog.io

 

 

 

프론트엔드와 백엔드 (Wikipedia)

 

프론트엔드와 백엔드 - 위키백과, 우리 모두의 백과사전

 

ko.wikipedia.org

 

 

 

[Ajax/jQuery] jQuery 를 활용한 Ajax 방식 프로그래밍 (Tistory Blog Programmer 파프리카의 이야기)

 

[Ajax/jQuery] jQuery 를 활용한 Ajax 방식 프로그래밍

[ 목차 ] : 클릭하여 목차 이동 0. 이론 1. JSONObject와 JSONArray 2. jquery ajax(get방식으로 Servlet을 거쳐서 데이터를 받아옴) 3.  jquery ajax(post방식으로 Servlet을 거쳐서 데이터를 받아..

creamilk88.tistory.com

 

 

 

[ Jquery ] 제이쿼리 Ajax 사용법 (Tistory Blog 고똘이의 IT 개발이야기)

 

[ Jquery ] 제이쿼리 Ajax 사용법

안녕하세요 오늘은 ajax에 대해서 설명 드리겠습니다. ajax를 간단히 설명하자면 비동기통신 입니다. "어?비동기통신이 뭐지" 라고 하실 수 있는데요. 비동기 통신을 간단히 설명해 드리자면 보

dion-ko.tistory.com

 
 
 

'Doc > 컴퓨터' 카테고리의 다른 글

컴퓨터과학 CS50 2020 Lecture : Security  (0) 2022.07.03
컴퓨터과학 CS50 2020 Lecture 10 : Ethics  (0) 2022.07.03
컴퓨터과학 CS50 2020 Lecture 8 : HTML, CSS, JavaScript  (0) 2022.06.27
컴퓨터과학 CS50 2020 Lecture 7 : SQL  (0) 2022.06.10








티스토리툴바

>