천진난만 코딩 스토리

2023.02.08 항해 3일차 본문

TIL(Today I Learned)

2023.02.08 항해 3일차

Wisdom_1104 2023. 2. 9. 14:12

1) 수정기능 (CRUD)

수정기능을 구현하기가 쉽지 않았다...

기록하기 버튼을 누르면 기록폼이 나타나고 작성하면 업로드가 되게 하였다.

업로드된 도서 카드 밑의 삭제 버튼을 누르면 삭제가 되게 하였고

수정 버튼을 누르면 수정폼이 나타나게 하는 것까지는 구현을 했다.

 

하지만 수정폼에 기존의 데이터를 어떻게 불러와서 보여지도록 하는지 감이 잡히지 않았다...

그래서 update_one의 기능을 다 찾아보고 하나씩 적용시켜 보았지만

내가 원하는 결과물을 얻을 수 없었다...

 

 

수많은 오류를 마주하며 시행착오 끝에

수정객체에 대한 API를 만들어야 하고 GET으로 불러오게 하고

수정완료 버튼 클릭 시 update_one을 할 수 있도록 해야 한다는 것을 알게 되었다.

같은 key값에 수정되는 새로운 값을 업데이트 하면 된다는 것까지 알았다.

 

나름 어떻게 해야할지 감은 잡혔지만....!

수정폼에 불러온 데이터를 적용하는 것에서 막혀서 진전은 없는 상태이다...

 

 

2) 취소하기

버킷리스트를 작성하고 기록하기 버튼을 누르면 버킷이 생기도록 하였다.

완료 버튼을 누르면 버킷에 취소선이 그어지도록 구현해 놓았는데

완료된 버킷의 취소선을 다시 없애는 기능을 넣고자 했다.

 

그렇게 하기 위해선 먼저 취소 버튼을 만들어야 했다. 어디에 넣어야 하는지 고민을 하였다.

버킷이 완료가 되면 취소선과 함께 취소 버튼이 생기면 어떨까? 라는 생각을 하게 되었다.

그래서 완료가 되었을 때 취소선과 함께 취소 버튼이 생기도록

temp_html = `<li>
                <h2 class="done">✅ ${bucket}</h2>
                <button type="button" class="btn btn-outline-primary">취소</button>
            </li>`

취소버튼 코드를 추가 하였다.

그러자 취소 버튼이 생겼다. 하지만 당연하게도 취소버튼을 눌러도 취소가 되지않는다.

취소 버튼을 누르면 취소선이 사라지는 기능을 넣기 위해

완료 버튼을 누르면 취소선이 그어지는 코드를 응용해보기로 했다.

 

@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': '버킷 완료!'})

-

완료 버튼의 코드를 보자 완료 버튼을 누르면 done이라는 id가 1로 변하게 되고 1인 객체는 취소선이 그어지게 되어있었다.

1이 되면 취소 버튼이 나타나게 구현을 했으니

이 1을 다시 0으로 바꿔주면 취소선과 취소버튼이 사라지지 않을까? 라는 생각을 하게 되었다.

 

그래서

@app.route("/bucket/cancel", methods=["POST"])
def bucket_cancel():
    num_receive = request.form["num_give"]
    db.bucket.update_one({'num': int(num_receive)}, {'$set': {'done': 0}})
    return jsonify({'msg': '취소 완료!'})

bucket_cancel()을 만들어서 done을 0으로 바꾸도록 하였고,

취소버튼에  onclick="cancel_bucket(${num})"으로 실행될 수 있도록 하였다.

물론 ajax로 연결도 해두었다.

그러자 취소 버튼을 누르면 다시 취소선과 취소 버튼이 사라지게 되었다.

 

 

생각해보면 간단한 작업이라는 것을 알게 됨과 동시에

내가 수정폼을 구현하기 위해서 코드를 하나하나 뜯어보고 적용시켜가며 오류를 만나보지 않았더라면

내가 과연 쉽게 해결할 수 있었을까? 라는 생각을 하게 되었다.

 

그러면서 오류를 많이 만나보는 것이 좋다는 말을 이해하게 되었다.

앞으로도 오류를 두려워하지 않으며 시도해보고 오류를 만나고 해결해가는

멋진 개발자가 되기로 다짐하게 되었다.

 

'TIL(Today I Learned)' 카테고리의 다른 글

2023. 02. 14) 항해 9일차  (0) 2023.02.15
2023. 02. 13) 항해 8일차  (0) 2023.02.13
2023.02.09 항해 4일차  (0) 2023.02.10
2023.02.07) 항해 2일차  (0) 2023.02.09
2023.02.06) 항해 1일차  (0) 2023.02.07