์ฌ์ฉํ ์ฝ๋๋ ๊นํ๋ธ์ ์ฌ๋ ค๋์์ต๋๋ค.
https://github.com/Hong-been/Sparta/tree/main/bookreview
์๋ฒ์ ์ ์ฅ๋ ํ์ผ์ ์นํ์ด์ง์ ์ฌ๋ฆฌ๊ธฐ
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def home():
return render_template('index.html')
if __name__ == '__main__':
app.run('0.0.0.0',port=5000,debug=True)
- ์ ์์ฌํญ: "templates"ํด๋ ๋ด๋ถ์ index.html ํ์ผ์ ๋ง๋ค์ด์ผ ํ๋ค.
API ๋ง๋ค๊ธฐ
- ์ง๊ธ๊น์ง API๋ฅผ ํตํด ์ ๋ณด๋ฅผ ๊ฐ์ ธ์ค๊ธฐ ์ํด, Ajax๋ฐฉ์์ผ๋ก ๊ฐ์ ธ์๋ค.
- ํด๋ผ์ด์ธํธ๊ฐ ์์ฒญํ ๋ HTTP ํต์ ๊ท์ฝ์ ๋ฐ๋ฅธ๋ค.
- request method๋ฅผ ํตํด, ์ด๋ค ์์ฒญ ์ข ๋ฅ์ธ์ง ์๋ฒ์๊ฒ ์ ๋ณด๋ฅผ ์๋ ค์ค๋ค.
- ๊ฐ์ฅ ๋ง์ด์ฐ๋ ์์ฒญ ๋ฐฉ์
- GET: ๋ณดํต ๋ฐ์ดํฐ ์กฐํ, ์ ๋ฌํ ๋
- POST: ๋ณดํต ๋ฐ์ดํฐ ์์ฑ, ๋ณ๊ฒฝ, ์ญ์ ํ ๋
GET ๋ฐฉ์ ์ดํดํ๊ธฐ
@app.route('/test', methods=['GET'])
def test_get():
title_receive = request.args.get('title_give')
print(title_receive)
return jsonify({'result':'success', 'msg': '์ด ์์ฒญ์ GET!'})
- ํด๋ผ์ด์ธํธ(=์๋ฐ์คํฌ๋ฆฝํธ ์ฝ์)์์ ajax๋ฐฉ์์ผ๋ก ์๋ฒ(=app.py์์ ์คํ๋๊ณ ์์)์๊ฒ get์์ฒญ์ ๋ณด๋ธ๋ค.
- ํค title_give์ ๊ฐ "๋ด๋ ์๊ฐ๋ค" ์ธ ๋ฐ์ดํฐ๋ฅผ ์กฐํํ๊ณ ์ถ๋ค๊ณ ์์ฒญํ๋ฉด, ์๋ฒ์์ ํด๋ผ์ด์ธํธ๊ฐ ์ํ๋ ํค title_give์ ํด๋นํ๋ ๋ฐ์ดํฐ๊ฐ ๋ฌด์์ธ์ง ์์์ฐจ๋ฆฐ๋ค.
- ์ํ! ๋ ๋ด๋ ์๊ฐ๋ค๋ฅผ ๊ฐ์ผ๋ก ๊ฐ์ง๊ณ ์๋ ํค title_give ๋ฐ์ดํฐ๋ฅผ ์กฐํํ๊ณ ์ถ๋? ์ค์ผ์ค์ผ ๋ ๊ทธ๊ฑฐ ์์ผ๋๊น ์กฐํํด๋ผ.
- ๋๊ฐ ์ํ๋๊ฑฐ ์กฐํ ์ฑ๊ณต์ฝ๋ ๋ณด๋ด์ค๊ฒ= ํด๋ผ์ด์ธํธ์์ response๋ก ๋ฐ๋๋ค.
- = ์๋ฒ์์ return์ผ๋ก ๋ณด๋ธ๋ค
POST๋ฐฉ์ ์ดํดํ๊ธฐ
@app.route('/test', methods=['POST'])
def test_post():
title_receive = request.form['title_give']
print(title_receive)
return jsonify({'result':'success', 'msg': '์ด ์์ฒญ์ POST!'})
- ํด๋ผ์ด์ธํธ๊ฐ ์๋ฒ์๊ฒ post๋ฐฉ์์ผ๋ก ๋ฐ์ดํฐ ์ ๋ฐ์ดํธ, ์์ฑ, ์ญ์ ๋ฑ์ ์ํด ๋ฐ์ดํฐ๋ฅผ ๊ฑด๋ค์ฃผ๋ฉด์ ์์ฒญํ๋ค.
- ์๋ฒ์์ ๋ฐ๊ธฐ๋ก ํ title_give์ ๊ฐ์ ๋ฐ๋๋ค.
- ์ ๋ฐ์๋ค๊ณ return์ผ๋ก ์ฑ๊ณต์ฝ๋๋ฅผ ๋ณด๋ธ๋ค
- = ํด๋ผ์ด์ธํธ๋ response๋ก ๋ฐ๋๋ค.
๋ชจ๋์ ์ฑ ๋ฆฌ๋ทฐ
- POST ์ฐ์ต ์์
- ํด๋ผ-์๋ฒ ํ์ธ
- ์๋ฒ ๋ง๋ค๊ธฐ
- ํด๋ผ ๋ง๋ค๊ธฐ
- ์์ฑ ํ์ธ
1. POST: ๋ฆฌ๋ทฐ๋ฅผ ์ ๋ ฅ-์๋ฒ์ ์ ์ฅํ๊ธฐ
๋์ ์ค๋ช
- ๋ธ๋ผ์ฐ์ ์ "๋ฆฌ๋ทฐ ์์ฑํ๊ธฐ" ๋ฒํผ์ ๋๋ฅด๋ฉด "makeReview()" ํจ์๊ฐ ๋์ํ๋ค.
- "makeReview()"๋ POST๋ฐฉ์์ผ๋ก, {sample_give:'์ํ๋ฐ์ดํฐ'} ํํ์ ๋ฐ์ดํฐ๋ฅผ ๊ฑด๋ค์ค๋ค.
- ์๋ฒ๋ ์ ์์ ์ผ๋ก ๋ฐ์ดํฐ๋ฅผ ๋ฐ์ผ๋ฉด,
- jsonify({'msg': '์ด ์์ฒญ์ POST!'})๋ฅผ ๋ฐํํ๋ค.
- ์๋ฒ๊ฐ ๋ฐํํ json์ ํด๋ผ๊ฐ response๋ก ๋ฐ๊ณ , msg์ ํด๋นํ๋ ๊ฐ์ alert๋ก ๋์ด๋ค. ๊ทธ๋ฆฌ๊ณ ์๋ก๊ณ ์นจ.
- app.py์์ ํด๋ผ์ด์ธํธ๊ฐ post๋ฐฉ์์ผ๋ก ๋ณด๋ธ ๋ฐ์ดํฐ๋ฅผ ๋ฐ๊ณ , ์๋ฒ์ ์ ์ฅํ๋ ๋ถ๋ถ
## API ์ญํ ์ ํ๋ ๋ถ๋ถ
@app.route('/review', methods=['POST'])
def write_review():
title_receive=request.form['title_give']
author_receive = request.form['author_give']
review_receive = request.form['review_give']
doc={
'title':title_receive,
'author':author_receive,
'review':review_receive
}
db.bookreview.insert_one(doc)
return jsonify({'msg': 'Complete to save!'})
- index.html์์ ๋ธ๋ผ์ฐ์ ์ ์ ๋ ฅ๋ ๋ฐ์ดํฐ๋ฅผ post๋ฐฉ์์ผ๋ก ์๋ฒ์ ๋ณด๋ด๋ ๋ถ๋ถ
function makeReview() {
let title=$('#title').val()
let author=$('#author').val()
let review=$('#bookReview').val()
$.ajax({
type: "POST",
url: "/review",
data: {
title_give:title,
author_give:author,
review_give: review
},
success: function (response) {
alert(response["msg"]);
window.location.reload();
}
})
}
2. GET๋ฐฉ์: ์๋ฒ์ ์ ์ฅ๋ ๋ฐ์ดํฐ๋ฅผ ๋ธ๋ผ์ฐ์ ์ ์ ๋ฌํ๊ธฐ
๋์ ์ค๋ช
- ๋ธ๋ผ์ฐ์ ๊ฐ ์ค๋น๋๋ฉด "showReview()" ํจ์๋ฅผ ํธ์ถํ๋ค.
- ์๋ฒ์ GET๋ฐฉ์์ผ๋ก ์ ์ฅ๋ ๋ฐ์ดํฐ๋ฅผ ์์ฒญํ๋ค.
- ์๋ฒ์์ ์ ์ฅ๋ ๋ฐ์ดํฐ๋ฅผ json๋ฐฉ์์ผ๋ก returnํด์ ๋ณด๋ด์ค๋ค.
- ํด๋ผ์ด์ธํธ์์ response๋ก ๋ฐ๊ณ , ๋ธ๋ผ์ฐ์ ์ ํ์ํ๋ค.
- index.html์ ํ์ด์ง ๋ก๋ฉ์ด ๋๋๋ฉด ์ ์ฅ๋ ๋ฐ์ดํฐ๋ฅผ ๋ธ๋ผ์ฐ์ ์ ํ์ํ๋ ๋ถ๋ถ
$(document).ready(function () {
showReview();
});
function showReview() {
$.ajax({
type: "GET",
url: "/review",
data: {},
success: function (response) {
let reviews=response['all_reviews']
for(let i=0;i<reviews.length;i++){
let title=reviews[i]['title']
let author=reviews[i]['author']
let review=reviews[i]['review']
let temp_html=`<tr>
<td>${title}</td>
<td>${author}</td>
<td>${review}</td>`
$('#reviews-box').append(temp_html)
}
}
})
}
- app.py์ ๋ธ๋ผ์ฐ์ ์์ get๋ฐฉ์์ผ๋ก ์๋ฒ์ ๋ฐ์ดํฐ๋ฅผ ์์ฒญํ๋ฉด, ๋ชจ๋ ์ ์ฅ๋ ๋ฐ์ดํฐ๋ฅผ ๊บผ๋ด ์ฃผ๋ ๋ถ๋ถ
@app.route('/review', methods=['GET'])
def read_reviews():
reviews = list(db.bookreview.find({}, {'_id': False}))
return jsonify({'all_reviews': reviews})
์น ๋ธ๋ผ์ฐ์ ์ฌ์ง
๋ํ๋ก ๋ฉ๋ชจ์ฅ
API ์ค๊ณํ๊ธฐ
๊ธฐ๋ฅ 1) url, ์ฝ๋ฉํธ๋ฅผ ์๋ฒ๋ก ๋ณด๋ด์ฃผ๋ฉด, ์๋ฒ์์ ๋ฐ์ดํฐ(๋งํฌ, ์ด๋ฏธ์ง, ์ ๋ชฉ, ์ค๋ช , ์ฝ๋ฉํธ)๋ฅผ ์ ์ฅํ๋ค.
- ์์ฒญ URL=
/memo
- ์์ฒญ ๋ฐฉ์ =
POST
- ์์ฒญ ๋ฐ์ดํฐ : URL(url_give), ์ฝ๋ฉํธ(comment_give)
- URL์ metaํ๊ทธ ์ ๋ณด๋ฅผ ๋ฐํ์ผ๋ก ์ ๋ชฉ, ์ค๋ช , ์ด๋ฏธ์งURL ์คํฌ๋ํ
- (์ ๋ชฉ, ์ค๋ช , URL, ์ด๋ฏธ์งURL, ์ฝ๋ฉํธ) ์ ๋ณด๋ฅผ ๋ชจ๋ DB์ ์ ์ฅ
- API๊ฐ ์ ์์ ์ผ๋ก ์๋ํ๋์ง ํด๋ผ์ด์ธํธ์๊ฒ ์๋ ค์ฃผ๊ธฐ ์ํด์ ์ฑ๊ณต ๋ฉ์์ง ๋ณด๋ด๊ธฐ
- (JSON ํ์) 'result'= 'success'
๊ธฐ๋ฅ 2) ๋ฐ์ดํฐ๋ฒ ์ด์ค์ ์ ์ฅ๋ ๋ฐ์ดํฐ๋ฅผ ํด๋ผ์ด์ธํธ์๊ฒ ๋ณด๋ด์ค๋ค.
- ์์ฒญ URL=
/memo
- ์์ฒญ ๋ฐฉ์ =
GET
- DB์ ์ ์ฅ๋ผ์๋ ๋ชจ๋ (์ ๋ชฉ, ์ค๋ช , URL, ์ด๋ฏธ์งURL, ์ฝ๋ฉํธ) ์ ๋ณด๋ฅผ ๊ฐ์ ธ์ค๊ธฐ
- ์ํฐํด(๊ธฐ์ฌ)๋ค์ ์ ๋ณด(์ ๋ชฉ, ์ค๋ช , URL, ์ด๋ฏธ์งURL, ์ฝ๋ฉํธ) → ์นด๋ ๋ง๋ค์ด์ ๋ถ์ด๊ธฐ
- (JSON ํ์) 'articles': ์ํฐํด ์ ๋ณด
์ด๋ฒ ์ฃผ์ฐจ ๊ฐ์์๋ get/post ์์ฒญ๋ฐฉ์์ ์ ์ฉํด๋ณด๋ ๋ฏธ๋ ํ๋ก์ ํธ๊ฐ ๋ง๋ค.
๊ทธ๋์ ๊ฐ๋ ๊ณผ ์ ์ฉ์ ์ ์ฐ๊ฒฐํ๊ธฐ์ํด,
์ค์ค๋ก ๊ณ์ ์ค๋ช ์ ์จ๊ฐ๋ฉด์ ๊ฐ๋ฐํ๊ฒ ๋์๋ค.
๊ทธ๊ฒฐ๊ณผ ๊ฐ๋ฐ์ผ์ง๊ฐ ์ ์ ๊ธธ์ด์ง ใ ใ ใ ใ ใ ใ
์๋ง ์ผ์ฃผ์ผ๋ง ์ง๋๋ '์ด...๋ญ๋๋ผ...!' ํ๊ฒ ๋ ๋ด ์์ ์ ์๊ธฐ๋๋ฌธ์ ^^....
๋ฏธ๋์ ๋๋ฅผ ์ํด ๋จธ๋ฆฌ์ ๋ฒ๋ฉ!ํ๊ณ ์ดํด๊ฐ ๋๋ ์๊ฐ ๊ตฌ๊ตฌ์ ์ ๋ชจ๋ ์จ๋์ผ ํ๋ค.ใ ใ ใ ใ ใ
ํน์ ๊ฒ์ํด๋ณผ ์ฌ๋์๊ฒ ์กฐ๊ธ์ด๋ผ๋ ๋์์ด ๋๊ธฐ์ํด์ ๋ธ๋ก๊ทธ์๋ ์ฌ๋ฆฝ๋๋ค~!