⭐projects 폴더 내에 prac 폴더 만들고 시작 !
Flask는 만드는 프로젝트의 폴더 구조가 정해져 있기 때문에 규칙 꼭 지키기 !
prac 폴더 구조
prac
|— venv
|— app.py (서버)
|— templates
|— index.html (클라이언트 파일)
app.py
파일, templates
폴더 생성index.html
파일 생성venv
생성하기 Terminal > New Terminal
클릭python -m venv venv
입력하고 엔터 (venv)
라고 뜨면 가상환경 활성화 완료 !⭐가상환경에 Flask 라이브러리 설치 !
pip install flask
입력하고 엔터 app.py 파일에 아래 코드를 붙여 넣어주기 (통상적으로 flask를 실행시킬 가장 기본이 되는 python 파일 이름을 app.py
라고 붙여준다.)
from flask import Flask
app = Flask(__name__) #여기가 app인 이유가 있다구 ..
@app.route('/')
def home():
return 'This is Home!'
if __name__ == '__main__':
app.run('0.0.0.0',port=5000,debug=True)
저장하고 오른쪽 마우스 - 터미널에서 Python 파일 실행 눌러주면 아래 사진처럼 창이 뜨는데 그냥 액세스 허용 눌러주면 된다. (맥 사용자들은 잘 안되는 경우가 존재함. 그럴 때는 CTRL + C
눌러서 quit 해주고 위에 port=5000을 5001로 바꿔주고 다시 실행해보기)
chrome 새 창 열고 주소창에 localhost:5000
(5001로 바꿨으면 5001 입력하기) 그럼 아래 사진처럼 This is Home! 이라는 문구가 나오면 성공 👏
이 This is Home! 부분은 flask 기본 코드에서 return 'This is my Home!'
이 부분이 출력되는 것. This is Home! 이 코드를 This is my Home! 이라고 바꾸고 저장하면 이런 식으로 터미널에서 알아서 Restart가 된다. 브라우저로 가서 새로고침 하면 아래 사진처럼 내용이 수정된 것을 확인할 수 있다.
조금 더 고쳐보자.
@app.route('/')
def home():
return 'This is my Home!'
이 내용을 복붙해서 수정해줬다. 아래처럼 !
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)
저장하고 다시 크롬으로 고고 👉
주소창에 localhost:5000/mypage
입력하면 아래처럼 창이 나온다 ! 뭔가 조금 더 사이트 스러워졌어 (•̀ᴗ•́)و ̑̑
⭐ Flask 서버 생성할 때 항상 프로젝트 폴더 내에 templates 폴더
, app.py
파일 두 개는 항상 만들어두고 시작하기 !
templates 폴더에 index.html 파일 생성하고 아래 코드를 적어줬다. 이걸 python에서 실행하려면 ???
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<title>Document</title>
<script>
function hey(){
alert('안녕!')
}
</script>
</head>
<body>
<button onclick="hey()">나는 버튼!</button>
</body>
</html>
다시 app.py
파일로 가서 html 파일을 불러와보자. render_template
입력 ! re 까지만 쳐도 render_template 나온다. return문도 수정해주고 저장하기 !
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def home():
return 'This is my Home!'
@app.route('/mypage')
def mypage():
return render_template('index.html')
if __name__ == '__main__':
app.run('0.0.0.0',port=5000,debug=True)
다시 아까 열어뒀던 페이지 가서 새로고침 하면 index.html에서 작성했던 버튼이 보이는 것을 확인할 수 있다 😎
GET
, POST
방식 1) GET 요청
2)POST 요청
먼저 GET 방식에 대해 알아보자.
@app.route('/test', methods=['GET'])
def test_get():
title_receive = request.args.get('title_give')
print(title_receive)
return jsonify({'result':'success', 'msg': '이 요청은 GET!'})
위 코드 복사해서 app.py 파일에 붙여넣어 준다. 코드를 조금 살펴보자면 methods=['GET']
GET 요청으로 /test
라는 창구로 들어오는데 title_give
라는 데이터가 있으면 이걸 가져와서 title_receive
라는 변수에다가 넣고 print 하자. 그리고 백엔드에서 프론트엔드 데이터 내려주기를 'result':'success', 'msg': '이 요청은 GET!'
이렇게 내려준다는 뜻 ! (일단 이렇게 이해하고 작성 다 하고 보면서 확인해 보자.)
from flask import Flask, render_template, request, jsonify
app = Flask(__name__)
@app.route('/')
def home():
return render_template('index.html')
#get 방식 코드 붙여넣음
@app.route('/test', methods=['GET'])
def test_get():
title_receive = request.args.get('title_give')
print(title_receive)
return jsonify({'result':'success', 'msg': '이 요청은 GET!'})
if __name__ == '__main__':
app.run('0.0.0.0',port=5000,debug=True)
def home():
에서 index.html 파일을 불러오도록 수정request
, jsonify
붙여넣기이 get 방식을 확인하기 위해서 아래 코드를 복사해서 index.html
파일로 고고
fetch("/test").then(res => res.json()).then(data => {
console.log(data)
})
전에 배웠던 fetch !! 반갑구만T^T ~ function hey()에 붙여넣기 !
/test
라고 하는 url에 요청해서 data를 받아서 console에 찍어보자는 내용
저장하고 크롬에서 localhost:5000 페이지 들어가서 버튼 click하고 F12로 창 열면 console창에 데이터가 찍혀있는 것을 확인할 수 있다.
그럼 이제 POST 방식에 대해 알아보자.
@app.route('/test', methods=['POST'])
def test_post():
title_receive = request.form['title_give']
print(title_receive)
return jsonify({'result':'success', 'msg': '이 요청은 POST!'})
코드가 헷갈릴 수도 있으니까 아까 GET 방식 코드 지우고 위 POST 코드를 붙여넣어준다.
let formData = new FormData(); //formData 만들어서
formData.append("title_give", "블랙팬서"); //데이터 실어서
fetch("/test", { method: "POST", body: formData }) // formData를 받아서 /test에 보냄 그럼 app.py에서 받게 됨.
.then((res) => res.json())
.then((data) => {
console.log(data);
});
POST 요청 확인하기 위해 위 fetch 코드를 index.html 파일 hey() 함수에 붙여넣고 저장 !
보면 { method: "POST", body: formData }
이 부분이 추가된 것을 볼 수 있다. 데이터를 갖고 가야하기 때문에 필요하다고 한다.
formData를 /test로 보내서 app.py 즉 백엔드 부분에서 받게 되면 formData.append("title_give", "블랙팬서");
이게 실려 가니까 title_give를 찾음. title_receive = request.form['title_give']
여기서 title_give를 찾았기 때문에 title_receive = "블랙팬서"
가 되고 print(title_receive)
print됨. 그럼 이제 return문 실행되서 {'result':'success', 'msg': '이 요청은 POST!'}
이 내용이 console.log(data);
여기 data에 담기게 됨.
다 저장하고 새로고침 - 버튼 클릭하고 inspect 하면 post방식으로 콘솔창에 입력되고, 블랙팬서 데이터가 터미널에 잘 출력된 것을 확인할 수 있다.
이렇게 기초적인 부분을 배웠고, 내일은 프로젝트를 하나 만들어 볼 예정 !