[JS, Python, Flask, MongoDB Atlas 사용]
막힐 때, 그 문제를 해결하는 게 너무 재미있다.
오늘은 저번 글에서 언급한 삭제 기능을 만들어보려고 한다.
처음에 쉬울 줄 알았고, 막상 하다보니 어려웠지만, 결과적으로는 쉬운 기능이었다.
사전캠프때 내일배움단 강의에 나온 기능을 응용하면 쉽게 만들 수 있는 기능이었다.
하지만 난 강의에 나온 내용을 잊고 있던 상태였기 때문에 직접 만들었다가, 응용을 해서 다시 만들었다.
응용해서 만들었을 때, '이거면 되는데 직접 만드느라고 시간만 날렸네' 하는 생각도 들었지만,
직접 만들고 잘 작동하는 걸 확인했을 때의 성취감은 대단했다.
그래서 시간낭비가 아닌 배움, 경험이라고 생각한다.
기능을 다 만들고, 소개 페이지에 움직이는 그라데이션 배경을 넣어봤다.
function save_comment(){
let id = Date.now().toString()
let name = $('#name').val()
let comment = $('#comment').val()
$.ajax({
type: 'POST',
url: '/seob/guestbook',
data: {id_give: id, name_give:name, comment_give:comment},
success: function (response) {
alert(response['msg'])
window.location.reload()
}
})
}일단 데이터를 저장할 때부터 id값을 정해준 상태로 저장했다.
id값은 Date.now()로 줬으며 Date.now()는 랜덤과 비슷한 숫자를 보여준다.
사전캠프 강의처럼 변수를 숫자로 주고, DB의 데이터 개수 + 1씩 늘어나게 해서 아이디 값을 주는 방법도 있지만,
1, 2, 3, 4, 5의 숫자를 가진 총 다섯 개의 방명록 중, 3번 방명록을 삭제하고 db.length + 1을 한다면 다음 방명록의 아이디 값은 5가 될 것이기 때문에 5번 방명록을 삭제한다면 방명록 두 개가 삭제될 것이다.
그래서 혹시나 하는 마음에 Date.now()로 id 값을 줬다.
@app.route("/seob/guestbook", methods=["POST"])
def seob_post():
id_receive = request.form['id_give']
name_receive = request.form['name_give']
comment_receive = request.form['comment_give']
doc = {
'id':id_receive,
'name':name_receive,
'comment':comment_receive
}
db.seob.insert_one(doc)
return jsonify({'msg':'작성 완료!'})id값을 받아서 저장하는 python 파일이다.
function show_comment(){
$.ajax({
type: "GET",
url: "/seob/guestbook",
data: {},
success: function (response) {
let rows = response['comments']
for (let i = 0; i < rows.length; i++) {
let name = rows[i]['name']
let comment = rows[i]['comment']
let id = rows[i]['id']
let temp_html = `<div id = 'del' class="card">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>${comment}</p>
<footer class="blockquote-footer">${name}</footer>
<button class="cardbtn" id = "b"token interpolation">${id})">삭제</button>
</blockquote>
</div>
</div>`
$('#comment-list').append(temp_html);
}
}
});
}방명록을 삭제하려면 버튼을 클릭했을 때 해당 버튼이 위치한 방명록만 지워줘야하기 때문에, 클릭함수의 인자로 id값을 넣어준다.
function del_comment(id){
$.ajax({
type: 'DELETE',
url: '/seob/guestbook/',
data: {id_delete : id},
success: function (response) {
alert(response["msg"])
window.location.reload()
}
})
}버튼을 클릭하면 실행될 함수다.
처음에는 for문을 돌려서, id가 맞는 방명록을 지워야 하나? 라고 생각했는데, 그럴 필요 없었다.
클릭할 때 실행되는 함수의 파라미터로 이미 해당 방명록의 id값이 들어갔기 때문에, 그 id를 가지고 지우면 된다.
@app.route('/seob/guestbook/', methods=['DELETE'])
def delete_comment():
id_receive = request.form['id_delete']
db.seob.delete_one({'id':id_receive})
return jsonify({'msg': '삭제 완료'})클릭했을 때, 그 방명록에 해당하는 id값을 가지고 그 id값과 같은 데이터를 DB에서 지운다.
결과적으로 완전 잘 작동한다.
배웠던 걸 응용하고, 모르는 것들은 구글링을 통해 해결하는 게 뭔가 뿌듯하다고 하고 재미있다.
개인 페이지 배경에 움직이는 그라데이션을 넣었다.
배경은 15초 간격으로 그라데이션을 가지고 서서히 움직인다.
샤랄라~ 하는 느낌이다.
9 to 9에, 개인적으로 남아서 공부를 하지만, 시간이 모자른 것 같은 이 느낌은 뭘까.
아직 깃과 깃허브에 대해 익숙하지도 않고 많이 모르기 때문에 그것도 열심히 공부해야겠다.
끝!
