유튜브 앱 작성
유튜브앱 설명자료: https://docs.google.com/document/d/1vHlO8lgIo1oXBYiecpE8TbG2tHnr3Hmv25UxK_7a5_g/edit#
목표: 유튜브 앱을 만든다.
수행 기간: 3.17(금) 18시까지
제출 방법: main 혹은 다른 사람의 브랜치로 절대 병합하지 않도록 주의하세요!
혹시 문제가 발생한 경우, 바로 강사에게 알려주세요! 현재 깃헙 저장소를 클론!
확인 가능하도록 본명으로 브랜치 생성! 과제 수행 후 원격 저장소로 푸시!
현재 깃헙 저장소에서 main 브랜치로 Pull Request 생성하면 제출 완료!
Pull Request 설명을 꼼꼼하게 작성!
요구사항 다음 요구사항은 필수로 구현하고 그 외 기능은 마음대로 추가할 수 있다.
- 유튜브 api를 사용해서 유튜브 데이터를 가져옵니다.
유튜브 Api 사용 방법 (API KEY 생성하는 법)
- Google cloud console로 이동하기 (https://console.cloud.google.com/)
- Youtube Data API 활성화 시키기
- API KEY 생성하기
유튜브 API 요청 방법
baseURL : https://youtube.googleapis.com/youtube/v3
검색어로 인한 비디오 데이터: /search?part=snippet&maxResults=10&q={검색어}
특정 비디오 데이터 : /videos?part=snippet&part=contentDetails&part=player&part=statistics&id={videoId}
특정 채널 정보 데이터: /channels?part=snippet&part=statistics&part=contentDetails&id={channelId}
댓글 데이터: /commentThreads?part=snippet&videoId={videoId}
관련 비디오 데이터: /search?part=snippet&maxResults=10&relatedToVideoId=${videoId}&type=video
요청 주의 사항
-
하루에 하나의 api_key에 할당된 요청 수가 있습니다. 그 이상 넘어가면 더 이상 요청을 못하게 되기 때문에 데이터를 가져오면 localStorage에 넣어서 localStorage에 이미 데이터가 있으면 요청을 보내지 말고 그 데이터를 이용해서 앱을 개발해 줍니다.
-
<React.StrictMode>를 없애도 개발을 해주세요. (요청이 두 번씩 가서 더 많은 api 호출을 하게 됩니다.)
UI 구현 예시 예시를 참고로 자유롭게 구현한다.
메인 화면
youtube api 를 이용해서 원하는 검색어에 맞는 비디오 데이터를 가져옵니다. 가져온 데이터를 이용해서 아래와 같은 UI를 보여줍니다. Navigation bar (위쪽 부분) side bar (왼쪽 부분)의 UI를 조건에 따라 처리해줍니다.
비디오 화면
youtube api 를 이용해서 특정 비디오, 댓글, 관련 비디오 데이터를 가져옵니다. 가져온 데이터를 이용해서 아래와 같은 UI를 보여줍니다.
검색 화면
youtube api 를 이용해서 원하는 검색어에 맞는 비디오 데이터를 가져옵니다. 가져온 데이터를 이용해서 아래와 같은 UI를 보여줍니다.
주의 사항 컴포넌트를 올바르게 나누기 반응형 스타일도 신경 쓰되 스타일보다는 기능 위주로 개발하기 최대한 이해하기 쉬운 변수명, 파일명, 컴포넌트명 사용하기 어떠한 부분(데이터)을 위해서 State 관리 라이브러리를 사용해야 할지 생각해 보기 React-router-dom api의 중첩 라우팅을 이용해서 레이아웃을 만들어주기