1. 서버를 만든다. POST
app.py에서
def bucket_post():
bucket_receive = request.form['bucket_give']
bucket_list = list(db.bucket.find({}, {'_id': False}
count = len(bucket_list) + 1
doc = {
'num' : count,
'bucket' : bucket_receive,
'done' : 0
}
db.bucket.insert_one(doc)
return jsonify({'msg': '등록완료!'})
- bucket_give를 bucket_receive로 받는다.(변수지정)
- db에서 자료를 모두 가져오고 변수 bucket_list로 지정한다
- bucket_list의 길이의 +1만큼 숫자를 정한다.
- doc에 db에 저장할 요소들을 정한다. (num,bucket,done)
- db에 내용을 저장한다. (db.bucket.insert_one(doc))
- {'msg': '등록완료!'}를 담은 신호를 반환한다.
return : 단순히 반환하는 것이 아니다. 함수 바깥으로 변수를 가지고 나갈 수 있게하는 역할도 하고 있다. 위의 경우에는 'msg'라는 변수를 갖고 반환되는 것이다. 어디로? 클라이언트로.
2. 클라이언트 수정 POST
index.html에서
function save_bucket(){
let bucket = $('#bucket').val()
$.ajax({
type: "POST",
url: "/bucket",
data: {bucket_give: bucket },
success: function (response) {
alert(response["msg"])
window.location.reload()
}
});
}
- #bucket'을 let bucket으로 변수 지정한다.
- data: {bucket_give: bucket }로 bucket을 서버로 보내줄(app.py) 변수 bucket_give로 정한다.
- 성공하면 리턴값을 받아 알람을 띄운다. (msg가 반환값으로 넘어온다)
- 리로드한다. (window.location.reload())
이렇게하면 기록하기 api가 완성된다.
api는 무엇인가? : 주문을 할 수 있는 메뉴판으로 이해하면 쉽다. 음식을 주는 주방과 주문을 할 수 있도록 도와주는 보여지는 메뉴판. 메뉴판을 통해서 원하는 정보를 선택하면 주방(서버)에서 음식(컨텐츠)를 받아 먹을 수 있게된다. (정보를 얻을 수 있게 된다.) (feat. 코딩애플)
3. 서버 만들기 GET
app.py에서
@app.route("/bucket", methods=["GET"])
def bucket_get():
buckets_list = list(db.bucket.find({},{'_id':False}))
return jsonify({'buckets':buckets_list})
- db에 있는 내용을 모두 가져온다. 그리고 그것을 buckets_list라는 변수로 정한다.
- return으로 buckets_list를 buckets로 지정하여 클라이언트로 반환한다.
- 그렇게되면 클라이언트에서는 buckets로 정보를 받아 다시 명령을 내릴 수 있게 된다.
4.버킷리스트 모두 불러오기
index.html에서
function show_bucket(){
$('#bucket-list').empty()
$.ajax({
type: "GET",
url: "/bucket",
data: {},
success: function (response) {
let rows = response['buckets']
for (let i = 0; i < rows.length; i++) {
let bucket = rows[i]['bucket']
let num = rows[i]['num']
let done = rows[i]['done']
let temp_html = ``
if (done == 0) {
temp_html = `<li>
<h2>✅ ${bucket}</h2>
<buttontoken interpolation">${num})" type="button" class="btn btn-outline-primary">완료!</button>
</li>`
} else {
temp_html = `<li>
<h2 class="done">✅ ${bucket}</h2>
</li>`
}
$('#bucket-list').append(temp_html)
}
}
});
}
- let rows = response['buckets']
서버에서 리턴으로 보내준 buckets값을 rows로 받아온다. - for문을 사용하여 rows에 있는 자료들을 하나씩 가져와 변수를 정해준다.
for (let i = 0; i < rows.length; i++) {
let bucket = rows[i]['bucket']
let num = rows[i]['num']
let done = rows[i]['done']
3.let temp_html = 백팁두개
temp_html 라는 변수에 들어갈 내용은 아래의 if문을 통해 결정된다. - 만약 done의 값이 0이면 완료가 되고 1이면 그냥 리스트를 보여준다. (완료,미완료 두가지 정보로 구분할 수 있기 때문에 if-else를 사용한다.
- if로 결정된 temp_html내용은 #bucket-list 아래에 붙인다(append)
- $('#bucket-list').empty()
시작하자마자 기존에 있던 내용을 지우도록 한다. (직접 찾아서 지워도 된다)
5.db에 붙여준 숫자 0,1바꾸기(서버)
app.py에서
@app.route("/bucket/done", methods=["POST"])
def bucket_done():
num_receive = request.form["num_give"]
db.bucket.update_one({'num': int(num_receive)}, {'$set': {'done': 1}})
return jsonify({'msg': '버킷 완료!'})
- 클라이언트에서 받아올 자료 num_give를 num_receive로 지정하기
- db에서 자료를 수정하기
db.bucket.update_one({'num': int(num_receive)}, {'$set': {'done': 1}})이때 클라이언트에서 보내는 숫자자료를 서버에서는 문자로 받기 때문에 숫자 자료를 받아올 때는 반드시 '숫자로 변환'하는 작업을 추가로 해줘야 한다. int(num_receive) 를 주의해서 보도록 하자.
- 리턴으로 msg 클라이언트로 보내기.
- 자료원소중에 done으로 지정되어 있는 자료를 1로 바꿔준다. (기존에는 0으로 되어있음)
6. 완료된 버킷 표시하기
index.html에서
function done_bucket(num){
$.ajax({
type: "POST",
url: "/bucket/done",
data: {'num_give':num},
success: function (response) {
alert(response["msg"])
window.location.reload()
}
});
}
- 위에서 let으로 정한 num인데 서버에 보낼때는 num_give로 보낸다.
- 리턴값이 오면 msg를 알람으로 띄운다.
- 지금 있는 곳에서 리로드하게 한다.
느낀점 : 2회차가 이제야 끝났다. 이번에 공부할 때는 변수값에 집착하지 않고 최대한 정보의 흐름이 어떤 순서로 흘러가는지 지켜보았다. 원래 정보의 흐름을 클라이언트에서 시작하지만 특이하게 강사님은 정보를 받아올 서버부터 설정해주셨다. 뭔가 이미 클라이언트에서 서버로 보내 줄 변수값을 이미 정해두셨기 때문에 가능한것이 아닐까 싶다. 그래서 처음 post를 정리할 때는 정보의 흐름을 따라 클라이언트 > 서버 순으로 정리했지만 get부분을 정리할 때는 강사님이 하는대로 서버부터 정리하였다.
나의 구세주 sm님 !
오늘 공부한 내용중에 가장 의미가 있었던 것을 꼽아보라고 하면 스터디에서 정리한 for문에서의 단수 복수형 사용과 return의 개념이다. return은 단순히 값을 반환하는 것 뿐만 아니라 변수를 함수 바깥으로 보낼 수 있는 역할을 한다. 또한 함수(지정한 행위)를 종료하는 위치를 정해주기도 한다. return을 잘 사용해야 정보의 흐름을 이해할 수 있다. 이해하기 어렵던 대부분의 내용들이 return의 개념을 이해하자마자 모두 맞춰진것처럼 이해가 됐다. 개념 정리에 도움을 주신 sm님께 심심한 감사를...!
이후 내용은 드디어 배포가 남았다. 맥으로 처음하는 부분이기도하고 락이 걸려서 고생하셨다는 분들이 많아서 조금 긴장된다. 그래도 좀 더 힘내보자!
