미니프로젝트(2)

팀원과의 협업으로 미니프로젝트를 진행한지 2일차다.

방명록의 db를 연결하는데 팀원분이 mongodb에 데이터가 제대로 들어오지 않아 원인을 찾아 헤맸다.

알고보니 mongodbclient주소를 본인의 것이 아닌 다른사람의 것을 쓰고 있던 것이어서 주소를 바꿔주자 제대로 작동했다. 

그 후, 방명록에 남긴 댓글이 mongodb에 들어가게 하는 작업을 진행했다.

그런데, 여기서도 또 오류가 났다.

대충 해석하면 함수가 NONE이거나 RETURN없이 끝났다는 건데 저렇게 오류는 띄우면서 mongodb에 데이터는 잘 들어갔다. 

오류 코드를 구글링 해봤는데 많은 사람들이 return jsonify()하라고 글을 쓰거나 답변을 했다. 

그런데 문제는 이걸 어디에 쓰느냐가 전혀 감이 잡히지 않았다.

오류문에서 친절하게 'comment_post1'에서 오류가 났다고 알려주는데도 여기저기에 함수를 넣어보다가 답을 찾았다. 

@app.route("/comments_SW", methods=["POST"])
def comment_post1():
    comment_receive = request.form['comment_give']
    doc = {
        'comment' : comment_receive,
    }
    db.comments_SW.insert_one(doc)

    return jsonify({'msg': '작성 완료!'})

comment_post1()아래에 return jsonify()를 넣어주니 오류가 나지 않았다.

이런 오류가 난 원인을 추측해보았는데,

아마 이 녀석 때문에 오류가 난 듯 했다.

처음 코드를 만들때 자바스크립트의 POST부분은 ajax코드를 손으로 쓰기 귀찮아 본디 다른 프로젝트에 붙어있던 ajax코드를 통째로 복사해서 가져와 경로만 대강 바꿔서 썼다.

그리고 문제의 파이썬 부분에서는 일단 mongdb에 데이터를 넣어보는것이 목적이라 파이썬에서 mongdb에 데이터를 저장하는 코드 외에 다른것들을 다 지워버렸다.

그 과정에서 return jsonify()도 지워버렸는데, return jsonify()가 없어지니 ajax의 저 부분이 제대로 값을 받지 못해서 에러가 난 듯 하다.

어쨌든 오류를 해결하고 난 후, db에서 데이터를 받아와 화면에 나타내는 것은 무난하게 구현했다.

그렇게 일단 완성을 시키고, 팀원분의 요청을 받아 코멘트 삭제버튼도 한번 달아보고 기능도 구현하기로 했다.

 

그리고 당연하게도 오류가 떴다. 아니, 작동을 하지 않았다.

버튼에 onclick="()"까지 달아 함수를 넣는 것까지는 좋았는데, 버튼을 눌러도 아무런 동작을 하지 않았다.

원인을 생각해 보았는데, 나는 코멘트가 달리는 부분에 ID=" "를 달아 comment의 경로를 잡을 생각이었다. 그런데 이 방법으로는 mongodb의 delete코드가 무엇을 삭제해야하는지 경로를 잡지 못해 동작하지 않는 것 같았다.

그래서 이전 강의 자료를 뒤져보다가 방법을 찾았다.

<button onclick="comment_delete('${comment}')">삭제</button>

버튼에 들어가는 onclick에 이런식으로 comment경로를 직접 넣어주고 스크립트 부분의 onclick 함수에도 comment를 직접 넣어주었다.

function comment_delete(comment){
    $.ajax({
        type: 'POST',
        url: '/delete_SW',
        data: {comment_give:comment},
        success: function (response) {
            alert(response['msg'])
            window.location.reload()
        }
        });
}

이렇게 수정했더니 삭제버튼이 잘 작동했다.

삭제버튼의 위치에 대해서 팀원분과의 이슈가 좀 있었는데 팀원분이 잘 해결해주셨다.