미니프로젝트 - 팀원소개페이지

댓글 관리

백앤드 파트

작업 계획

미니프로젝트 진행중 백앤드 파트를 맡아서 작업 시작!
개발자로서 첫걸음이라 아직은 협업이 어떻게 이루어지는지, 각자의 작업이 어떻게 합쳐지는지 아직 감이 오지 않기 때문에 맡은 기능구현에만 집중
댓글의 기능중 '등록, 삭제, 좋아요' 세 가지 기능 구현 계획

등록

로그인 기능은 구현하지 않았기 때문에 닉네임은 자율적으로 입력가능

 function save_comment() {
            let name = $('#name').val()
            let comment = $('#comment').val()

            $.ajax({
                type: "POST",
                url: "/comments",
                data: {name_give: name, comment_give: comment},
                success: function (response) {
                    alert(response["msg"])
                    window.location.reload()
                }
            });
        }

입력한 name(닉네임)과 comment(댓글)를 db에 저장(html)

@app.route("/comments", methods=["POST"])
def comment_post():
    name_receive = request.form['name_give']
    comment_receive = request.form['comment_give']
    comment_list = list(db.comments.find({}, {'_id': False}))
    count = len(comment_list) + 1

    doc = {
        'num':count,
        'name':name_receive,
        'comment':comment_receive,
        'like':0
    }

    db.comments.insert_one(doc)

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

app.py(py)

---

삭제

작성 순서대로 'num' 지정(그래야 각각 삭제 가능)

        function num_comment(num) {
            $.ajax({
                type: "POST",
                url: "/comments/num",
                data: {num_give: num},
                success: function (response) {
                    alert(response["msg"])
                    window.location.reload()
                }
            });
        }

(html)

@app.route("/comments/num", methods=["POST"])
def comment_num():
    num_receive = request.form['num_give']
    db.comments.delete_one({'num': int(num_receive)})
    return jsonify({'msg': '삭제 완료!'})

(py)

---

좋아요

개인적으로 오늘 가장 힘든 파트, db로 각각 댓글의 번호를 지정해주고 좋아요를 0으로 시작,
한번 눌릴때마다 +1씩 늘어나며 db로 전송함

        function like_comment(like) {
            $.ajax({
                type: "POST",
                url: "/comments/like",
                data: {like_give: like},
                success: function (response) {
                    alert(response["msg"])
                    window.location.reload()
                }
            });
        }

(html)

@app.route("/comments/like", methods=["POST"])
def comment_like():
    like_receive = request.form['like_give']
    like = db.comments.find_one({'num': int(like_receive)})
    db.comments.update_one({'num': int(like_receive)}, {'$set': {'like': int(like['like']) + 1 }})
    return jsonify({'msg': '좋아요!'})

(py)

---

확인작업

제대로 구현되는지 확인

$(document).ready(function () {
            show_comment();
        });

        function show_comment() {
            $.ajax({
                type: 'GET',
                url: '/comments',
                data: {},
                success: function (response) {

                    let rows = response['cmts']
                    for (let i = 0; i < rows.length; i++) {
                        let name = rows[i]['name']
                        let comment = rows[i]['comment']
                        let num = rows[i]['num']
                        let like = rows[i]['like']

                        let temp_html = `<tr>
                                            <th>${name}</th>
                                            <th>${comment}</th>
                                            <th><button onclick="num_comment(${num})">삭제</button></th>
                                            <th><button onclick="like_comment(${num})">좋아요</button></th>
                                         </tr>`

                        $('#comment_list').append(temp_html)
                    }
                }
            });
        }

(html)

@app.route("/comments", methods=["GET"])
def comment_get():
    comment_list = list(db.comments.find({}, {'_id': False}))

    return jsonify({'cmts':comment_list})

(py)

---

작업끝

강의 위주로 복습하며 대부분의 기능들을 구현
아직까지 시작 진행방향이 잘 떠오르지 않아 시작이 오래걸림
매우 짧은 코드는 보고 어설프게라도 해석이 가능한 수준
피나는 노력이 필요....

'좋아요' 기능은 나의 구글링 실력으론 아직은 이해가 안되는 높은 수준의 코딩들만 있어서 팀원들과 머리를 맞대고 고생하며 작성했다 결정적인 오류를 잡아준 튜터님의 도움이 매우 컷지만 내 기준에서는 포기하지않고 이정도로 해낸 것 만으로도 만족스러운 결과물이다