Ajax/JQuery | 좋아요 기능

서버

• 우선 서버 쪽 기능을 먼저 생각해봅시다. 하트를 누르면 1) 어떤 포스트를 2) 누가 눌렀고 3) 좋아요인지 좋아요 취소인지를 알아야겠죠? 숙제로 만들 다른 반응들(⭐, 👍)을 생각하면 어느 아이콘을 눌렀는지도 알아야겠네요.
• DB에 저장할 때는 1) 누가 2) 어떤 포스트에 3) 어떤 반응을 남겼는지 세 정보만 넣으면 되고, 좋아요인지, 취소인지에 따라 해당 도큐먼트를 insert_one()을 할지 delete_one()을 할지 결정해주어야합니다.

if action_receive =="like":
    db.likes.insert_one(doc)
else:
    db.likes.delete_one(doc)

• 좋아요 컬렉션을 업데이트한 이후에는 해당 포스트에 해당 타입의 반응이 몇 개인지를 세서 보내주어야합니다.

 count = db.likes.count_documents({"post_id": post_id_receive, "type": type_receive})

 

API

user_info = db.users.find_one({"username": payload["id"]})
post_id_receive = request.form["post_id_give"]
type_receive = request.form["type_give"]
action_receive = request.form["action_give"]
doc = {
    "post_id": post_id_receive,
    "username": user_info["username"],
    "type": type_receive
}
if action_receive =="like":
    db.likes.insert_one(doc)
else:
    db.likes.delete_one(doc)
count = db.likes.count_documents({"post_id": post_id_receive, "type": type_receive})
return jsonify({"result": "success", 'msg': 'updated', "count": count})

 

클라이언트

• API에서 요구하는 데이터가 사용자 정보, 포스트 아이디, 좋아요/좋아요 취소, 아이콘 종류입니다.
• 여기에서 하트를 누른 사람의 정보는 로그인 정보에서 받아왔으므로 나머지 3개만 데이터로 보내주면 됩니다.
• 좋아요인지, 좋아요 취소인지는 아이콘의 클래스가 fa-heart인지 fa-heart-o인지로 알 수 있습니다.
• 업데이트에 성공하면 아이콘의 클래스를 바꾸고 좋아요 숫자도 업데이트해줍니다.

function toggle_like(post_id, type) {
    console.log(post_id, type)
    let $a_like = $(`#${post_id} a[aria-label='heart']`)
    let $i_like = $a_like.find("i")
    if ($i_like.hasClass("fa-heart")) {
        $.ajax({
            type: "POST",
            url: "/update_like",
            data: {
                post_id_give: post_id,
                type_give: type,
                action_give: "unlike"
            },
            success: function (response) {
                console.log("unlike")
                $i_like.addClass("fa-heart-o").removeClass("fa-heart")
                $a_like.find("span.like-num").text(response["count"])
            }
        })
    } else {
        $.ajax({
            type: "POST",
            url: "/update_like",
            data: {
                post_id_give: post_id,
                type_give: type,
                action_give: "like"
            },
            success: function (response) {
                console.log("like")
                $i_like.addClass("fa-heart").removeClass("fa-heart-o")
                $a_like.find("span.like-num").text(response["count"])
            }
        })

    }
}

 

좋아요 숫자 표시하기

• 우선 서버에서 포스트 목록을 보내줄 때 그 포스트에 달린 하트가 몇 개인지, 내가 단 하트도 있는지 같이 세어 보내줍니다.

for post in posts:
    post["_id"] = str(post["_id"])
    post["count_heart"] = db.likes.count_documents({"post_id": post["_id"], "type": "heart"})
    post["heart_by_me"] = bool(db.likes.find_one({"post_id": post["_id"], "type": "heart", "username": payload['id']}))

• 클라이언트에서는 이 정보를 받아 찬 하트("fa-heart")를 보여줄 것인지, 빈 하트("fa-heart-o")를 보여줄 것인지 결정합니다.

let class_heart = ""
if (post["heart_by_me"]) {
    class_heart = "fa-heart"
} else {
    class_heart = "fa-heart-o"
}

• 이것을 '조건부 삼항 연산자(ternary operator)'를 쓰면 한 줄로 나타낼 수 있어요!

let class_heart = post['heart_by_me'] ? "fa-heart": "fa-heart-o"

• 이 정보를 html_temp를 만들 때 하트 개수와 함께 넣어주면 끝!

<span class="icon is-small"><i class="fa ${class_heart}" aria-hidden="true"></i></span>
&nbsp;
<span class="like-num">${post["count_heart"]}</span>

 

좋아요 숫자도 형식을 조금 바꿔볼까요?

• 우선 10,000개가 넘으면 '12k'처럼 정수+k 형식으로 만들어줍니다.
• 500개가 넘으면 '0.5k'처럼 소숫점 아래 한 자리 수에서 반올림해줍니다.
• 좋아요 수가 0개일 때는 숫자를 적지 않습니다.
• 작은 숫자는 그대로 적습니다.

function num2str(count) {
    if (count > 10000) {
        return parseInt(count / 1000) + "k"
    }
    if (count > 500) {
        return parseInt(count / 100) / 10 + "k"
    }
    if (count == 0) {
        return ""
    }
    return count
}

• get_posts()와 toggle_like() 안에 넣어줍니다.

// get_posts()
<span class="icon is-small"><i class="fa ${class_heart}" aria-hidden="true"></i></span>
&nbsp;
<span class="like-num">${num2str(post["count_heart"])}</span>

// toggle_like()
$a_like.find("span.like-num").text(num2str(response["count"]))

 

JS 파일 분리하기

• 여러 페이지에 걸쳐 쓰이는 CSS 내용을 mystyle.css 파일에 적어 공유할 수 있듯, 자바스크립트 코드도 파일을 분리하여 다른 html에서 임포트해올 수 있습니다.
• 포스팅 관련 함수들은 프로필 페이지에서도 쓰이므로 JS 파일로 분리하여봅시다.
• static 폴더 안에 myjs.js 파일을 만들고 함수들을 복사해 넣습니다.
• HTML 안에는 아래와 같이 임포트해옵니다.

<script src="{{ url_for('static', filename='myjs.js') }}"></script>