스파르타코딩클럽 내일배움캠프 TIL3

python의 코드와 ajax, jquery 코드를 아직 이해하지 못했음.
구글링을 하면서 어떻게 해야하는지 검색해 보았지만 mongodb와 jquery, ajax를 같이 쓰는 코드를 찾아보기가 힘들었다.
아직 구글링을 잘 못해서 내가 못 찾은 것이라고 생각한다.

오늘은 댓글 삭제기능을 추가하였는데, 맨 처음에 mongodb에서 데이터를 삭제하는 코드가 있는줄 몰랐다. 그래서 js로 삭제해야한다고 생각해서 구글링하는 방향이 완전히 틀어져 2시간 가량을 헤맸다. 그러던 중 api얘기가 나오면서 팀장님이 스파르타 웹개발 종합반에서 들었을 때 저장해두었던 코드를 공유해 주었다. 그 코드를 보고 db에서 삭제하면 되겠다고 생각했다.

그리고 삭제코드를 완성하고 수정 버튼을 누르면 수정이 가능하도록 하는 기능을 구현하려고 했다. 수정버튼을 누르면 input의 disabled의 값을 바꿔준 다음에, value값을 수정하고, 수정하기 버튼을 한번 더 누르면 수정된 내용이 화면에 출력되도록 하려고 했다. 그런데 한 버튼에 두 가지 이벤트가 가능하게 하는 방법도 못찾았고, 새로운 버튼을 만들려면 여태까지 만들었던 코드들이 뒤집어질 위험이 있다고 판단해서 팀원들과 합의해 삭제기능만을 추가하기로 결정했다.

그리고 웹개발 종합반의 자료를 참고하여 지금까지 코딩한 것들을 배포하였다. 오늘 코딩을 하면서 이해한 것을 적어보겠다.

• 삭제 기능 구현 순서

// main.js delete_comment() 함수 코드
// 1. num이라는 매개변수를 데이터 키 'num_give' : 값 num(매개변수)로 보내준다.
// 2. 이 때 값 num은 get으로 가져온 comments[i][num]이다.
// 3. url이 app.py의 코드 @app.route("/miniproject/delete", methods=["POST"])와 동일해야 한다.
function delete_comment(num) {
            $.ajax({
                type: "POST",
                url: "/miniproject/delete", 
                data: {'num_give': num},
                success: function (response) {
                    alert(response["msg"])
                      window.location.reload()
                }
            });
        }

# app.py
# 1. js파일에서 보낸 'num_give'를 받고 변수로 저장한다.
# 2. db.comments.delete_one() db의 comments에 있는 데이터를 삭제하는 코드
# 3. ({'num': int(num_receive)}) comments에 있는 키 :'num', 
# 값 : js에서 받아온 'num_give' 즉 매개변수의 num을 삭제하겠다는 코드
# 4. int()를 쓰는 이유는 db에 있는 데이터를 가져오면 num이라도 문자열로 바뀐다. 문자열을 숫자로 변환시켜 주기 위해 씀.
@app.route("/miniproject/delete", methods=["POST"])
def project_delete():
    num_receive = request.form['num_give']
    db.comments.delete_one({'num': int(num_receive)})
    return jsonify({'msg': '댓글이 삭제되었습니다.'})

// main.js 에서 show_comment() 함수 코드 중
// 1. 변수 temp_html은 남기기 버튼을 눌렀을 때 db에서 데이터를 불러와 화면에 출력해주는 코드를 변수에 저장한 것이다.
// 2. <button를 사용하여
// 지우기 버튼을 클릭하면 delete_comment(${num})가 실행되게 하였다.
// 3. 매개변수에 (${num})를 넣어준 이유는 지우기 버튼을 눌렀을 때 그 번호의 데이터를 지우기 위해 넣어주었다.
let temp_html = ` <div class="card-body">
 <blockquote class="blockquote mb-0">
    <div class="btn">
      <footer disabled id="name" class="text1">${names}  </footer>
      <buttontoken interpolation">${num})" class="button2">지우기</button>
    </div>
      <footer disabled class="blockquote-footer" id="comment">${comment}</footer>
   </blockquote>
 </div>`
$("#comment-list").append(temp_html);

튜터님에게 질문한 내용 정리

1. 백엔드 코드와 ajax 코드가 이해가 안되서 그러는데 제가 정리한 것이 맞을까요?
2. 수정 버튼을 추가하려고 했는데 어려워서 포기했다. 하지만 전체적인 틀은 알고 싶은데 설명해 주실 수 있나요?

• api를 만들때 ajax코드를 써서 python으로 보내게 되면 http라는 프로토콜(약속된 규격)을 통해서 서버로 보내게 됨
• 약속된 규격이란 ?

function delete_comment(num) {
            $.ajax({
                type: "POST",
                url: "/miniproject/delete", 

예를 들어서 위 코드에서 type: "POST"를 얘기한다. 상황에 따라서 사용하는 http가 다르다.
이 코드는 데이터를 삭제해주는 코드이기 때문에 type: “DELETE”를 사용하는게 더 코드에 맞음. 생성할때는 type: "POST" 데이터를 가져올때는 type: "GET" 업데이트는 type: "put", type: "fetch"를 써야함.

• 수정 버튼을 만들어서 기능을 넣으려면 type: "put", type: "fetch" 사용하는 것이 올바르다.
  js에서 수정해준 코드를 db에서 업데이트 코드를 써서 받아온 것을 집어 넣어주면 됨(하지만 이 코드 작성법은 잘 모름 나중에 물어보자!)
• @app.route ("경로를 열어주는 주소 코드", 메소드=["형식"])
  먼저 POST or GET 등을 받아올 주소를 설정하여 경로를 열어줌

@app.route("/miniproject/delete", methods=["POST"])

• python에서 열어준 경로로 작업한 js 코드를 python에서 설정한 url 주소로 보냄

function delete_comment(num) {
            $.ajax({
                type: "POST",
                url: "/miniproject/delete", 

• api 설계를 이렇게 하라는 세계적인 기준이 있는데 rest api라고 부름 (현업에서 많이 사용함)
  현업에서는 delete를 일부러 안쓰는 경우에는 무엇이 삭제됐는지 몰라 나중에 알아보려고 fetch를 쓰는 경우도 많다고 한다. (rest api가 아니라는 뜻)