개발하고자 하는 프로젝트의 서버를 실행하고 웹브라우저로 URL에 접근 했을 때,
View 페이지 로드"(document).ready()" 및 이벤트"onclick()"에서 JavaScript 요청에 대한 테스트용 메시지 알림창 생성을 확인해야 한다. Frontend와 병합하여 1차 테스트를 진행
해당 백엔드 요청 응답 흐름은 이전 프로젝트인 project mars와 유사하다.
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)
Python
복사
1. 서버 시작 및 브라우저로 URL 입력하여 메인 View 페이지 요청
•
서버 실행 후 브라우저를 통해 "localhost:5001/" URL을 요청하면
•
백엔드 app.py에서 '/'에 대한 요청으로 연결되며
•
home()이 실행되고
•
내부의 render_template()를 통해 "fan/template/index.htm"에 위치한 View 페이지를 반환
# "localhost:5001/" URL요청에 메인 뷰 페이지 반환 응답@app.route('/')
def home():
return render_template('index.html')
Ruby
복사
2. View 페이지 로딩 이후(직후 즉시)
View 페이지 클라이언트에서 웹 페이지가 로드되면 다음과 같이 데이터 변환과 이동 흐름이 진행된다.
•
위 요청으로 View 페이지가 반환(load)되면
•
JavaScript의 (document).ready() 가 직후에 즉시 실행 됨
•
이후 내부 show_comment() 함수 실행 (응원 댓글 리스트 용도)
◦
show_comment()내부 fetch()를 통해 '/guestbook' URL에 대한 GET 방식 요청
◦
app.py에서 '/guestbook' URL의 GET 방식 요청에 대한 메서드로 접근
◦
이는 guestbook_get()라 선언된 함수를 실행하는데 (현재는 특별한 함수 없음)
◦
연결 테스트용으로 {'msg' : 'GET 연결 완료!'} 라 하드코딩된 key, value는
◦
jsonify()에 의해 json 형식의 데이터로 변환(주어진 값과 대응하는 JSON 문자열) 후 반환하고
◦
반환 데이터는 첫번째 then()절의 res 인자값으로 들어감
◦
JavaScript로 다시 돌아와서 첫번째 then()으로 들어간 res는 *response.json()에 의해 Promise 객체로 변환
◦
해당 객체 데이터는 data라는 변수에 담기고
◦
alert를 통해 key msg의 value인 'GET 연결 완료!'가 출력됨.
•
동시에 show_ranking() 함수 실행 (순위 데이터 용도)
◦
show_ranking()내부 fetch()를 통해 '/ranking' URL에 대한 GET 방식 요청
◦
app.py에서 '/ranking' URL의 GET 방식 요청에 대한 메서드로 접근
◦
이하 위 show_comment()와 흐름 동일
•
동시에 show_temp() 함수 실행 (서울시 실시간 날씨 OpenAPI 용도)
◦
show_temp()내부 fetch()를 통해 '서울시 날씨 정보 OpenAPI' URL에 대한 GET 방식 요청
•
동시에 show_date() 함수 실행 (날짜 표기 용도)
◦
document.getElementById("date")로 HTML의 id가 date인 부분 객체 생성
◦
show_date() 내부에 Date() 객체 생성
▪
Date 객체 내 .getFullYear()로 연도를 year 변수에 담기
▪
Date 객체 내 .getMonth()로 월를 month 변수에 담기
▪
Date 객체 내 .getDate()로 일를 date 변수에 담기
▪
Date 객체 내 .getDay()로 요일를 day 변수에 담기
◦
.innerText로 HTML 소스에 텍스트 양식에 맞춰서 시간 표시
JavaScript
$(document).ready(function () {
set_temp();
show_comment();
show_ranking();
show_date();
});
// [Create]
function save_comment() {
let formData = new FormData();
formData.append("sample_give", "샘플데이터");
fetch('/guestbook', { method: "POST", body: formData }).then((res) => res.json()).then((data) => {
//console.log(data)
alert(data["msg"]);
});
}
// [Comment Read]
function show_comment() {
fetch('/guestbook').then((res) => res.json()).then((data) => {
console.log(data)
alert(data["msg"])
})
}
// [Temp Read]
function set_temp() {
fetch("http://spartacodingclub.shop/sparta_api/weather/seoul").then((res) => res.json()).then((data) => {
console.log(data)
});
}
// [Ranking Read]
function show_ranking() {
fetch('/ranking').then((res) => res.json()).then((data) => {
console.log(data)
alert(data["msg"])
})
}
// [Date Read]
function show_date() {
let Target = document.getElementById("date");
let time = new Date();
let year = time.getFullYear();
let month = time.getMonth();
let date = time.getDate();
let day = time.getDay();
let week = ['일', '월', '화', '수', '목', '금', '토'];
// let hours = time.getHours();
// let minutes = time.getMinutes();
// let seconds = time.getSeconds();
Target.innerText =
`${year}년 ${month + 1}월 ${date}일 ${week[day]}요일 `;
// `${hours < 10 ? `0${hours}` : hours}:${minutes < 10 ? `0${minutes}` : minutes}:${seconds < 10 ? `0${seconds}` : seconds}`;
}
Python
복사
app.py
# fetch('URL')부분, 반환값은 res로 전달.# "localhost:5001/guestbook" URL GET방식 요청에 응답@app.route("/guestbook", methods=["GET"])
def guestbook_get():
return jsonify({'msg': 'GET 연결 완료!'})
Python
복사
# fetch('URL')부분, 반환값은 res로 전달.# "localhost:5001/ranking" URL GET방식 요청에 응답@app.route("/ranking", methods=["GET"])
def ranking_get():
return jsonify({'msg': 'GET 연결 완료!'})
Python
복사
서버 실행 후 "localhost:5001/"로 접속하면
알림창으로 "GET 연결 완료!"가 나타난다.
console.log(data)로 브라우저 콘솔에서도 data인 {msg: 'GET 연결 완료!'} 객체를 확인 할 수 있다.
