Youtube

(제목을 클릭하면 사이트로 이동)

유튜브 클론코딩

📝프로젝트 정보

💡 개발기간

• 2023.02.28 ~ 2023.03.28
  
  

🔨 프로젝트에 사용된 기술

📎 홈페이지 구성

• Home

• Video Detail Page

  
  

🎫 실행화면

🔎 핵심 기능보기 🔎

🔑 실제 API 사용

재사용성, 유지보수를 위해 네트워크통신은 api폴더에 보관/=> 가져와 컴포넌트에서 사용

youtube.js 에서 class를 이용 프라이빗함수 생성

//검색 키워드가 있으면 검색관한 데이터, 아니면 인기동영상표시
  async search(keyword) {
    return keyword ? this.#searchByKeyword(keyword) : this.#mostPopular();
  }

`YotubeApiContext.jsx`;

// const client = new FakeYoutubeClient();
const client = new YoutubeClient();
const youtube = new Youtube(client);

fakeYoutubeClient.js 에서는 postman에서 받아온 데이터를 복사한 json파일을 생성/ =>가져와 사용 YoutubeClient.js 실제 youtube api를 이용 Videos component에서는 Contextapi로부터 공유받은 인스턴스를 가져와 search함수 사용

`Videos.jsx`;

const { keyword } = useParams();
const { youtube } = useYoutubeApi();
const {
  isLoading,
  error,
  data: videos,
} = useQuery(["videos", keyword], () => youtube.search(keyword), {
  staleTime: 1000 * 60 * 1,
});