2023-12-06 본캠프 45일차 / 64일차 TIL

주요 진행사항

- 아웃소싱 프로젝트

이번 프로젝트의 구현 기능 상 youtube를 통한 음악 영상을 보여주는 것이 필요하였다.

따라서 youtube api를 이용하여 기존의 iframe 형태의 플레이어를 컴포넌트로 가져오는 작업을 실시하였다.

1. youtube api 사용 설정

youtube api를 이용하기 위해서는 구글 클라우드에 프로젝트를 설정 한 후 api 사용 설정을 해야한다.

Google Cloud console

console.cloud.google.com

이 때 프로젝트는 구글 파이어베이스 프로젝트와 호환이 된다.

2. youtube api 키 발급

기본적으로 파이어베이스 프로젝트와 연동을 한다면, 파이어베이스 키를 통해 youtube api 역시 사용이 가능하다.

Google 클라우드 플랫폼

로그인 Google 클라우드 플랫폼으로 이동

accounts.google.com

3. 검색 기능 구현

youtube api는 여러 기능을 제공해 주었지만 그중에서 검색 기능이 필요하였다.

검색에 필요한 api 요청 주소는 다음과 같다.

해당 주소를 통해서 검색 기능을 다음과 같이 구현하였다.

검색을 통해 나온 데이터를 통해 다음과 같은 모달을 구성하였다.

4. youtube player 띄우기

가져온 데이터를(id) 토대로 영상을 틀기 위해서 라이브러리를 사용하였다.

yarn add react-youtube

위 라이브러리를 통해서 기존 iframe을 사용할 수가 있다.

<YouTube videoId={/*영상id*/} style={{ width: '100%' }} opts={{ width: '100%' }} />