Dev log (3) 썸네일형 리스트형 data-* 속성: HTML에서 사용자 정의 데이터 다루기 1. data-* 속성 소개HTML에서 data-* 속성은 사용자 정의 데이터를 HTML 요소에 저장할 수 있는 방법을 제공합니다. 이는 HTML의 표준 속성으로, JavaScript와 연동하여 동적인 웹 애플리케이션을 개발하는 데 유용합니다. data-* 속성은 HTML에서 데이터를 보관하고, 자바스크립트를 통해 이를 쉽게 가져오고 처리할 수 있도록 도와줍니다.2. data-* 속성 기본 사용법data-* 속성은 data-로 시작하는 이름을 가진 속성을 정의합니다. 여기서 *는 개발자가 원하는 이름을 자유롭게 정할 수 있습니다. 예를 들어, data-user-id, data-product-name과 같이 다양한 형식으로 이름을 지을 수 있습니다. 사용자 정보 위 코드에서 요소는 data-user-i.. React Query를 활용한 실시간 리뷰 수 업데이트 애플리케이션에서 데이터를 비동기로 처리할 때 React Query는 매우 유용한 도구입니다. 하지만 데이터를 업데이트하거나 갱신할 때 실시간 반영이 되지 않거나 예상한 대로 작동하지 않는 경우가 종종 발생합니다. 이번 글에서는 React Query를 사용하여 상품 목록에서 리뷰 수를 실시간으로 업데이트하는 방법을 소개하겠습니다.문제 상황최근에 상품 목록 페이지를 useInfiniteQuery로 구현하고 있었습니다. 각 상품에는 리뷰 수를 보여주고 있었는데, 리뷰를 추가한 후 상품 목록의 리뷰 수가 바로 갱신되지 않는 문제가 발생했습니다. 리뷰가 추가되었음에도 불구하고 새로고침을 해야만 리뷰 수가 반영되었고, 이는 사용자 경험을 저하시켰습니다.이 문제를 해결하려면 어떻게 해야 할까요?문제 원인 분석상품 목.. export default와 중괄호 {} export const GET_PRODUCT = gql` query GET_PRODUCT($id: string) { id imageUrl price title description createAt } `; const GET_PRODUCTS = gql` query GET_PRODUCTS { id imageUrl price title description createAt } `; export default GET_PRODUCTS; 맞게 쳤는데 에러는 안 나고 데이터는 가져오지 못해서 이틀 동안 씨름한 문제였다 알고 보니 import 할 때 중괄호 여부였다 export default로 내보낸 것은 중괄호 없이 가져와야 하고 export로 내보낸 것은 중괄호가 있어야 한다 문제의 코드다 import Produ.. 이전 1 다음
