↓↓↓↓이 프로젝트의 전체 코드는 GitHub에서 확인하실 수 있습니다.↓↓↓↓https://github.com/GangHyun95/youtube GitHub - GangHyun95/youtube: with typescriptwith typescript. Contribute to GangHyun95/youtube development by creating an account on GitHub.github.com 프로젝트에서 VideoDetail 페이지로 이동할 때 useNavigate를 통해 데이터를 전달하는 방식을 사용했었는데요.VideoCard와 RelatedVideoList에서 사용하는 데이터의 출처가 다르다 보니 문제가 발생했습니다.이번 포스팅에서는 이 문제를 해결하는 과정과 VideoCard에..

저번 포스팅에서는 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({ ..

이번 포스팅에서는 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 { ..

이번 포스팅에서는 searchHeader에서 음성을 통한 검색 기능을 추가한 내용을 작성하겠습니다.사용자가 음성 버튼을 누르면 모달이 뜨고, 음성 인식이 활성화되어 입력된 음성을 검색어로 처리합니다.1. SearchHeader의 음성 명령 처리 함수searchHeader 컴포넌트에서는 음성 명령을 처리하는 handleVoiceCommand 함수를 추가했습니다.이 함수는 사용자가 음성으로 입력한 명령을 받아 검색 결과 페이지로 이동시킵니다.const handleVoiceCommand = (command: string) => { setText(command); navigate(`/videos/${command}`);};2. Modal 컴포넌트에서 음성 인식 처리Modal 컴포넌트는 사용자가 음성 ..