doeunn.log

🚀 React-Query의 useInfiniteQuery로 무한 스크롤 기능 구현 이번 글에서는 무한 스크롤 기능을 구현해 보려고 합니다. 무한 스크롤은 페이지네이션을 위한 api를 통해 page와 관련된 파라미터를 연속적으로 넘기면서 계속 데이터를 받아오고 이어서 화면에 보여주는 로직으로 작동되게 됩니다. 우선 React-Query 공식 문서에서 useInfiniteQuery 부분을 살펴보면서 정리해봅시다. Infinite Queries | TanStack Query Docs Rendering lists that can additively "load more" data onto an existing set of data or "infinite scroll" is also a very common UI ..

🚀 React-Query로 검색 기능 구현 처음에 구현을 했을 때는 처음 검색은 되는데, 이후에 다른 검색어로는 검색 결과가 제대로 받아지지 않았었습니다. 그 해결방법으로 쿼리 키를 하나 더 사용하는 방법을 이용했습니다. 📜 Hooks/Queries/get-search.js 파일 const getSearch = async params => { const res = await MovieApi.getSearch(params) return res.data } const useGetSearch = params => { const { data, error, status, isLoading } = useQuery( [QUERY_KEY.GET_SEARCH, params.title], () => getSearch(pa..

🚀 영화 목록 조회 프로젝트를 회고 하기 전에 본 프로젝트는 코리아 it 학원에서 프론트엔드 수업을 하며 과제로 나왔던 주제입니다. 저 포함 4명의 팀원들과 함께 진행했으며, 이번 회고 시리즈에서는 제가 한 부분과 다른 분께서 했지만 다시 정리해 보면 좋을 내용들을 포함해 보려고 합니다 :) 프로젝트 설명 영화 트레일러 오픈 API를 활용한 영화 목록 조회 웹 사이트입니다. 기능 구현 사항 react-query를 사용하여 데이터를 캐싱 로딩 중에는 skeleton UI를 나타낼 것 목록을 불러올 때는 react-query의 useInfinitieQuery를 사용하여 무한 스크롤링으로 불러올 것 페이지 리스트 페이지 각 영화의 평점 및 짧은 미리보기(소개)가 나타나야 함 미리보기는 길이가 길다면 특정 글자..