- 이 글은 웹개발 종합반 강의를 수강하고 공부한 내용을 정리하는 용도로 작성되었습니다.
- 추가학습이 필요한 부분은 ❓이렇게 표시하고 학습 이후 글을 업로드 합니다.
[💡학습 목표]
1. Flask 프레임워크를 활용해서 API를 만들 수 있다.
2. '화성에 땅사기' API를 만들고 클라이언트에 연결한다.
3. '스파르타피디아' API를 만들고 클라이언트와 연결한다.
Flask
1. 서버 만들기
-
Flask 패키지 설치하고 시작!(File → setting → Python interpreter)
-
Flask ❓프레임워크 : 서버를 구동시켜주는 편한 코드 모음. 서버를 구동할 때 필요한 복잡한 일들을 쉽게 가져다 쓸 수 있다.
-
app.py파일을 만들어 아래 코드를 붙여 넣기👉 파일 이름은 아무렇게나 해도 상관없지만, 통상적으로 flask 서버를 돌리는 파일은 app.py라고 이름 짓는다! -
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) -
이제 크롬에서
http://localhost:5000/으로 접속
❓localhost:5000![]
👉 화면에 This is Home! 라는 메시지가 보이면 성공한 것! -
종료하는 방법
👉 터미널 창을 클릭하고, ctrl + c 을 누르시면 서버를 종료할 수 있다. -
URL 나눠보기
⇒ @app.route('/) 부분을 수정해서 URL을 나눌 수 있다!👉 url 별로 함수명이 같거나, route('/')내의 주소가 같으면 안 된다!from flask import Flask app = Flask(__name__) @app.route('/') def home(): return 'This is Home!' @app.route('/mypage') def mypage(): return 'This is My Page!' if __name__ == '__main__': app.run('0.0.0.0',port=5000,debug=True)
2. HTML 파일 주기
-
기본 폴더구조 - 항상 이렇게 세팅하고 시작!
👉 Flask 서버를 만들 때, 항상, 프로젝트 폴더 안에, ㄴ**static 폴더** (이미지, css파일을 넣어둔다) ㄴ**templates 폴더** (html파일을 넣어둔다) ㄴ**app.py 파일** 이렇게 세 개를 만들어두고 시작! -
HTML 파일 불러오기
1) 간단한 index.html 파일을 templates 안에 만들기
<<!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>2) html 파일 불러오기
👉 flask 내장함수 render_template를 이용한다. 바로 이게 프레임워크의 위력!
from flask import Flask, render_template
app = Flask(__name__)
## URL 별로 함수명이 같거나,
## route('/') 등의 주소가 같으면 안 된다.
@app.route('/')
def home():
return render_template('index.html')
if __name__ == '__main__':
app.run('0.0.0.0', port=5000, debug=True)3. 본격 API 만들기
1) ) 들어가기 전에: GET, POST 요청타입
👉 리마인드!
은행의 창구가 API와 같다는 것을 기억하기!
같은 예금 창구에서도 개인 고객이냐 기업 고객이냐에 따라 처리하는 것이 다른 것처럼,
**클라이언트가 요청 할 때에도, "방식"이 존재한다.**
HTTP 라는 통신 규약을 따르는데, 클라이언트는 요청할 때 HTTP request method(요청 메소드)를 통해, 어떤 요청 종류인지 응답하는 서버 쪽에 정보를 알려준다.👉 GET, POST 방식
여러 방식(링크)이 존재하지만 가장 많이 쓰이는 방식은 GET, POST 방식!
* GET
→ 통상적으로! 데이터 조회(Read)를 요청할 때
예) 영화 목록 조회
→ **데이터 전달** : URL 뒤에 물음표를 붙여 key=value로 전달
→ 예: google.com?q=북극곰
* POST → 통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때
예) 회원가입, 회원탈퇴, 비밀번호 수정
→ **데이터 전달** : 바로 보이지 않는 HTML body에 key:value 형태로 전달2) GET, POST 요청에서 클라이언트의 데이터를 받는 방법
-
예를 들어, 클라이언트에서 서버에 title_give란 키 값으로 데이터를 들고 왔다고 생각하자. (주민등록번호라는 키 값으로 900120- .. 을 가져온 것과 같은 의미)
-
클라이언트 기본 코드 (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Jqeury 임포트 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@400;700&display=swap" rel="stylesheet">
<title>선착순 공동구매</title>
<style>
* {
font-family: 'Gowun Batang', serif;
color: white;
}
body {
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://cdn.aitimes.com/news/photo/202010/132592_129694_3139.jpg');
background-position: center;
background-size: cover;
}
</style>
<script>
$(document).ready(function () {
show_order();
});
<!-- GET 요청 확인 Ajax 코드 -->
function show_order() {
$.ajax({
type: 'GET',
url: '/mars',
data: {},
success: function (response) {
alert(response['msg'])
}
});
}
<!-- POST 요청 확인 Ajax 코드 -->
function save_order() {
$.ajax({
type: 'POST',
url: '/mars',
data: { sample_give:'데이터전송' },
success: function (response) {
alert(response['msg'])
}
});
}
</script>
</head>
<body>
</body>
</html>- 서버 기본 코드 (app.py)
<from flask import Flask, render_template, request, jsonify
app = Flask(__name__)
@app.route('/')
def home():
return render_template('index.html')
# POST 요청 API코드
@app.route("/mars", methods=["POST"])
def web_mars_post():
sample_receive = request.form['sample_give']
print(sample_receive)
return jsonify({'msg': 'POST 연결 완료!'})
# GET 요청 API코드
@app.route("/mars", methods=["GET"])
def web_mars_get():
return jsonify({'msg': 'GET 연결 완료!'})
if __name__ == '__main__':
app.run('0.0.0.0', port=5000, debug=True)
정성과 진심을 담아 흔적을 기록하자💡