[내일배움캠프_TIL]2023.03.16_4일차

Today

#🔛미니프로젝트

#🔛웹개발 종합반 재수강

---

📝오늘공부한 내용

- 미니프로젝트 진행

-좋아요 기능 구현

<!--좋아요/좋아요 취소 버튼-->
<button class='like' id="like-button" onclick="checkResult()">👍좋아요</button>
  <div id="likeCount">
  <p>0</p>
  </div>
  <button class='unlike' id="unlike-button" onclick="unlike()">😢좋아요 취소</button>

# 좋아요 수 저장
@app.route("/like", methods=["POST"])
def member_post():
    like1_receive = request.form['like1_give']
    user_ip = request.remote_addr
    find_ip = db.ip_address.find_one({'like_user':like1_receive,'ip_address':user_ip})
    if find_ip:
         return jsonify({'msg':'동일 ip에서 좋아요는 1번만 가능합니다!'})
    else:
        doc = {
            'like_user':like1_receive,
            "ip_address":user_ip
        }
        db.ip_address.insert_one(doc)
        db.likes.update_one({'user':like1_receive},{'$inc':{'count':1}})
        return jsonify({'msg':'좋아요 완료!'})
        
@app.route("/unlike", methods=["POST"])
def hate():
    hate_receive = request.form['hate_give']
    user_ip = request.remote_addr
    find_ip = db.ip_address.find_one({'like_user':hate_receive,'ip_address':user_ip})
    if find_ip:
        db.ip_address.delete_one({'like_user':hate_receive,'ip_address':user_ip})
        db.likes.update_one({'user':hate_receive},{'$inc':{'count':-1}})
        return jsonify({'msg':'좋아요 취소 완료!'})
    else:
        return jsonify({'msg':'좋아요를 누르지 않으셨습니다!'})

#좋아요 수 찾기    
@app.route("/like", methods=["GET"])
def like_get():
    like1_count = list(db.likes.find({}, {'_id':False}))
    return jsonify({'result': like1_count})

//함수
function checkResult1() {
    var button = document.getElementById("like-button1");
    if (button.innerHTML === "👍좋아요") {
        button.innerHTML = "🤍";
        $('#like-button1').css('background-color', 'rgb(219,53,69)')
        $('#like-button1').css('color', 'white')
        $('#like-button1').css('width', '50px')
    } else {
        button.innerHTML = "🤍";
        $('#like-button1').css('background-color', 'rgb(219,53,69)')
        $('#like-button1').css('color', 'white')
        $('#like-button1').css('width', '50px')
    }
    let like = 'user1'

    let formData = new FormData()
    formData.append("like1_give", like)

    fetch('/like', { method: "POST", body: formData }).then((res) => res.json()).then((data) => {
        alert(data['msg'])
        show_like()
    })
    
}


function show_like() {
    fetch('/like').then((res) => res.json()).then((data) => {
        let result = data['result']
        
        result.forEach((a) => {
            let like = a['count']
            let user = a['user']
            if(user=='user1'){
                $('#likeCount1').text(like)
            }else if(user=='user2'){
                $('#likeCount2').text(like)
            }else{
                $('#likeCount3').text(like)
            }

        })
    })
        
}

---

😭어려웠던 내용

• git에서 push/pull은 할 때마다 너무 어렵다ㅜㅜ 그리고 좋아요 버튼 구현은 그냥 보는 것도 어려웠다...

---

🔎궁금한 내용

• python으로 db에 저장하고 다시 받는 과정을 더 더 많이 해보고 연습해야겠다.

---

🥲느낀점

포기했던 좋아요 버튼 구현을 팀원분이 해주셨다ㅜㅜ 그것도 완전 빠르게 구현해주시고 거기에 좋아요 취소 버튼까지ㅜㅜ 내가 한 건 아니지만 진짜 속이 다 후련했다...너무 감사합니다👍 해주신 코드를 막상 보니까 그렇게 복잡하지는 않아서 나는 왜 저렇게 못했지 싶었다......다음에 비슷한 기능을 구현할 일이 생긴다면 나도 멋지게 구현하기 위해서 잘 이해해둬야겠다.이번에는 뼈대만 작업했지만 다음에는 꼭! 살까지 내가 직접 붙혀야지!!