Python에서 Flask를 사용하여 서버를 만들어보자!

Flask 라는 프레임워크를 사용하여 서버를 만들어 보자.

1. 원하는 폴더로 이동해 app.py 생성

2. 터미널 > 새터미널

3. 가상환경을 잡는다.

$ python -m venv venv

 

4.venv 폴더가 확인되면 우측 아래 인터프리터 선택 또는 python.3.8.2...이런식으로 버전 나오는 부분을 클릭하여 중앙 상단에서 venv를 선택한 후 터미널을 끄고 새 터미널 만들기 눌러준다.

 

5. 간단하게 나의 웹서비스 완성!

pip install 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)

차례로 삽입했다.

 

(만약 오류가 난다면 ctrl c로 터미널창을 빠져나와서 위 포트를 5001로 변경해준다. 

주소는 localhost:5001 이 되는 것이다.)

 

검색창에  localhost:5000 을 입력하면 내 컴퓨터에서 나의 인터넷 망 안에서만 보이는 서비스를 만들었다.

 

 

그렇다면 프론트 html과 백엔드 py를 연결해주는 방법은?

프레임워크가 정해둔 규칙대로 한다.

 

venv 가상환경 폴더 안에 app.py와

templates 폴더 안에 index.html

 

본격 연결하는 방법!

1. app.py 플라스크 옆에 ,render_template 추가하기. (flask의 render_template 기능을 사용하겠습니다.)

from flask import Flask, render_template
app = Flask(__name__)

 

2. route return을 render_template('templates 폴더 안에 있는 html 이름을 입력') 변경.

@app.route('/')
def mypage():
   return render_template('index.html')

 

만들어놓은 html을 flask라는 백엔드가 /창구이름 에 따라서 나에게 가져다준다.

넣고나면 잘 넣었다고 확인을 해준다. > 잘 넣어졌습니다! 확인문구를 띄울 수 있다.

 

 

Flask로 API 만들기

방식	GET	POST
설명	?key=value (url 형태) 브라우저에 칠 수 있는 형태	컴퓨터끼리 알아듣는 방식으로 데이터가 왔다갔다 한다.
쓰임	데이터 조회 읽기 (Read)	데이터 조작 생성 (create) 변경 (update) 삭제 (delete)

 

1. GET 요청 API 기본 코드

@app.route('/test', methods=['GET'])
def test_get():
   title_receive = request.args.get('title_give')
   print(title_receive)
   return jsonify({'result':'success', 'msg': '이 요청은 GET!'})

 

API를 만들고 사용하는 과정에서 필요한 2가지 Flask 의 request와 jsonify 를 추가한다.

request, jsonify 를 최상단에 있던

from flask import Flask, render_template
app = Flask(__name__)

코드에 추가해준다.

from flask import Flask, render_template, request, jsonify
app = Flask(__name__)

 

이 써주신 코드를 말로 해석해 보자면 아래와 같다.

@app.route('/test', methods=['GET'])
# /test 라고 하는 창구에 get요청으로 들어온다.

def test_get():
	# 이 때 만약 title_give 라는 데이터가 있다면 가져와서
   title_receive = request.args.get('title_give')
   # title_receive 라는 변수에 넣고 
   print(title_receive)
   # title_receive 를 프린트 해보자. 
  
   return jsonify({'result':'success', 'msg': '이 요청은 GET!'})
   # 백엔드에서 프론트엔드로 데이터를 전달한 결과, 'result':'success'와
   # 'msg':'이 요청은 GET!' 이라고 내려준다.

 

html 에서는 위 코드를 이렇게 받는다.

 function hey() {
            fetch("/test").then(res => res.json()).then(data => {
                console.log(data)
            })
        }

 

2. POST 요청 API  기본 코드

@app.route('/test', methods=['POST'])
def test_post():
   title_receive = request.form['title_give']
   print(title_receive)
   return jsonify({'result':'success', 'msg': '이 요청은 POST!'})

function hey() {
            let formData = new FormData();
            formData.append("title_give", "블랙팬서");

            fetch("/test", { method: "POST", body: formData }).then(res => res.json()).then(data => {
                console.log(data)
            })
        }

 

* 하다가 안나올 때는 터미널에서 python실행 한번 더 해주고 새로고침 해본다.

 

front  >> fetch >> back  >> front정보 확인 >> return >> fetch의 결과로 전송됨