<강의 필기>
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와 같은 세부사항을 설정하는 기능을 제공한다.
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를 볼 수 있다.
강의 자료
Week 9 - CS50
Introduction to the intellectual enterprises of computer science and the art of programming. This course teaches students how to think algorithmically and solve problems efficiently. Topics include abstraction, algorithms, data structures, encapsulation, r
cs50.harvard.edu
CS50 Sandbox
CS50 Sandbox
Temporary programming environments for students and teachers.
sandbox.cs50.io
Design an MVC Model using Python for Flask Framework Development (by M. Mufid, A. Basofi, M. U. H. Al Rasyid, Indhi Farhandika Rochimansyah, Abdul rokhim)
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 |