[TIL]내이배움캠프 - DRF + React 좋아요 기능

'좋아요' 기능을 구현하는데 문제가 발생했다.

 

 좋아요 버튼이 잘 구동 됐지만 새로고침시 ‘좋아요’ 부분이 다시 초기화된다.

이미 좋아요 버튼을 눌렀을 경우 좋아요 취소가 보여 줘야 하는데 그래로 좋아요 버튼만 보이게 된다.

 

 그래서 생각한 방법이 좋아요 버튼을 클릭 시 POST로 server에 API 요청을 보내면 데이터베이스에 저장이 되고 이 데이터 값을 게시물 정보와 함께 보내 주고 그 정보를 토대로 ‘좋아요 버튼’을 보여 줄지 ‘좋아요 취소’ 버튼을 보여준다.

 

"likey_user_id": [likey.id for likey in article.likey.all()]

이런 식으로 저장된 유저의 정보를 보여 주기로 했다.

 

그런데 위의 코드에서는 ‘좋아요’를 클릭한 모든 유저의 PK값을 반환하는데 너무 비효율 적이라

"likey_user_id": [likey.id for likey in article.likey.all() if likey.id == request.user.id ]

이런 식으로 Response 해서 보냈다 

 

 하지만 postmen에서는 제대로 출력이 가능하지만 Frontend에서는 내가 원하는 값이 출력이 불가능했다.

filter도 사용하고 get도 사용해 봤지만 내가 속성값을 잘 못줬는지 해결이 안 됐다.

 

 

어쩔 수 없이 React frontend에서 JWT 토큰에 들어있는 user_id 값을 통해 비교해서 좋아요 버튼이 클릭 가능하게 구현했다.

const accessToken = localStorage.getItem('accessToken')
        if (accessToken) {
            const decodedToken = jwtDecode(accessToken)
            setUserId(decodedToken.user_id)
        }

 

Frontend  Button

<div className="article-button">
		{userId !== null &&
    (article.likey_user_id.includes(userId) ? (
        <button onClick={() => UnlikeButton(article.id)}> like ♥</button>
    ) : (
        <button onClick={() => likeButton(article.id)}>Unlike ♡</button>
    ))}
</div>

이런 식으로 표현 했다.

 

 

Article이 역순으로 출력이 되지 않아 server에서 역순으로 데이터를 가져왔다.

articles = get_list_or_404(Article.objects.order_by('-id'))

 

---

마무리

 

 아직 React 문법 작성이 너무 서투르다 그래도 어떤 역할을 하는지는 간단하게 이해는 가고 있다.

나보다 잘하는 분들이 너무 많아 자괴감이 들기도 한다. 하지만 그 자괴감을 원동력 삼아 나를 더욱 발전 시켜나가야겠다고 생각한다.

 

'공부는 마라톤이다’

 

 튜터님께서 이런 말을 해주셨다. 그분이 1년 뒤에 나보다 잘할 수도 못할 수도 있고 그런 내가 꾸준하게 공부를 했냐 못했냐를 따지는 것이지 꾸준하게 만 한다면 될 거라고

 

 

어제 보다 오늘 더 발전하고 오늘보다 내일 더 발전하는 나를 위해 꾸준히 해보자