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

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

https://ohnyong.tistory.com/57

1. 클라이언트와 서버 연결 확인하기(테스트용)

GET 방식과 비슷하지만

요청 할 때 body를 추가하여 요청하는 부분이 다르다.

body를 request.form으로 받게되는 부분이 추가된다.

 

 

• 어떤 이벤트에 함수를 연결 할 지 확인
• "기록하기" button의 onclick 이벤트로 JavaScript의 save_bucket() 함수 호출
• JavaScript의 save_bucket()라는 함수 실행
• formData라는 객체를 생성
• {'sample_give':'샘플데이터'}라는 Dictionary 형식 데이터를 .append()를 통해  formData에 담기
• posting()내부 fetch()를 통해 '/bucket' URL에 대한 POST 방식 요청 (+ 위 formData 객체를 body로 추가하여 요청함)
• app.py에서 '/bucket' URL의 POST 방식 요청에 대한 메서드로 접근
• 이는 bucket_post()라 선언된 함수를 실행하는데 
• request.form을 통해 ['key']에 해당되는 value를 가져오고 "sample_receive"라는 변수에 담는다.
• print로 "sample_receive"에 담긴 값 (= value)를 출력하면 python console에  '샘플데이터'를 출력
• 이후, 연결 테스트용으로 {'msg' : 'POST 연결 완료!'} 라 하드코딩된 key, value가
• jsonify()에 의해 json 형식의 데이터로 변환(주어진 값과 대응하는 JSON 문자열) 후 반환하고
• 반환 데이터는 첫번째 then()절의 res 인자값으로 들어감
• JavaScript로 다시 돌아와서 첫번째 then()으로 들어간 res는 *response.json()에 의해 Promise 객체로 변환
• 해당 객체 데이터는 data라는 변수에 담기고
• alert를 통해 key msg의 value인 'POST 연결 완료!'가 출력됨. 

JavaScript

// [Create]
function save_bucket() {
    let formData = new FormData();
    formData.append("sample_give", "샘플데이터");

    fetch('/bucket', { method: "POST", body: formData, }).then((response) => response.json()).then((data) => {
        alert(data["msg"]);
        window.location.reload();
    });
}

app.py

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

'기록하기' 버튼을 누르면

Dictionary 데이터가 담긴 formData 객체가 POST 요청에 body로 담겨진 후

request.form에서 key로 value를 뽑아낸 데이터가 print(sample_receive)로 출력 되는 것을 확인 할 수 있다.

이후 jsonify로 {'msg':'POST 연결 완료!'}라는 Dictionary 데이터가 json으로 반환되고

json->res->promise(res.json)->data로 변환되며 브라우저 콘솔과 알림창에 'POST 연결 완료'가 출력되는 모습이다. 

---

프론트에서 해당 url에 대한 POST 요청에 body를 함께 전송하는데

app.py에서 request.form['key']로 데이터를 열게 되는데, request.formData처럼 객체명을 기입하는 것이 아니라. request.form이라는 메서드 자체가 body를 가져온다. formData라는 객체는 클라이언트에서 이미 body에 실린 상태로 백엔드로 도착했기 때문에 여기선 객체명과 무관하다는 뜻으로 보여진다. 햇갈림 주의.

fetch()의 body fetch('/mars', { method: "POST", body: formData }) body는 요청에 추가하고자 하는 본문입니다. Blob, ArrayBuffer, TypedArray, DataView, FormData, URLSearchParams, 문자열 객체 또는 리터럴, ReadableStream 객체를 사용할 수 있습니다. 제일 마지막은 아직 실험적 기능이므로 호환성 정보를 먼저 확인해서 사용할 수 있을지 검증하세요. GET과 HEAD 메서드는 본문을 가질 수 없습니다. https://developer.mozilla.org/ko/docs/Web/API/fetch

---

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