저번 포스팅에서는 YoutubeApi의 getPopularVideos 나 getVideosByKeyword 메서드에서 channelsResponse 데이터를 모두 불러온 뒤 채널 썸네일만 따로 추출해 리턴하는 방식을 사용했지만, 구독자 수나 relatedPlaylist와 같은 정보도 필요해지면서 데이터를 따로 추출해서 리턴하기 보다는 불러온 채널에 관한 정보를 그대로 리턴하는 방식으로 변경했습니다.이 방식이 어차피 데이터를 다 불러와야 하므로 성능 면에서도 별 차이가 없을 것 같고, 하루 할당량 소모량도 동일해서 더 나을 것이라고 판단했습니다. 그리고 VideoDetail 컴포넌트의 구현 과정에서 CommentList에 무한 스크롤 기능이 필요하여서 구현하였습니다.구현하고 보니 Videos 컴포넌트에서 ..

기존에 Youtube Data API에서 비디오 데이터를 가져올 때, videos API를 통해 요청하면 채널 썸네일 URL이 제공되지 않았습니다.그래서 비디오 데이터에서 채널 ID를 추출한 후 별도로 채널 정보를 요청하여 썸네일 URL을 가져오는 로직을 구현했습니다.또한, VideoDetail 라우터를 설정하여 비디오 카드를 클릭했을 때 해당 상세 페이지로 이동하며, 데이터를 함께 전달하는 기능을 구현했습니다.1. youtubeAPI 수정Youtube Data API 하루 할당량을 조금이라도 아끼려고, new Set()을 사용하여 중복된 채널 ID를 제거 한 후 채널 정보를 요청했습니다.import axios from "axios";const YoutubeApi = { httpClient: axi..

프로젝트를 진행하면서, 페이지네이션 같은 기능이 필요하다고 생각했습니다.유튜브 사이트에서도 무한 스크롤을 통해 데이터를 로드하고 있어, 저도 무한 스크롤을 적용해보기로 했습니다.이를 위해 useInfiniteQuery와 IntersectionObserver를 사용하여 무한 스크롤 기능을 구현했습니다.1. YoutubeApi 변경YouTube Data API는 많은 데이터를 페이지 단위로 나눠서 제공하는데, 이 때 사용되는 것이 pageToken과 nextPageToken입니다.이 매개변수들을 사용하면, API 요청 시 특정 페이지의 데이터를 가져올 수 있습니다.import axios from "axios";const YoutubeApi = { httpClient: axios.create({ ..

https://tanstack.com/query/v4/docs/framework/react/reference/useInfiniteQuery useInfiniteQuery | TanStack Query React DocsThis ad helps to keep us from burning out and rage-quitting OSS just *that* much more, so chill. 😉tanstack.comuseInfiniteQuery는 React Query에서 제공하는 훅 중 하나로, 페이징된 데이터를 손쉽게 가져오고 관리할 수 있게 해줍니다.일반적인 useQuery와 유사하지만, 여러 페이지의 데이터를 관리할 수 있는 추가 기능을 제공합니다.이를 활용하면 무한 스크롤과 같은 기능을 쉽게 구현할..

최근에 개인 프로젝트로 유튜브 클론 코딩을 진행하면서 무한 스크롤 기능을 추가하고 싶었습니다.검색을 통해 다양한 무한 스크롤을 구현한 코드를 살펴본 결과, 대부분의 코드에서 IntersectionObserver와 useRef를 활용한 방식을 사용하고 있었습니다.이번 포스팅에서는 useRef에 대해 작성해보도록 하겠습니다.1. useRef란?useRef는 리액트(React)에서 제공하는 훅으로, 다음과 같은 역할을 합니다DOM 요소 참조: useRef를 사용하면 특정 DOM 요소를 직접 참조할 수 있습니다.값 유지: 컴포넌트가 리렌더링되더라도 useRef로 저장한 값은 초기화되지 않고 유지됩니다. 이는 state와 달리 값이 변경되더라도 컴포넌트를 리렌더링하지 않기 때문에 불필요한 렌더링을 방지할 수 있습..

이번 포스팅에서는 React Query와 Axios를 활용해 유튜브 API로부터 데이터를 받아와 비디오 리스트와 비디오 카드를 구현하는 과정을 작성하였습니다.1. React Query 설정 및 클라이언트 구성React Query를 사용하기 위해서 QueryClient를 생성하고, QueryClientProvider로 애플리케이션을 감싸서 클라이언트를 전역에서 사용할 수 있도록 설정하였습니다.import { Outlet } from "react-router-dom";import SearchHeader from "./components/SearchHeader/SearchHeader";import { DarkModeProvider } from "./context/DarkModeContext";import { ..