본문 바로가기
스파르타/Web

[Web] Get/Post - ( week 4 )

by bakcoding_sparta 2023. 4. 24.

서버로 요청할 때 API 호출 방식은 Get과 Post가 있다.

 

Get

일반적으로 데이터 조회를 요청하는 상황에서 많이 사용한다. 즉 누구나 열람해도 상관이 없는 정보를 전달할 때 쉽고 간단하게 요청할 수 있다.

 

Post

일반적으로 데이터 생성, 변경, 삭제 등의 요청을 처리할 때 사용한다. 즉 누구에게나 요청할 수 있도록 해서는 안되며 보안이 필요한 상황에서 보이지 않게 정보를 전달하기 위해서 사용한다.

 

호출

백엔드에서는 브라우저에서 Get으로 들어오는 요청을 처리하기 위해서 request와 jsonify 두 기능을 필요로 하는데 이 기능을 사용하기 위해서는 임포트에 추가해주어야 한다.

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

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

@app.route('/test', methods=['GET'])
def test_get():
   title_receive = request.args.get('title_give')
   print(title_receive)
   return jsonify({'result':'success', 'msg': '이 요청은 GET!'})

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

/test 경로의 API가 호출되면 해당 문자열을 반환한다.

이 API를 프런트엔드에서 호출한다.

    <script>
        function hey() {
            fetch("/test").then(res => res.json()).then(data => {
                console.log(data)
            })
        }
    </script>

 

포스트 방식도 비슷하다.

@app.route('/test', methods=['POST'])
def test_post():
   title_receive = request.form['title_give']
   print(title_receive)
   return jsonify({'result':'success', 'msg': '이 요청은 POST!'})

html에서 Post를 보내줄 때는 formData 형식으로 API에 데이터를 붙여서 보낸다.

            let formData = new FormData();
            formData.append("title_give", "블랙팬서");

            fetch("/test", { method: "POST", body: formData }).then(res => res.json()).then(data => {
                console.log(data)
            })

브라우저에서 해당 API를 호출할 때 title_give라는 이름으로 '블랙팬서'라는 정보를 전달하는데 이 정보는 서버로 들어오게 된다. 이걸 확인하기 위해서 title_receive에 들어온 정보를 저장하고 출력해 보면 터미널에서 확인이 가능하다.