안녕하세요

https://youngentry.github.io/week2-youtube-api/ React App youngentry.github.io 구독 기능 만들기 => 버튼을 클릭하면 눌려있는 표시로 바뀐다. useEffect(() => { axios .get(`https://youtube.googleapis.com/youtube/v3/videos?part=snippet&chart=mostPopular&maxResults=25&key=${apiKey}`) .then((res) => { dispatch(setPopularVideo([...res.data.items])); }) .catch((error) => console.log("error", error)); }, []); => App.js에서 GET 요청으..

https://youngentry.github.io/week2-youtube-api/ React App youngentry.github.io Hover 상태에서 동영상이 보이도록 하기 => thumbnailBox를 만들어 hover가 되었을 때 동영상(iframe)이 보이도록 하기 위한 형태를 만듭니다. .thumbnailBox { position: relative; } => thumbnailBox를 relative로 두기 iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; } => position: absolute로 동영상을 thumbnail과 겹치게 만들기 => opacity: 0으로 동영상이 보이지 ..

https://youngentry.github.io/week2-youtube-api/ React App youngentry.github.io useNavigate 를 이용하여 데이터 같이 보내기 const VideoCard = ({ mockVideo }) => { const navigate = useNavigate(); return ( navigate(`/video/${mockVideo.id}`, { state: { mockVideo } })} className="video-card"> ...비디오렌더 ); }; useNavigate를 이용하면 해당 url로 이동시킬 수 있습니다. 이 때 두번째 인자로 객체를 넣어 데이터를 전달할 수 있습니다. onClick={() => navigate(`/video/$..

https://youngentry.github.io/week2-youtube-api/ React App youngentry.github.io Youtube API key 발급받기 유튜브 API를 이용하기 위해서는 api key를 발급받아야 한다. https://brunch.co.kr/@joypinkgom/52 위 블로그 포스트를 참고하여 api key를 발급받았다. 잘 따라만 하면 5분이면 발급받을 수 있다. => api key 발급에 성공하면 위와 같이 사용자 인증 정보 탭에서 api key를 확인할 수 있다. Youtube API 할당량 youtube api를 무한정 사용하도록 내버려 둔다면 과도한 트래픽으로 인해 서버를 유지할 수 없게 된다. 따라서 트래픽에 제한을 걸기 위한 포인트를 이용자들에게 ..