강의를 들으면서 만들었던 버킷리스트 페이지에 완료 버튼을 추가하고 완료 버튼을 눌렀을 시에 버튼이 사라지고 버킷리스트에 완료!! 라는 텍스트가 추가하는 것이 조건이었다.
완성페이지
@app.route('/')
def home():
return render_template('index.html')
@app.route("/bucket", methods=["POST"])
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, #버킷 등록 시, db에서 특정 버킷을 찾기 위해 'num' 이라는 고유 값 부여
'bucket' :bucket_receive,
'done' : 0 #'done' key값을 추가 해 각 버킷의 완료 상태 구분(0 = 미완료, 1 = 완료)
}
db.bucket.insert_one(doc)
return jsonify({'msg': '저장 완료!'})count = len(bucket_list)+1 과
doc= { 'num': count, 'done' : 0 은 시험을 위해 추가하라고 알려준 코드인데
원래 DB에는 버킷리스트 데이터만 들어갔기 때문에 들어간 버킷을 하나씩 완료시키기 위해 필요한 'num'와 완료가 됐는지 안됬는지 구분할 'done'을 만들어 줄 것을 미리 가이드 라인으로 준거 같다.
이제 조건에 맞춰 구현할 코드를 app.py와 index.html에 작성해야한다. 먼저 생각난 건 if 문이였다. 완료! 버튼과
텍스트 완료!!를 done이 0인 경우와 1인 경우에 따라 다르게 표시 되도록 하면 CSS는 일단 완성되기 때문이다.
if (done < 1) {
temp_html = `<li>
<h2>✅ ${bucket}</h2>
<buttontoken interpolation">${num})" type="button" class="btn btn-outline-primary">완료!</button>
</li>`
} else {
temp_html = `<li>
<h2>✅ ${bucket} 완료!!</h2>
</li>`
}
console.log(rows)
$('#bucket-list').append(temp_html)
}사실 여기서 done < 1 이라고 쓴 이유는 done = 1 로 조건을 하니까 안되서 done< 1 이라고 했다.. done == 1 로 해야 되는걸 까먹고 말이다..
여기서 찾아보다가 알게된 사실인데
==와 ===라는 명령어가 따로 있다는 것을 알게 되었다.
==는 연산자를 이용하여 서로 다른 유형의 두 변수의 [값]을 비교하는 것이고
===는 [값]뿐만 아니라 [자료형]도 비교한다고 한다.
예를 들면 2라는 숫자와 "2"라는 문자열을 비교하면 맞지 않다고 표시해준다고 한다. 언제 쓰일지는 모르겠지만 하나 알게 되었다.
그런데 여기서 문제가 완료!를 눌렀을 때 그 버킷리스트의 num를 어떻게 app.py에 보내야 할 지를 생각해 내지 못했다.
지금은 보면 done에 (${num})를 넣어 버튼을 누를 때 num 값을 넘겨 주도록 되어 있지만 원래는 생각하지 못했다.
고민하다가 넘겨주는 부분은 function에서 작동하기 때문에 검색해 보니 function() 에서 괄호안에 변수를 넣으면 function이 작동 시 그 함수 안에서 변수를 매개변수로 넣어 작동 할 수 있다는 것을 알게 되었다.
function done(num) {
let formData = new FormData();
formData.append("num_give", num);
fetch('/bucket/done', { method: "POST", body: formData, }).then((response) => response.json()).then((data) => {
alert(data["msg"]);
window.location.reload();
});이런 식으로 하면 완료!를 클릭했을 때 넣었던 num을 done function에서 쓸 수 있게 된다는 것이다. 그래서 num_give에 태워서 fetch 명령어를 사용해 app.py에 보내면 된다.
@app.route("/bucket/done", methods=["POST"])
def done_post():
num_receive = request.form['num_give']
db.bucket.update_one({'num':int(num_receive)},{'$set':{'done':1}})
return jsonify({'msg': ' 완료!'})그러면 app.py에서 num_give를 받아 num_receive에 저장하고 DB에서 num 이 num_receive인 값을 찾아 done을 1로 바꿔 주면 되는데 여기서 문제가 생긴다.
위의 코드에는 int(num_receive)라고 써져 있지만 원래는 그냥 'num_receive' 였다. num이 만약 1이면 1을 받았을테니 그대로 찾을 것이라 생각했다. 그런데 done이 1로 바뀌지 않는다. msg 완료는 뜨는데 done만 바뀌지 않는다.
혹시나해서 'num' : 'numreceive를 'bucket':'테스트'로 바꾸고 DB에 테스트를 넣고 완료!를 눌러보니 제대로 실행 되었다.
결론은 index.html에서 formData로 데이터를 전송 시
문자열로 바뀌기 때문에 DB에서 찾지 못하는 것이었다.
그래서 int()이나 float()를 이용하여 숫자의 문자열을 숫자 데이터(int형이나 float형)으로 변환할 수 있다는 것을 알고 바꾸게 되었다.
뭔가 시험을 칠 때 보니 어떤 기능을 구현하는 아이디어는 나오는데 그 과정에서 기본 지식이 부족하다보니 막히는 부분이 생겼다. function 같은 경우 기본적인 내용인데 몰라서 구현하지 못할 뻔했고 숫자형이나 정수형 같은 경우도 제대로 알지 못하니 오류가 나도 원인을 파악하는 데 여러 번의 과정이 걸렸다. 분발하자..
