이번 프로젝트는 카카오맵API를 활용하여 카페 추천 리스트를 관리하는 것이 골자이지만, 하는 김에 카페 이름으로 유튜브에 검색한 결과를 보여주는 것도 한 번 해보고 싶었다.
유튜브의 복잡한 기능까지 다 사용할 필요는 없고, 검색 결과 리스트를 받아와서 우리 프로젝트 UI에 맞춰 썸네일과 제목을 출력하고, 내용을 클릭하면 해당 영상 페이지를 새 창으로 띄우고 싶다.
1. 구글 프로젝트 생성
https://console.cloud.google.com/
여기서 새로운 구글 프로젝트를 생성한다.
사용자 인증 정보 탭에서 API키를 발급받고, 세부 설정을 해준다.
나의 경우에는 오로지 유튜브 데이터 API만 사용하므로 제한사항을 설정해주었다. 오른쪽 위에 보이는 API 키를 복사하여 env파일에 환경변수로 지정해준다. 환경변수 설정을 해준 뒤에는 반드시 프로젝트를 재시작 해준다.
2. 유튜브에서 데이터 가져오기
유튜브 api endpoint로 axios.get 요청을 해준다.
이 때 파라미터로 요청 시 필요한 값을 작성해준다.
나의 경우에는 key(API키), part(snippet), q(검색어), type(video), maxResults(검색결과갯수) 요렇게 설정해줬는데, 이렇게 해서 가져온 데이터를 콘솔에 찍어보니 snippet 안에 썸네일, 영상 제목 등의 정보가 들어있었다. 아래 코드에서 보다시피 response.data.items 안에 활용할 수 있는 유의미한 데이터들이 들어있다.
const cafe = placeData.find((cafes) => cafes.name === selectedPlace.name);
const [searchResults, setSearchResults] = useState([]);
useEffect(() => {
const fetchData = async () => {
try {
const response = await axios.get('https://www.googleapis.com/youtube/v3/search', {
params: {
key: process.env.REACT_APP_YOUTUBE_API_KEY,
part: 'snippet',
q: `카페 ${cafe.name}`,
type: 'video',
maxResults: 5
}
});
console.log('검색결과', response.data.items);
setSearchResults(response.data.items);
} catch (error) {
console.error('Error fetching data: ', error);
}
};
fetchData();
}, [cafe]);요렇게 작성한 코드를 섞어 놓지 말고 따로 비동기 데이터 통신을 다루는 컴포넌트를 만들어서 활용하는 것이 좋겠다.
3. 가져온 데이터 활용하기
위의 코드에서 유튜브로 가져온 데이터들을 searchResult state에 저장해뒀는데, 이제 이걸 가지고 화면에 뿌려준다!
{searchResults.map((item, index) => (
<>
<VideoBox key={index}>
<Thumbnail>
<a
href={`https://www.youtube.com/watch?v=${item.id.videoId}`}
target="_blank"
rel="noopener noreferrer"
>
<img src={item.snippet.thumbnails.default.url} style={{ borderRadius: '12%' }} />
</a>
</Thumbnail>
<Title>{item.snippet.title}</Title>
</VideoBox>
<BrownLine />
</>
))}들여쓰기 대박스틴 왼쪽에 링크가 걸려있는 썸네일 이미지가 있고, 오른쪽에는 영상의 타이틀 텍스트가 출력되는 간단한 형식의 영상 목록 UI이다.
여기까지 했을 때 의도한 대로 유튜브 검색 리스트에 있는 영상 데이터가 잘 불러와졌다. 처음에 환경변수 셋팅 해놓고 프로젝트 재시작을 안해서 이상하다 왜 안되지 이상하다 x100 하긴 했지만... 큰 어려움 없이 성공했다!
아 그리고 a태그로 되어 있는 거 내일 Link로 바꿔야지...
