<TIL> / [코린이] 백엔드에서 프론트엔드, 클라이언트에서 서버로 그 흐름에 대해서

[코린이]

이 글은 이제 막 개발의 문을 두드리기 시작한 [코린이]가 작성한 글입니다.

본인의 머릿속에 가장 기억이 잘 남는 형태 (누군가에게 말 하듯이)로 작성이 되니

간혹 잘못된 부분이나, 수정사항이 있다면 언제든지 피드백 부탁드리겠습니다.

---

데이터의 흐름

 

우선 백엔드인 app.py의 전체코드 보고 갑니다.

프레임워크는 flask 사용했습니다.

from flask import Flask, render_template, request, jsonify
app = Flask(__name__)

@app.route('/')
def home():
    return render_template('index.html')

@app.route("/bucket", methods=["POST"])
def bucket_post():
    sample_receive = request.form['sample_give']
    print(sample_receive)
    return jsonify({'msg': 'POST 연결 완료!'})
    
@app.route("/bucket", methods=["GET"])
def bucket_get():
    return jsonify({'msg': 'GET 연결 완료!'})

if __name__ == '__main__':
    app.run('0.0.0.0', port=5000, debug=True)

위 코드를 보니 API가 2개네용?? 어떤거 어떤거??? 앞에 골뱅이 붙은거~

@app.route("/bucket", methods=["POST"])
def bucket_post():
    sample_receive = request.form['sample_give']
    print(sample_receive)
    return jsonify({'msg': 'POST 연결 완료!'})

자 요거 하나 ~

@app.route("/bucket", methods=["GET"])
def bucket_get():
    return jsonify({'msg': 'GET 연결 완료!'})

요거 하나 ~ 그럼 일단 어떻게 생긴 애들인지만 파악하고 갑시다.

---

우선 첫번째 코드부터

@app.route("/bucket", methods=["POST"])
def bucket_post():
    sample_receive = request.form['sample_give']
    print(sample_receive)
    return jsonify({'msg': 'POST 연결 완료!'})

방식은 = POST 이고, /bucket타고 들어왔다네요.

* 참고로 POST = 데이터를 생성(Create)하거나, 삭제(Delete)하거나, 변경(Update)할 때 주로 사용합니다.

그러니까 일단 이 아이는 /bucket을 타고 오면서 뭔진 몰라도 우선 data는 가지고 왔겠네요?? 일단 봅시다.

 

def bucket_post():

/bucket타고 들어오면~ 나는 bucket_post() 라는 함수를 부를거야~ 그게 뭔데??

: 밑에 세 줄~

  sample_receive = request.form['sample_give']

우선 너가 갖고온 data의 form(형태)가 'sample_give'라는 친구가 있으면 우린 그걸 sample_receive라는 변수로 받을거야.

    print(sample_receive)

그리고 sample_receive로 받은 data를 우린 print할거야 ~

* 참고로 print()하면 ()내용을 보여줘~ 라는 뜻입니다.

    return jsonify({'msg': 'POST 연결 완료!'})

그리고 data를 내려줄건데 data는 {'msg': 'POST 연결 완료!'} 이렇게 내려줄거야~

 

여기까지가 첫 번째 API 해석

---

두 번째 API

@app.route("/bucket", methods=["GET"])
def bucket_get():
    return jsonify({'msg': 'GET 연결 완료!'})

방식은 = GET 방식이고~, /bucket 이라는 루트를 타고 들어오면~ 우리는 함수 bucket_get() 불러온데~

내용이 뭐야? {'msg': 'GET 연결 완료!'} 이거를 클라이언트로 내려주네~ 여기까지가 두 번째 API 해석

* 참고로 GET은 data를 조회(Read)를 할 때 주로 씁니다. 

---

그냥 참고 * 위에 POST는 생성(Create)하거나, 삭제(Delete)하거나, 변경(Update) / GET은 조회(Read)

어라라 CRUD 다 나왔네 (체크!)

---

자 우선 서버가 생긴건 이렇게 생겼고~ 이제 클라이언트(frontend)의 함수들이 어떻게 생겼는지 보러 갑시다.

여기도 2개가 있네~

    <script>
        $(document).ready(function () {
            show_bucket();
        });
        function show_bucket() {
            fetch('/bucket').then(res => res.json()).then(data => {
                console.log(data)
                alert(data["msg"]);
            })
        }

        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();
            });
        }

    </script>

첫 번째 함수 부터 봅시다.

    <script>
        $(document).ready(function () {
            show_bucket();
        });
        function show_bucket() {
            fetch('/bucket').then(res => res.json()).then(data => {
                console.log(data)
                alert(data["msg"]);
            })
        }

자 여기서

    <script>
        $(document).ready(function () {
            show_bucket();
        });

$(document).ready()는 웹 페이지 창이 로딩이 되면~ 준비가 되면~ ()할거야~ 이런 뜻입니다.

 

()가 뭐야?

function () {
            show_bucket();
        });

함수가 있는데 show_bucket() 이라는 함수를 불러올거야~ 그게 뭔데~?

 

이어지는 코드를 살펴보면

function show_bucket() {
            fetch('/bucket').then(res => res.json()).then(data => {
                console.log(data)
                alert(data["msg"]);
            })
        }

내용은 나 중괄호{} 할거야~

보면 fetch('/bucket') 이라 쓰여있고, 해석은 = 어 나 '/bucket' 여기로 fetch(보낼거야~) *fetch=보내다

그리고

then(res => res.json()).then(data => {
                console.log(data)
                alert(data["msg"]);
            })

