웹개발 종합반 4주차 (2)
저번 포스트에서는
프론트엔드에서 API,
데이터를 받는 것을 배웠다
4주차에서는 백엔드 과정을 배웠다
즉, 서버 만들기를 배웠다 두근두근
다만 백엔드 과정이 꽤나 양이 많아...
데이터를 받을 때 fetch를 사용해 보았는데
프론트엔드(.html 등)와
벡엔드(.py 등)가 소통하는 방법은
여러 가지가 있다고 한다
그중에 우리는 GET, POST 방식 등을 배웠다
이번 포스트에서는
두 방식을 배운 내용을 공유하고자 한다
GET 요청의 특징은
데이터를 URL로 전달하는 것이다
주로 URL에는 ?(물음표)가 들어간다 하니
주소창에 주소를 유심히 봐보자 ㅎㅅㅎ
또한 GET 요청은
브라우저에 칠 수 있는 방식으로,
통상적으로 데이터를 건드리지 않고
조회할 때 사용한다
예) 회원정보 조회하기
강남구에 배달 간 치킨집 정보들 가져오기 등
POST 요청의 특징은
눈으로 보이지 않지만
컴퓨터끼리만 알아들을 수 있는 방식으로
데이터가 이동된다
주로 데이터를 조작(생성, 변경, 삭제)
요청할 때 사용한다
예) 회원가입, 회원정보 변경/삭제
API를 만들고 사용하는 과정에서
2가지 필요하며
request와 jsonify이다
이 2가지는 많이 사용될 예정이다
GET 요청 / 벡엔드 .py
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=5001,debug=True)프론트엔드 / .html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<title>Document</title>
<script>
function hey() {
fetch("/test").then(res => res.json()).then(data => {
console.log(data)
})
}
</script>
</head>
<body>
<h1>제목을 입력합니다</h1>
<button onclick="hey()">나는 버튼!</button>
</body>
</html>
POST 요청 / .py
from flask import Flask, render_template, request, jsonify
app = Flask(__name__)
@app.route('/')
def home():
return render_template('index.html')
@app.route('/test', methods=['POST'])
def test_post():
title_receive = request.form['title_give']
print(title_receive)
return jsonify({'result':'success', 'msg': '이 요청은 POST!'})
if __name__ == '__main__':
app.run('0.0.0.0',port=5001,debug=True).html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<title>Document</title>
<script>
function hey() {
let formData = new FormData();
formData.append("title_give", "블랙팬서");
fetch("/test", { method: "POST", body: formData }).then(res => res.json()).then(data => {
console.log(data)
})
}
</script>
</head>
<body>
<h1>제목을 입력합니다</h1>
<button onclick="hey()">나는 버튼!</button>
</body>
</html>간단히 말해서
웹페이지를 만들 때에는
프론트엔드와 백엔드가 필요하며
내가 사용하는 프로그램은
visual code인데
두 엔드(?)를 위해
py파일과 html파일을 사용한다
여기서 py는 백엔드
html은 프론트엔드라고
생각하면 쉬울 거다
공유한 코드들은 실습에서 사용한 코드로
모두가 사용하는 통용된 정보는 아니다
다만 내가 공부한 내용을
기록하기 위해 담은 것이니
즐거운 마음으로 봐주시길 바란다 :)
이어 다음 포스트는
직접 배운 기술들로 미니 프로젝트 2개를 해보았다
많관부.