Weekly I learned : 전에 배운 코드 활용할 수 있다.

3/27(월) ~ 4/1(토) I learned.

 

7개월 전일까?  꽤 오래 전에 복붙했던 코드이지만 다시 이해하고 활용해서 나만의 코딩을 할 수 있다는 것을 알게 되었다.

만든 미니프로젝트는 '나만의 지니차트 만들기' 이다.  

배포까지 완료했다. nohup을 써서 내가 pc를 꺼도 계속 돌아가게 했다. 

일단 url은 http://54.180.120.98/ 이다. 

 

어떻게 여기까지 왔나 돌아보려고 한다. 일단 첫 시도는 실패했다. 팀 프로젝트 과제 제출기한이 3/31(금) 21:50 이었다. 기한 내 완성을 실패했다. 미완성작을 제출해야만 했다. 

 

너무 아쉬워서 4/2(일) 에 다시 나혼자 파고들었다. 그 결과가 위의 URL이다. 원하는 지점까지 구현 성공했다. 노래 20개를 올리고 그 노래마다 회원가입한 사람들이 좋아요를 누를 수 있게 만드는 것이다. 좋아요 개수는 물론 누적되어 표시되고 내가 누른 좋아요를 취소할 수도 있다. 

 

과정에서 골치아픈 지점들은 많았다. 그중 가장 컸던게 좋아요 기능 구현이었다. 누가 어떤 노래에 좋아요를 눌렀는지를  DB와 연결해서 구현해야 했다. 좋아요 개수도 구현해야 했고, 현재 로그인한 사용자가 각각의 노래에 좋아요를 눌렀는지 여부도 구분해서 구현해야 했다. 좋아요를 눌렀다면 꽉찬 하트를, 누르지 않았다면 빈 하트를 넣어야 하니까.

 

이 모든것들이 뒤엉켜서 내가 예전에 복붙했던 코드인데도 재활용이 어려웠다. 결론은 모든 것을 이해하고 구현할 수 있었다. 이해 안되던 코드들이 있었는데 샤워하는 중에 그 부분이 떠올랐고 열심히 머릿속으로 떠올려 어느정도 이해했다. 신기한 경험이었다. 딱 그 부분의 코드만 기념으로 기록해 보기로 한다. 

app.py

@app.route('/update_like222', methods=['POST'])
def update_like222():
    token_receive = request.cookies.get('mytoken')
    try:
        payload = jwt.decode(token_receive, SECRET_KEY, algorithms=['HS256'])

        user_info = db.users.find_one({"username": payload["id"]})
        rank_receive = request.form["rank_give"]  
        type_receive = request.form["type_give"]  
        action_receive = request.form["action_give"]  
        doc = {
            "rank": rank_receive,      #어떤 노래에 대한 좋아요인지.
            "username": user_info["username"],   # 누가 좋아요를 눌렀는지
            "type": type_receive   # 무슨 type의 좋아요인지: 하트인지 다른 무엇인지. 현재 하트만 있으므로 불필요한 코드임.
        }
        if action_receive == "like":
            db.likes222.insert_one(doc)  # 만약 좋아요를 새로 누른 거면 likes222 콜렉션에 좋아요 데이터 하나생성
        else:
            db.likes222.delete_one(doc)  # 만약 전에 눌렀던 좋아요를 취소한 거면 likes222 콜렉션에서 좋아요 데이터 하나삭제
        count = db.likes222.count_documents({"rank": rank_receive, "type": type_receive})
        return jsonify({"result": "success", 'msg': 'updated', "count": count})
    except (jwt.ExpiredSignatureError, jwt.exceptions.DecodeError):
        return redirect(url_for("home"))

 

 

myjs.js

function toggle_like222(rank, type) {
    console.log(rank, type)
    let $a_like = $(`#${rank} a[aria-label  ='${type}']`)
    console.log($a_like);

    let $i_like = $a_like.find("i")
    let class_s = {"heart":"fa-heart"}
    let class_o = {"heart":"fa-heart-o" }

    if ($i_like.hasClass(class_s[type])) {
        $.ajax({
            type: "POST",
            url: "/update_like222",
            data: {
                rank_give: rank,  // 무슨 노래에 좋아요를 누르거나 취소했는지 노래마다 있는 rank로 구분해서 서버로 보내줌.
                type_give: type,  // 누른게 하트인지 다른건지 종류를 보내줌. 실제론 하트만 있으므로 불필요한 코드임.
                action_give: "unlike"  // 좋아요를 누른건지 원래 눌렀었던 좋아요를 취소한건지 보내줌.
            },
            async: false,
            success: function (response) {
                $i_like.addClass(class_o[type]).removeClass(class_s[type])  //  꽉찬하트 css를 없애고 빈하트 css추가
                $a_like.find("span.like-num").text(num2str(response["count"]))  // 서버에서 좋아요 개수를 받아서 표시함.
            }
        })
    } else {
        $.ajax({
            type: "POST",
            url: "/update_like222",
            data: {
                rank_give: rank,
                type_give: type,
                action_give: "like"
            },
            async: false,

            success: function (response) {
                $i_like.addClass(class_s[type]).removeClass(class_o[type])
                $a_like.find("span.like-num").text(num2str(response["count"]))
            }
        })

    }
}

 

여기까지 할 수 있어서 즐거웠고 다행이다.