Flask
들어가기 전에
1,2주차에 공부를 했던 것은 웹의 '프론트엔드'부분이었다.
Html,CSS,JS 등으로 이것을 구현해보았고, 3주차부터는 '백엔드'부분을 공부하고 있는데 서버개발환경에 대해서 아주아주 간단하게 이야기해보면
- 로컬개발환경
컴퓨터 1대로 개발 및 테스트환경, 서버까지 모두 구축을 한 환경을 이야기한다.
즉,클라이언트=서버인 상태이다. - 현재 구축 중인 환경은?
이번 주차에Flask를 이용하여 서버를 구축하고 DB는mongoDB Atlas라는 클라우드를 이용하려 한다.
Flask란?
시작
Python에서 서버를 구축할 수 있게 도와주는 프레임워크이다.
(프레임워크=큰 라이브러리)
app.py라는 파일을 하나 생성한 뒤 아래의 코드를 실행시켜주면
import flask
from flask.app import Flask
from flask import Flask
app = Flask(__name__)
@app.route('/')
def home():
return 'This is Home!'
if __name__=='__main__':
app.run('0.0.0.0',port=5000,debug=True)
localhost:5000의 의미
사용자마다 고유의 IP가 있는데 플라스크는 이 IP를 사용하지 않고
localhost라고 알려진 인터넷의 루프백 주소 127.0.0.1을 사용한다.
루프백 주소는 웹 서버나 네트워크 동작 기능을 테스트하는 데에 사용하고,
자신에게 다시 데이터가 돌아오게 하는 방식이다!
URL나누기
@app/route()를 수정해서 URL을 나눠보자!
이때 주의할 점 2가지
- url별로 함수명이 같으면 안된다.
- route('/')내의 주소가 같으면 안된다!
import flask
from flask.app import Flask
from flask import Flask
app = Flask(__name__)
@app.route('/')
def home():
return 'This is my Home!'
@app.route('/mypage')
def mypage():
return 'This is myPage!!'
if __name__=='__main__':
app.run('0.0.0.0',port=5000,debug=True)
이렇게 새로운 페이지를 추가할 수 있다.
구조
Flask 서버를 만들 때는 정해진 구조가 있다.
static: 이미지, css파일을 넣는다.templates: html파일을 넣는다.app.py
templates
templates폴더 안에 html파일을 하나 생성하고
내용을 채워준다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>나의 첫 웹페이지</h1>
<button>Here we go!</button>
</body>
</html>그 후에 app.py를 수정해준다.
render_template을 import 해주고 @app.route('/')의 반환값을 바꿔준다.
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def home():
return render_template('index.html')
@app.route('/mypage')
def mypage():
return 'This is myPage!!'
if __name__=='__main__':
app.run('0.0.0.0',port=5000,debug=True)API만들기
Flask의 jsonify를 이용하면 데이터를 json형태로 보내주는 API서버를 만들 수 있다.
2주차에서 다뤘었던 jQuary와 ajax를 활용할 것인데 복습 겸 다시 API를 조금
이야기 해보면
API는 클라이언트와 서버를 이어주는 역할을 해주고, 이 때 서버의 요청을 할 때에는
Html 메서드로 그 종류를 알려줄 수 있다.
2주차에는 조회를 하는 GET을 다뤘었고 이번에는 데이터의 생성, 변경, 삭제에 사용을 하는
POST를 이용해보았다!
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function hey(){
$.ajax({
type: "POST",
url: "/test",
data: { say_Hi:'안녕하세요' },
success: function(response){
console.log(response['msg'])
}
})
}
</script>
</head>
<body>
<h1>나의 첫 웹페이지</h1>
<button onclick="hey()">Here we go!</button>
</body>
</html>GET과 POST의 차이점은 Ajax코드에서 data에 값을 넣어주는 것이다.
딕셔너리 형태로 넣어주면 된다.
app.py
# app.py
from flask import Flask, render_template, jsonify, request
app = Flask(__name__)
@app.route('/')
def home():
return render_template('index.html')
@app.route('/test', methods=['POST'])
def test_post():
receive_Hi = request.form['say_Hi'] #클라이언트에서 받은 정보
print(receive_Hi) #클라이언트에서 받은 정보 출력
return jsonify({'result':'success', 'msg': '요청완료!'})
if __name__=='__main__':
app.run('0.0.0.0',port=5000,debug=True)html파일은 클라이언트 코드이고 app.py는 서버 코드 이다.
html파일에서 버튼을 눌렀을 때 hey()라는 함수를 실행하도록 해놓았다.
hey()함수는 서버에 Post요청을 보내고, app.py에서 Post 요청을 받는다.
클라이언트에서 서버로 data에 할당된 { say_Hi:'안녕하세요' }가 전달이 된다.
app.py를 실행시켜 확인해 보면 '안녕하세요' 라고 출력이 되는 것을 알 수 있다.
즉, 클라이언트의 요청이 서버에 잘 도착한 것이다.
서버에서는 받은 요청에 대해서 처릴를 한 후 jsonify로 이용해 클라이언트로
json response를 보낸다.
웹사이트를 실행시켜서 버튼을 누르면 콘솔창에 '요청완료!' 라고 출력이 된다.
수업을 듣고 해본 것들
1. 나만의 영화 평점 사이트
3주차에 진행했던 웹 크롤링을 이용해서 og(Open Graph)타이틀과 포스터이미지, 요약을 가져왔다.
저번처럼 선택자 복사를 그대로 이용하면 크롤링이 되지 않아서
soup.select_one('meta[property="og:title"]')['content']
위와 같이 접근하여 가져왔다.
위와 같은 입력칸에 정보를 입력하면, DB에 저장이 된다.
POST를 하면 window.location.reload()를 통해서 새로고침을 해주고,
$(document).ready(function () { GET요청 함수 }); 를 통해서
새 창이 로드되면 GET요청을 통해 DB에서 정보를 가져오도록 하였다.
서버에서 받아온 데이터를 바탕으로 html뼈대를 붙여주어서
영화 평가컨텐츠가 추가 되도록 하였다!
2. 버킷리스트
버킷리스트를 만들어보았는데 GET, POST로 입력한 리스트를 추가하는 것은
위와 동일하다.
완료버튼을 누르면 빗금을 긋기를 요청하기 위해서
DB에 기록을 할 때 index 를 주었고,
버튼을 눌렀을 때 그 index에 해당하는 DB의 완료 여부를 담는 변수인 done의 정보를 바꾸어 주었다.
db.bucket.update_one({조건},{'$set':수정사항})위의 코드를 이용하여 DB에 저장된 데이터를 수정할 수 있다.
GET으로 로드한 DB의 데이터 중 done변수에 따라
if문으로 case를 나눠서 붙여줄 html을 다르게 작성해주었다.
끝내며
스파르타 코딩클럽 웹 프로그래밍 강의의 5주차까지 모두 완주하였다!
5주차에는 aws를 이용하여 배포까지 해보았다.
서포터즈 활동을 하며 받은 강의였는데 무언가를 만들기에 최적화된 강의였다.
하지만 전공자들이 웹이 돌아가는 메커니즘이라던가 여러가지 확실히 배우고
싶어서 듣기에는 적합하지는 않았던 것 같다.
반대로 말하면 웹이라는 것을 경험하지 않은 사람들이 빠르게 결과물을 내면서 배우기에는 아주 좋은 환경을 제공해준다는 것이다!
나의 경우에는 웹을 경험해보지 않아서 강의를 듣고 velog 포스팅을 할 때
구글링을 통해 조금 더 찾아보면서 공부를 하게 된 것 같다.
그리고 직접 간단한 여러 프로젝트를 만들다보니 뭔가의 기능을 더 넣어 보고 싶어서 배우고 싶은 열망을 만들어 주었던 강의였다!
.png)