[Python + Flask] 스파르타 코딩 4주 차 6번째 수업

안영우·2020년 10월 20일
0
post-thumbnail

✏️ 서론

저번시간에는 PythonVENV(일종의 공구함🔨) 을 통해 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로 어떤 데이터를 주는지

🍯 [Tips]

디버깅(Debugging) 이란 무엇일까?
➡️ 디버깅은 버그를 찾아내어 고치는 과정이다.
소프트웨어가 오작동하거나 예상치 못한 결과를 내고, 오류가 발생할때 찾는 과정이라 생각하면 된다.

디버깅(Debugging)의 일반적인 과정은 다음과 같다.

1. 잠시 시간을 두고 생각하기.
2. 에러 메시지를 읽어보기.
3. 출력해서 디버깅, 디버그하기
  * 디버깅: 데이터가 변경될때마다 해당 값을 출력해보는것.
  * 디버거: 어느 부분에서 버그가 발생했는지 쉽게 파악하기 위한 도구.
4. 커뮤니티에 질문하기(Github 등등)

✏️ 본론

실습에 필요한 패키지는 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버튼을 누르면 나오지 않는다.

이제 FlaskAPI를 만들어보자.
GET방식과 POST방식을 이용하겠다.

- GET: 데이터 조회(Read)를 요청 할 때 사용한다
  * 목록 조회 
  * URL 뒤에 물음표(?)를 붙여 key를 전달한다.
  
- POST: 데이터 생성(Create), 변경(Update), 삭제(Delete) 사용하며
  * 회원정보수정
  * HTML body에 데이터 전달한다.

1. 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)에서는 다음과 같은 화면이 출력된다.

이렇게 ServerClient가 정상적으로 통신이 된 것을 확인 할 수 있다.

2. 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서버에서는 다음과 같은 결과가 나온다.


🍯 [Tips]

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단으로 요청을 보내보는 실험도 해봤다.
한 컴퓨터로 실험하니까 발열이 심해졌다.
(맥북아 미안해)

오늘 배운 과정으로 몇 가지 [예제풀이] 시간을 가지면서
더 복습해야겠다.

profile
YW_Tech

0개의 댓글