[Flask] Flask framework 미니프로젝트(project mars) 04 (Backend 기초 테스트 GET 요청 및 응답)

개발하고자 하는 프로젝트의 서버를 실행하고 웹브라우저로 URL에 접근 했을 때,

View 페이지 로드"(document).ready()" 및 이벤트"onclick()"에서 JavaScript 요청에 대한 테스트용 메시지 알림창 생성을 확인해야 한다. Frontend와 병합하여 1차 테스트를 진행

0. 서버 실행을 위한 라이브러리 임포트와 서버 실행 포트 설정

• Flask Framework 라이브러리
• request 모듈
• jsonify 라이브러리
• port=5001(Mac이라 포트충돌 방지)

# 라이브러리 임포트
# Flask Framework
# view페이지 렌더링을 위한 render_template 메서드
# 요청 데이터에 접근 할 수 있는 flask.request 모듈
# dictionary를 json형식의 응답 데이터를 내보낼 수 있는 jsonify 메서드
from flask import Flask, render_template, request, jsonify
app = Flask(__name__)

...

# app이라는 메인 함수 
# if __name__ == "__main__" 의 의미는 메인 함수의 선언, 시작을 의미
# 이 파이썬 스크립트가 직접 실행될 때에는 main() 함수를 실행하라
if __name__ == '__main__':
    app.run('0.0.0.0', port=5001, debug=True)

1. 서버 시작 및 브라우저로 URL 입력하여 메인 View 페이지 요청

• 서버 실행 후 브라우저를 통해 "localhost:5001/" URL을 요청하면
• 백엔드 app.py에서 '/'에 대한 요청으로 연결되며
• home()이 실행되고
• 내부의 render_template()를 통해 "mars/template/index.htm"에 위치한 View 페이지를 반환

# "localhost:5001/" URL요청에 메인 뷰 페이지 반환 응답
@app.route('/')
def home():
    return render_template('index.html')

 

2. View 페이지 로딩 이후(직후 즉시) 

위 View 페이지 클라이언트에서 Frontend로부터 Backend 간의 요청 및 응답, 데이터 변환과 이동 흐름을 스스로 "한줄씩" script.js파일과 app.py 파일을 왔다갔다하며 읽어내고 모르는 부분, 이해가 안되는 부분들을 찾아보았다.

 

• 위 요청으로 View 페이지가 반환(load)되면
• JavaScript의 (document).ready() 가 직후에 즉시 실행 됨
• 이후 내부 show_order() 함수 실행
• show_order()내부 fetch()를 통해 '/mars' URL에 대한 GET 방식 요청
• app.py에서 '/mars' URL의 GET 방식 요청에 대한 메서드로 접근
• 이는 mars_get()라 선언된 함수를 실행하는데 (현재는 특별한 함수 없음)
• 연결 테스트용으로 {'msg' : 'GET 연결 완료!'} 라 하드코딩된 key, value는
• jsonify()에 의해 json 형식의 데이터로 변환(주어진 값과 대응하는 JSON 문자열) 후 반환하고
• 반환 데이터는 첫번째 then()절의 res 인자값으로 들어감
• JavaScript로 다시 돌아와서 첫번째 then()으로 들어간 res는 *response.json()에 의해 Promise 객체로 변환
• 해당 객체 데이터는 data라는 변수에 담기고
• alert를 통해 key msg의 value인 'GET 연결 완료!'가 출력됨. 

JavaScript

// [Read]
$(document).ready(function () {
    show_order();
});
function show_order() {
    fetch('/mars').then((res) => res.json()).then((data) => {
        console.log(data)
        alert(data['msg'])
    })
}

app.py

# fetch('URL')부분, 반환값은 res로 전달.
# "localhost:5001/mars" URL GET방식 요청에 응답
@app.route("/mars", methods=["GET"])
def mars_get():
    return jsonify({'msg':'GET 연결 완료!'})

서버 실행 후 "localhost:5001/"로 접속하면

알림창으로 "GET 연결 완료!"가 나타난다.

console.log(data)로 브라우저 콘솔에서도 data인 {msg: 'GET 연결 완료!'} 객체를 확인 할 수 있다.

---

흐름을 파악하기 위해

fetch()와 연속된 .then()절,  jsonify(), res.json(), Promise에 대한 이해가 필요했다.

이해에 참고된 자료들

*공부한 용어, 명칭 들을 카테고리를 분류해서 저장해야겠다. 너무 많아서 정리가 안되고 잊어버렸을때 찾기 편하게 나만의 사전처럼 만들어봐야겠다.

fetch()와 연속된 .then()절 정의 서버 통신(fetch())에 대한 응답(response)객체를 반환 형태 fetch() .then( respose => {콜백 함수1} ) .then( respose => {콜백 함수2} ) fetch의 대한 결과를 response인자에 보낸다. 콜백함수를 통해 결과를 다시 return 한다. then()를 여러번 사용할 수 있으며, 인자 값은 전 함수의 결과를 의미한다. https://velog.io/@sdc337dc/javascript-%EB%B9%84%EB%8F%99%EA%B8%B0-%ED%86%B5%EC%8B%A0-fetch https://velog.io/@janeshin059/JavaScript-Callback-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-Callback-%EC%A7%80%EC%98%A5%EC%9D%B4%EB%9E%80

jsonify() 사용자가 json data를 내보내도록 제공하는 flask의 함수. jsonify()는 json response를 보내기 위해 이미 content-type header가 'application/json'로 되어 있는 flask.Response() 객체를 리턴한다. https://velog.io/@matisse/flask-jsonify-%EC%99%80-json.dumps%EC%9D%98-%EC%B0%A8%EC%9D%B4

res.json() Response: json() method  (*The json() method of the Body mixin takes a Response stream and reads it to completion. It returns a promise that resolves with the result of parsing the body text as JSON. == Response stream을 가지고와서(take) 끝날때 까지 읽는다(read it to completion). body text를 JSON형태로 파싱(parsing)한 resolve값인 Promise 를 리턴한다.) Return value A Promise that resolves to a JavaScript object. This object could be anything that can be represented by JSON — an object, an array, a string, a number… https://developer.mozilla.org/en-US/docs/Web/API/Response/json https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

Promise Promise는 프로미스가 생성된 시점에는 알려지지 않았을 수도 있는 값을 위한 대리자로, 비동기 연산이 종료된 이후에 결과 값과 실패 사유를 처리하기 위한 처리기를 연결할 수 있습니다. 프로미스를 사용하면 비동기 메서드에서 마치 동기 메서드처럼 값을 반환할 수 있습니다. 다만 최종 결과를 반환하는 것이 아니고, 미래의 어떤 시점에 결과를 제공하겠다는 '약속'(프로미스)을 반환합니다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise

 

 

---

해당 프로젝트는 아래 깃을 통해 업데이트 되고 있습니다.

https://github.com/yzpocket/Flask_project_mars

GitHub - yzpocket/Flask_project_mars: [Flask] Flask framework 미니프로젝트(project mars)