학습 내용 요약
- 서버
- Flask
1) 유형
(1) 로컬 환경
개인 컴퓨터 서버를 만들어서 클라이언트로 요청하면 '클라이언트=서버'가 되는 로컬 개발환경이 된다.
(2) 외부 환경
로컬 환경에서 클라이언트로 요청을 하고 외부 서버에서 데이터를 받아오는 방식이 이번에 구현하려는 외부 개발환경이 된다.
1) Flask란?
프레임워크의 일종으로 서버를 구동시키는 복잡한 작업을 쉽게 할 수 있도록 만들어진 코드 모음이다. 즉, 간편하게 서버를 구동할 수 있는 코드 모음이다.
2) 기본 세팅
(1) 서버 만들기
우선 flask 패키지를 설치한다. 그리고 app.py를 만들어 아래의 코드를 작성한다. (※ 통상적으로 flask 서버 작동 파일은 app.py로 쓴다고 한다.)
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)
실행시킨 후 브라우저 주소에 'localhost:포트번호' 이렇게 치면 페이지를 볼 수 있다.
url을 나눠볼 수도 있다. '@app.route('/')' 이 부분을 수정하면 가능하다. 단, 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 서버를 만들 때, 기본 폴더구조가 있다. 항상 아래와 같이 세팅하고 시작하도록 하자!
project 폴더
└ㅡ static 폴더 (이미지, css파일을 넣어둠)
└ㅡ templates 폴더 (html파일을 넣어둠)
└ㅡ app.py 파일
여기에 templates 폴더 내에 html파일을 만든다. 그리고 app.py에서 html 파일을 불러올 코드(render_template)를 추가로 작성한다.
from flask import Flask, render_template
app = Flask(__name__)
@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) jQuery 임포트
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
(2) GET 요청 API 코드
@app.route('/test', methods=['GET'])
def 함수명():
변수 = request.args.get('요청 정보 키워드명')
print(변수) -> 선택사항(값 출력해보고 싶다면 작성)
return jsonify({'result':'success', 'msg': '메시지 내용'})
'요청 정보 키워드명'으로 서버에 데이터를 요청하고, 변수에 담는다. 'result'라는 결과 변수에 'success'라는 명으로 클라이언트
(3) GET 요청 확인 Ajax 코드
$.ajax({
type: "GET",
url: "/test?요청 정보 키워드명=요청 정보명",
data: {},
success: function(response){
console.log(response) -> 개발자도구 console에 출력해봄
}
})
test라는 서버에서 '요청 정보 키워드명'으로 '요청 정보명' 데이터를 가져온다. 데이터를 가져오는데 성공하면, response에 결과값을 담는다.
(4) POST 요청 API 코드
@app.route('/test', methods=['POST'])
def 함수명():
변수 = request.form['요청 정보 키워드명']
print(변수) -> 선택사항(값 출력해보고 싶다면 작성)
return jsonify({'result':'success', 'msg': '메시지 내용'})
(5) POST 요청 확인 Ajax 코드
$.ajax({
type: "POST",
url: "/test",
data: { 요청 정보 키워드명:'요청 정보명' },
success: function(response){
console.log(response) -> 개발자도구 console에 출력해봄
}
})
이렇게 하면 두 가지 타입의 API 요청 및 확인을 할 수 있는 기초가 만들어진다. 앞으로 이를 활용해서 API로 데이터를 요청하고 받아와 화면에 뿌려주는 작업을 반복 연습해보자.
어렵거나 완전히 이해 못한 내용
기본적인 API요청 및 확인 코드의 구조와 흐름은 알겠는데, 요청하고 전달받을 키워드를 적절히 설정하는 것이 헷갈린다. 그리고 요청을 보내고 받아와서 특정 조건을 거친 후, 다시 요청하고 받아오는 복합적인 작업은 아직 못하겠다.
공통적으로 정보 요청 및 수령의 키워드를 잘 이해하지 못한 문제인 듯하다. 강의를 복습하고, 실습을 여러번 하고 다른 자료도 참고하면서 익혀나가야 할 필요가 있다.