React에서 YouTube API를 사용하는 방법

안녕하세요 여러분, 나마스테! 좋은 아침 ! 나는 Vipin Bansal이고 카페인 코드에 오신 것을 환영합니다.



그래서 이 포스트에서 나는 당신에게 어떻게 반응 js 애플리케이션에서 유튜브 API를 사용하고 모든 비디오와 재생 목록을 보여줄 수 있는지 보여줄 것입니다.

따라서 첫 번째 단계는 새로운 반응 앱을 만드는 것입니다. 나는 당신이 이미 create react app에 익숙하다고 생각합니다.

npx create-react-app ytclone

이제 src 폴더에 새 파일을 만듭니다. YouTube 동영상을 표시하는 데 이 파일을 사용하므로 이름을 ytvideos.js로 지정합니다. 이 파일 안에 YTvideos 함수를 생성합니다.

import react from "react";

export const YTvideos=()=>{
    return(
        <div>
            welcome
        </div>
    );
};

따라서 이 파일을 만든 후 YTvideos 파일에서 app.js 함수를 가져옵니다.

import { YTvideos } from "./ytvideos";

function App() {
  return (
    <div className="App">
      <YTvideos/>
    </div>
  );
}

export default App;

이제 YouTube로 이동하여 동영상을 선택합니다. 공유 버튼을 클릭합니다. Embed link 옵션을 선택해야 하는 창이 나타납니다. 그런 다음 Iframe 코드를 복사합니다.
이 이미지를 따를 수 있습니다.







그래서 우리는 이 비디오를 복사했습니다iframe code.

<iframe width="560" height="315"
 src="https://www.youtube.com/embed/XWePdlCGTno" 
title="YouTube video player" frameborder="0" 
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
allowfullscreen></iframe>

이제 ytvideos.js 파일에 복사하겠습니다.



따라서 그 순간에 npm start를 실행하면 결과로 표시됩니다.



이제 다음 단계로 넘어갑니다. 그것이 유튜브 API입니다.
이를 위해 Google로 이동하여 youtube api를 검색하십시오. 표시되는 첫 번째 링크를 클릭합니다.

해당 URL로 이동한 후 Youtube Data API 창이 표시됩니다. 여기에는 두 가지 옵션Add YouTube functionality to your site과 두 번째 옵션Search for content이 있습니다. 먼저 선택해야 합니다. 먼저 를 선택하면 Youtube 데이터 API 개요 페이지가 열립니다.




여기에서 시작하기 전에 youtube api의 소개 및 지침을 볼 수 있습니다.



이제 두 번째 파란색 텍스트 URL을 클릭하십시오. 그러면 Google Developers Console로 전달됩니다.
따라서 여기에 대시보드 및 Enable APi and services라는 버튼이 표시됩니다. 그것을 클릭하면 검색 상자가 나타납니다. 이제 해당 검색 상자에서 youtube api를 검색하십시오.