✨Feature/wisdom

[yaejin12]

올라 위즈덤 프로젝트

1.무한스크롤 구현하기

[작업내용] React Query와 Intersection Observer를 활용하여 무한 스크롤 방식으로 quotes 데이터를 가져오고 화면에 렌더링합니다.

• useInfiniteQuery 훅을 사용하여 quotes 데이터를 비동기로 가져왔습니다. limit과 skip 값을 URL 파라미터로 전달하여 필요한 페이지의 데이터를 요청합니다.
• 화면 하단에 ref 속성을 부여한 div 요소가 배치되어 있으며, useInView 훅으로 Intersection Observer가 이 요소를 감지할 때마다 다음 페이지 데이터를 요청합니다.
• getNextPageParam에서 마지막 페이지인 경우 undefined를 반환하여 추가 데이터 요청을 막고, 그렇지 않으면 다음 페이지 번호를 반환하여 요청을 이어갈 수 있습니다.
• 스크롤 위치가 감지되고 데이터가 로딩 중이 아니며 다음 페이지가 존재할 때만 fetchNextPage 함수를 호출하여 추가 데이터를 불러옵니다.
• Throttle을 적용하여 스크롤 이벤트가 연속적으로 발생하더라도 네트워크 요청이 과도하게 발생하지 않도록 제한함으로써 성능을 최적화했습니다.

2.localStorage 활용하여 즐겨찾기에 추가

• 클릭한 ID에 해당하는 데이터를 찾아주는 함수를 구현하여, 아이디가 있는지 여부와 해당하는 Quotes 객체를 반환하도록 작성하였습니다.
• localStorage에 클릭한 데이터가 이미 존재하면 해당 데이터를 삭제하고, 존재하지 않으면 데이터를 추가하는 기능을 구현하였습니다.
• 즐겨찾기 상태에 따라 버튼의 색상을 변경하도록 구현하였으며, some 메서드를 활용하여 클릭한 데이터가 localStorage에 저장되어 있는지 확인한 후, boolean 값을 props로 전달하였습니다.
• 즐겨찾기한 데이터를 별도의 페이지에서 확인할 수 있도록 하였으며, 해당 페이지에서도 즐겨찾기 데이터를 해제할 수 있는 기능을 추가하였습니다.