개발하고자 하는 프로젝트의 서버를 실행하고 웹브라우저로 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)
Python
복사
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')
Python
복사
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'])
})
}
JavaScript
복사
app.py
# fetch('URL')부분, 반환값은 res로 전달.# "localhost:5001/mars" URL GET방식 요청에 응답@app.route("/mars", methods=["GET"])
def mars_get():
return jsonify({'msg':'GET 연결 완료!'})
Ruby
복사
서버 실행 후 "localhost:5001/"로 접속하면
알림창으로 "GET 연결 완료!"가 나타난다.
console.log(data)로 브라우저 콘솔에서도 data인 {msg: 'GET 연결 완료!'} 객체를 확인 할 수 있다.
흐름을 파악하기 위해
fetch()와 연속된 .then()절, jsonify(), res.json(), Promise에 대한 이해가 필요했다.
이해에 참고된 자료들
•
공부한 용어, 명칭 들을 카테고리를 분류해서 저장해야겠다. 너무 많아서 정리가 안되고 잊어버렸을때 찾기 편하게 나만의 사전처럼 만들어봐야겠다.
fetch()와 연속된 .then()절
형태
jsonify()
사용자가 json data를 내보내도록 제공하는 flask의 함수. jsonify()는 json response를 보내기 위해 이미 content-type header가 'application/json'로 되어 있는 flask.Response() 객체를 리턴한다.
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…
Promise
Promise는 프로미스가 생성된 시점에는 알려지지 않았을 수도 있는 값을 위한 대리자로, 비동기 연산이 종료된 이후에 결과 값과 실패 사유를 처리하기 위한 처리기를 연결할 수 있습니다. 프로미스를 사용하면 비동기 메서드에서 마치 동기 메서드처럼 값을 반환할 수 있습니다. 다만 최종 결과를 반환하는 것이 아니고, 미래의 어떤 시점에 결과를 제공하겠다는 '약속'(프로미스)을 반환합니다.