저번시간에는 Python
의 VENV(일종의 공구함🔨)
을 통해 API
를 가져오고 MongoDB
를 사용하여 CRUD
를 실습해보았다.
이번시간에는 Server
를 구축하고 Client
에서 요청하면 Server
에서 해당 값을 보내주는 과정을 해보자.
일종의 서버규약(Back-End API)
을 만드는것이다.
간단하게 표현하면 다음과 같다.
Server : Flask, mongoDB(Robo 3T)
Request, Response : CRUD, API(AJAX), JSON형식
Client : Chrome 창(HTML, CSS, Javascript)
Python
기반 백엔드(Back-End)
구축은 보통 2가지 방법이 있다.
1. Django (현업에서 많이 사용)
2. Flask (난이도가 쉬움)
이번 실습의 Server
는 난이도가 쉬운 Flask
로 선정하였다.
1대의 노트북으로 Server
, Client
역할을 수행 할 수 있다.
우리가 사용하는 API
는 하단의 내용들을 미리 약속하고 그대로 동작한다.
1. 요청정보 : 요청 URL, 요청 방식 (GET, POST)
2. 서버 제공 기능 : Read, Create, Update, Delete
3. 응답 데이터 : 어떤 key로 어떤 데이터를 주는지
디버깅(Debugging)
이란 무엇일까?
➡️ 디버깅
은 버그를 찾아내어 고치는 과정이다.
소프트웨어가 오작동하거나 예상치 못한 결과를 내고, 오류가 발생할때 찾는 과정이라 생각하면 된다.
디버깅(Debugging)
의 일반적인 과정은 다음과 같다.
1. 잠시 시간을 두고 생각하기.
2. 에러 메시지를 읽어보기.
3. 출력해서 디버깅, 디버그하기
* 디버깅: 데이터가 변경될때마다 해당 값을 출력해보는것.
* 디버거: 어느 부분에서 버그가 발생했는지 쉽게 파악하기 위한 도구.
4. 커뮤니티에 질문하기(Github 등등)
pycharm Debug 튜토리얼
이다. 영상을 참고하면 도움이 된다.)실습에 필요한 패키지는 Flask
,pymongo
이다.
먼저, flask
서버를 실행할 app.py
의 파일을 만들자.
다음의 flask
기본코드를 작성하면 해당 결과를 얻을 수 있다.
from flask import Flask
app = Flask(__name__)
# @app.route('/')으로 경로 설정이 가능하다.
@app.route('/')
def hello_world():
return 'Hello World!'
if __name__ == '__main__':
다음코드를 추가하자.
flask
의 경로를 설정하면 다른 page
에도 접근 가능하다.
주의 할 점은 http://0.0.0.0:5000/
뒤에 /mypage
를 붙여줘야 한다.
@app.route('/mypage')
def my_page():
return '/mypage 경로에 있는 mypage입니다.'
그리고 client
가 될 .html
파일을 하나 만들자.
flask
의 내장함수인 render_template
를 이용하면 html
파일을 불러 올 수 있다.
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/home')
def home():
# index.html 파일을 불러온다.
return render_template('index.html')
@app.route('/mypage')
def my_page():
return '/mypage 경로에 있는 mypage입니다.'
if __name__ == '__main__':
app.run('0.0.0.0', port=5000, debug=True)
경로를 /home
로 변경하면 아래와 같은 결과가 나오는데
주의할 점은 flask
를 통해 경로를 입력해야한다.
pycharm
내부의 chrome
버튼을 누르면 나오지 않는다.
이제 Flask
의 API
를 만들어보자.
GET
방식과 POST
방식을 이용하겠다.
- GET: 데이터 조회(Read)를 요청 할 때 사용한다
* 목록 조회
* URL 뒤에 물음표(?)를 붙여 key를 전달한다.
- POST: 데이터 생성(Create), 변경(Update), 삭제(Delete) 사용하며
* 회원정보수정
* HTML body에 데이터 전달한다.
GET
request.args.get(' ')
1. 요청 URL = /test, 요청 방식 = GET
* 요청데이터: 없음
이제 클라이언트(@app.route('/'
)에서 GET
방식의 aJax
요청을 보내면 서버Flask
가 어떤 값을 보내주는지 출력하는 코드를 작성해보자.
해당코드를 Flask
에 추가하자.
def test_get():
# client에서 GET요청을 하면 'title'이란 변수로 저장한다.
# 'title_give'는 백엔드에서 약속한다.
title = request.args.get('title_give')
print(title)
return jsonify({
'result': 'success',
'msg': 'GET방식의 요청입니다.'
})
이제 Client
에서 요청을 보내보자.
aJax
코드가 있는 index.html
에서 요청 할 수 있다.
F12
콘솔창에서 해당 값을 작성하자.
$.ajax({
type: "GET",
// get방식에 '?'붙여 'key'를 전달한다.
// flask에서 변수를 'title_give'로 정했기 때문에 약속을 따랐다.
url: "/get?title_give= 광해: 왕이 된 남자",
data: {},
success: function(response){
console.log(response)
}
})
➡️ 결과 : {msg: "GET방식의 요청입니다.", result: "success"}
이렇게 Client(index.html)
에서 요청하면 Server(Flask)
에서는 다음과 같은 화면이 출력된다.
이렇게 Server
와 Client
가 정상적으로 통신이 된 것을 확인 할 수 있다.
POST
request.form[' ']
1. 요청 URL = /test, 요청 방식 = POST
* 요청데이터: 없음
이제 클라이언트(@app.route('/'
)에서 POST
방식의 aJax
요청은Server
에서 어떻게 받는지 확인해보자.
해당코드를 Flask
에 추가하자.
@app.route('/get', methods= ['POST'])
def test_post():
title = request.form['title_give']
print(title)
return jsonify({
'result': 'success',
'msg': 'POST 요청입니다.'
})
서버 구동 후 @app.route('/get')
경로로 들어가면 GET요청입니다.
JSON
만 보일 것이다. POST
는 수정하는 방식이기 때문이다.
다음으로 ajax
통신이 가능한 http://0.0.0.0:5000/
경로에서 post
요청을 보내보자.
$.ajax({
type: "POST",
url: "/get ",
data: {title_give: '겨울왕국'},
success: function(response){
console.log(response)
}
})
➡️ 결과 {msg: "POST요청입니다.", result: "success"}
이런결과를 얻을 수 있는데 , flask
서버에서는 다음과 같은 결과가 나온다.
ajax
요청을 보낼 때 GET
방식과 POST
방식의 문법은 다르다.
문법의 차이점을 알고 요청한다면 오류가 나지 않는다.
(이것때문에 30분 고생했다.)
// GET 요청, URL 뒤에 ?(key) 뒤에 변수작성
$.ajax({
type: "GET",
url: "/get?title_give= 겨울왕국 ",
data: {},
success: function(response){
console.log(response)
}
})
// POST 요청, data 뒤에 변수작성
$.ajax({
type: "POST",
url: "/get",
data: {title_give: '겨울왕국' },
success: function(response){
console.log(response)
}
})
지금까지 Flask
서버를 이용하여 API
를 만들고,
GET
방식과 POST
방식을 사용하여 Client
에서 Sever
단으로 요청을 보내보는 실험도 해봤다.
한 컴퓨터로 실험하니까 발열이 심해졌다.
(맥북아 미안해)
오늘 배운 과정으로 몇 가지 [예제풀이] 시간을 가지면서
더 복습해야겠다.