728x90
반응형
Today I Learned
어떤 문제가 있었는지
로그인되어있을 경우 게시글을 불러왔을때 좋아요 여부를 확인해서
게시글 좋아요표시 여부를 정하고 싶었다.
내가 시도해 본 것들 + 어떻게 해결 했는지
백엔드에서 데이터를 보내줄때 likes에서 해당 글 좋아요 리스트를 보내주게 해놓고
프론트에서는 로그인했을 경우 payload에 로그인 유저 정보를 저장한다.
// 게시글 상세 페이지 데이터 GET 요청 (유저 정보 포함)
export async function getProductDetail(PRODUCT_ID) {
// console.log(POSTING_ID)
const url = `${BACK_BASE_URL}/product/${PRODUCT_ID}/`;
const response = await fetch(url, {
method: "GET",
});
if (response.status == 200) {
const response_json = await response.json();
// 로그인 되있다면 payload에서 user_id를 받아 좋아요 여부 확인
if (localStorage.getItem("payload")) {
const payload = JSON.parse(atob(token.split(".")[1]));
const userId = payload.user_id;
response_json.isLiked = response_json.likes.includes(userId);
}
return response_json;
} else {
console.log("잠시 후 다시 시도해주세요");
}
}
그리고 payload가 있다면 해당 유저의 user_id를 확인하고
likes에서 userId의 유무를 response_json.isLiked 에 저장
그리고 페이지에 보여줄 때 좋아요 여부에따라 하트 아이콘을 변경해주면 끝 !
// 로드 시 게시글 상세 내용 + 댓글 가져오기
window.onload = async function PostingDetail() {
const urlParams = new URLSearchParams(window.location.search);
const PRODUCT_ID = urlParams.get('product_id');
const product = await getProductDetail(PRODUCT_ID) /* posting에 게시글 작성 유저 정보도 포함(시리얼라이저) */
const reviews = await getProductReview(PRODUCT_ID) /* posting에 게시글 작성 유저 정보도 포함(시리얼라이저) */
viewProductDetail(product)
viewProductReview(reviews)
console.log(reviews)
// 좋아요 여부에 따라 하트 아이콘 변경
const likeIcon = document.querySelector('#product-like-icon');
if (product.isLiked) {
likeIcon.style.fill = '#ff5b5b'; // 채워진 하트 색상
} else {
likeIcon.style.fill = '#ccc'; // 비어있는 하트 색상
}
}
무엇을 새롭게 배웠는지
필요한 정보가 있으면 백엔드에서 수정하고 프론트에서 보여주는 방식을 정해봤다.
그런데 백엔드에서도 처리할 수 있느 부분이라 어디서 처리해서 가는게 좋을지는 고민해봐야 할 것이다.
백엔드에서 처리하면 서버부담이 그만큼 늘어나고 (사실 이정도로 늘어나나? 싶긴 함)
프론트에서 처리하면 클라이언트의 부담이 늘어난다. 성능이 낮은 컴퓨터에서는 웹 페이지가 뜨는 속도가 느려질 듯
이 부분을 인지하고 코드를 짜는 것이 중요하다고 생각한다
728x90
반응형
