DRF APIView로 좋아요 기능 구현_프론트엔드

역시나 아직 미천한 실력이지만 힘겹게 완성한 좋아요 기능입니다.

백엔드에서 정보를 주고 받아 이를 프론트에서 표현하는 방법이 가장 어려웠던 것 같습니다.

 

icon 소스를 무료로 제공해주는 사이트에서 하트 아이콘 하나 받아오시고 Javascript로 async function으로 백엔드에서 API 통신으로 DB 데이터를 받아올 수 있도록 함수를 짜도록 합니다.

 

viewLike()에서는 해당 유저가 좋아요를 눌렀었는지 확인하고 눌렀었다면, 하트가 빨간색으로 나올 수 있도록 해주어야 하기 때문에 if문을 사용하여 liked.likes(좋아요를 누른 유저들) 중에 me(해당 유저)가 포함 되어 있다면 classList에 빨간 하트를 추가해주어 눌린것으로 표현해주면 되고 해당 유저가 포함되어 있지 않다면 classList에서 remove 되도록 설정

 

카운트는 innerText로 쉽게 표현해 줄 수 있습니다.

// like.js
// 좋아요 정보 확인
async function viewLike() {
    // 좋아요 여부
    const liked = await getLike()
    const me = await getName()
    const like_button = document.getElementById("like_button")
    if(liked.likes.includes(me)) {
        like_button.classList.add('like_heart')
    }else{
        like_button.classList.remove('like_heart')
    }
    // 좋아요 카운트
    const like_count = document.getElementById("like_count")
    like_count.innerText = "좋아요 " + liked.like_count + "개"
}

 

위에서는 페이지를 열었을 때 즉시 데이터를 받아오지만 좋아요 버튼을 클릭하는 경우에는 데이터를 넘겨주기는 하지만 새로고침을 해주지 않으면 카운트 숫자가 올라가지 않기 때문에 백에서 받아온 데이터가 아닌 innerText로 +1 또는 -1만 해주어 카운트가 변경될 수 있게 해주었습니다. 백에서 데이터를 받아오기 위해서는 reload를 해야 하기 때문에 고민하다가 이렇게 구현하였습니다.

// like.js
// 좋아요 기능
async function likePost() {
    const liked = await getLike()
    const like_button = document.getElementById("like_button")
    const like_count = document.getElementById("like_count")
    var count = parseInt(liked.like_count)
    num1 = parseInt(1)
    if(like_button.classList == 'heart fa-solid fa-heart') {
        const response = await postLike()
        like_button.classList.add('like_heart')
        like_count.innerText = "좋아요 " + (count + num1) + "개"
    }else{
        const response = await postLike()
        like_button.classList.remove('like_heart')
        like_count.innerText = "좋아요 " + (count - num1) + "개"
    }
}

 

혹시 좋아요를 구현하는 더 좋은 방법이 있다면 댓글에 공유 부탁드려요~ㅎㅎ