Flask
Flask 시작하기 - 서버 만들기 (1)
⭐projects 폴더 내에 prac 폴더 만들고 시작 !
Flask는 만드는 프로젝트의 폴더 구조가 정해져 있기 때문에 규칙 꼭 지키기 !
prac 폴더 구조
prac
|— venv
|— app.py (서버)
|— templates
|— index.html (클라이언트 파일)
app.py파일,templates폴더 생성- templates 폴더 안에
index.html파일 생성 - app.py 파일 열고
venv생성하기 Terminal > New Terminal클릭- 터미널에
python -m venv venv입력하고 엔터 - 오른쪽 하단에 파이썬 버전 클릭하고 화면 상단에 venv 쓰여있는 파이썬 버전 클릭
- 터미널 닫고 새 터미널 열어주기. 터미널에
(venv)라고 뜨면 가상환경 활성화 완료 !
Flask 시작하기 - 서버 만들기 (2)
⭐가상환경에 Flask 라이브러리 설치 !
- 터미널에
pip install flask입력하고 엔터
아래 사진처럼 Successfully installed 가 나오면 설치 완료 !
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 시작하기 - HTML 파일 주기
⭐ 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에서 작성했던 버튼이 보이는 것을 확인할 수 있다 😎
Flask 시작하기 - API 만들기
GET,POST방식
1) GET 요청
- 통상적으로 데이터 조회(Read)를 요청할 때 사용
ex) 영화 목록 조회
데이터 전달 : URL 뒤에 ? 붙여서 key=value로 전달
https:// movie.naver.com/movie/bi/mi/basic.naver?code=74977
2)POST 요청
- 통상적으로 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때 사용
ex) 회원가입, 회원탈퇴, 비밀번호 수정
데이터 전달 : 눈에 보이지는 않음. 컴퓨터끼리 알아들을 수 있게 코드 작성
먼저 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)- app.py 코드에서 mypage 부분 지우기
def home():에서 index.html 파일을 불러오도록 수정- import에
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방식으로 콘솔창에 입력되고, 블랙팬서 데이터가 터미널에 잘 출력된 것을 확인할 수 있다.
이렇게 기초적인 부분을 배웠고, 내일은 프로젝트를 하나 만들어 볼 예정 !