res(결과 값) 결과값을 받아올건데~ json() (제이슨형태) 로 받아올거야~. then 그리고! 결과값을 data라고 하고,

나는 그걸 {} 중괄호~ 할거야.

{}에 뭐있어?

                console.log(data)
                alert(data["msg"]);

제이슨 형태로 받아온 결과값을 data라 하고 그거를 console.log로 콘솔창에 찍어볼거야~

그리고 alert를 띄울거야~ 뭐를??? data의 "msg" 값을 !!

 

* 참고로 꺽쇠[]나오고 안에 "msg" 이런 문자열 나오면 ? 그건 dictionary

dictionary는 뭘로 이뤄져 있다?? 중괄호 안에 !{ key : value, key: value, ........ }

그럼 alert을 띄울 때 dictionary의 key 값인 "msg"를 띄웠으니까? 찍히는건 value값이 찍히겠네~

 

여기까지가 첫 번째 코드 해석

---

두 번째 코드

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();
            });
        }

save_bucket() 이라는 함수 불러올거야~ 내용이 뭐야? 중괄호 !! {}

근데 이번 save_bucket()함수는 언제 불러오는 걸까???

조금더 아래에 내려가서 전체 코드 중 <body>부분을 보면 있다. 그 부분만 가져오겠습니다.

<button onclick="save_bucket()" type="button" class="btn btn-outline-primary">기록하기</button>

코드를 보면 <button>이라는 버튼태그가 들어가 있고 바로 옆에 onclick="save_bucket()" 있네요.

 

해석하면 '기록하기'라는 버튼을 사이트에서 클릭하면~ "save_bucket()"이라는 함수 불러와~ 이렇게 해석합니다

 

 

그럼 다시 save_bucket()로 올라와서 함수의 내용인 중괄호 {} 안에 부분

let formData = new FormData()

무언가 새로운 형태(form)의 data를 formData라는 변수로 받을거고 ~

formData.append("sample_give", "샘플데이터")

그 formData를 append 붙일거야~ 어떻게~~?

"sample_give"라는 이름의 "샘플데이터"라는 data를 가진 formData로~ 그리고

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

 fetch 보낼거야~ 어디에? '/bucket' 라는 곳에~, 방식은 POST고 , 내용물은 formData로, then 그리고

다시 data를 받아올거고~ 그 data의 "msg"값을 alert 띄울거야~

 

여기까지해서 두 번째 코드까지

window.location.reload();

* 참고로 위 코드는 alert을 띄웠으면, 윈도우 창을 다시 실행해라~ (한 마디로 새로고침) 이라는 뜻.

---

백엔드(app.py) 프론트엔드(index.html)에서 현재 작동하는 모든 함수를 알아 봤다.

 

해석을 하다보니~ 얘네가 서로 어떤식으로 응답을 하는지 그 흐름에 대해서 보이기 시작했는데, 그 시작지점은 이 곳이다.

 

제일 마지막에 해석한 함수중에서

let formData = new FormData()

우리는 새로운 데이터가 생기면 그걸 폼데이터라는 변수로 받고,

formData.append("sample_give", "샘플데이터")

formData를 붙여줄거야 ("sample_give", "샘플데이터") 이런형태로~ 그걸 어디다 보내?

 

바로 여기 /bucket

 

이거 맨처음 해석한 app.py에도 있었죠?

@app.route("/bucket", methods=["POST"])
def bucket_post():
    sample_receive = request.form['sample_give']
    print(sample_receive)
    return jsonify({'msg': 'POST 연결 완료!'})

바로 이 코드

 

우리가 클라이언트에서 갖고온 형태(form)중에~ 'sample_give'이런애가 있으면

그걸 나는 sample_receive라는 변수로 그 data를 받겠다.

formData.append("sample_give", "샘플데이터")

우리가 싸온 data에 "sample_give" 가 있네.

그럼 "샘플데이터" 이 값을 서버(백엔드)쪽으로 주면서 백엔드는 sample_receive 라는 변수로 "샘플데이터"를 받는거고

 

프린트(sample_receive)를 한 뒤에~

그리고 다시 클라이언트 쪽으로 {'msg': 'POST 연결 완료!'} 이렇게 내려주겠다.

then((response) => response.json()).then((data) => {
                alert(data["msg"])

그럼 클라이언트는 서버가 내려준 {'msg': 'POST 연결 완료!'}여기에서 msg값을 alert을 띄우니까 출력되는 값은??

 

POST 연결 완료! 가 출력이 된다.

---

제 스스로 코딩을 배워가면서 가장 흥미도가 높아지고, 집중도가 올라갈때는

항상 무언가를 깨우치고 깨달을 때, 그 때가 가장 최고로 즐겁습니다.

 

오늘 정리한 이 해석이 저에겐 최고의 즐거움을 만들어 준 순간들의 연속 연속 연속입니다.

코드 하나하나의 해석 뿐만 아니라 서로의 넘겨주고 내려받는 data들이

각자 위치에서 어떻게 반응하고 어떻게 활용이 되는지

 

그 흐름을 파악하면서 굉장히 즐거웠고 재밌었습니다.

 

이제 코드, 코딩을 배운지 3일차가 되었습니다.[코린이] 그 자체죠.

 

아직은 배운 코드들을 당장 활용하기에도 서툴러서 급급하지만

이런식의 흐름들을 이해하고 거기에 코드 지식들을 쌓아 간다면

지금보다 더 큰 재미들을 느끼는 순간들이 많이 생기게 될 것 같습니다.

 

그래서

오늘도 몰라도 천천히,

느려도 꾸준하게,

그렇게 나아가려고 합니다.