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

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

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

해당 백엔드 요청 응답 흐름은 이전 프로젝트인 project mars와 유사하다.

https://ohnyong.tistory.com/56

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

fetch()와 연속된 .then()절,  jsonify(), res.json(), Promise에 대한 이해는 위 project mars에서 정리되었다.

 

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()를 통해 "pedia/template/index.htm"에 위치한 View 페이지를 반환

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

 

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

View 페이지 클라이언트에서 웹 페이지가 로드되면 다음과 같이 데이터 변환과 이동 흐름이 진행된다.

 

• 위 요청으로 View 페이지가 반환(load)되면
• JavaScript의 (document).ready() 가 직후에 즉시 실행 됨
• 이후 내부 listing() 함수 실행
• listing()내부 fetch()를 통해 '/movie' URL에 대한 GET 방식 요청
• app.py에서 '/movie' URL의 GET 방식 요청에 대한 메서드로 접근
• 이는 movie_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 () {
    listing();
});

function listing() {
    fetch('/movie').then((res) => res.json()).then((data) => {
        console.log(data)
        alert(data['msg'])
    })
}

app.py

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

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

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

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

---

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

https://github.com/yzpocket/Flask_project_pedia

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