20240411 React-youtube 학습내용

React-youtube 수업 종료 후 3시간 30분동안 남아서 혼자 좀 더 구현해 보고자 노력해 보았다! So, 9시에 끝났다 ㅎㅎ

https://github.com/raisedeveloper/React-youtube-2024.04/tree/main

GitHub - raisedeveloper/React-youtube-2024.04

저의 깃허브 - 방문하시면 제 블로그에 내용과 일치하는 포스팅 관련 학습코드가 모두 나옵니다~

메인 화면

 

드롭다운 화면

드롭다운 강연 누른 후 검색한 화면 - 강연 카테고리를 선택하면 검색창에 자동으로 '강연'이 써짐

 

 

<1교시>

유튜브 api를 사용해서 핫트렌드, 검색 기능, 비디오시청, 채널 내용 보기, 서버에 있는 데이터 가져오는 기술

1. 구글에서 api 등록 (카드 필요 - 수백명이 한번에 사용하는게 아니라면 무료)
2. JSON으로 전해진 데이터를 바탕으로 구현(Mock Data 이용)
3. 구글의 파이어 베이스 - 소셜 로그인, 데이터베이스 등

https://console.cloud.google.com/welcome?hl=ko&project=springsociallogin-418403 여기에 등록 (카드등록 필요)

api 라이브러리 -> youtube data api v3 -> 사용 -> API발급받기 -> 사용자 인증 정보 만들기 
-> 사용자 인증정보에서 api 클릭해서 확인

cmd 로 react 폴더에
npx create-react-app youtube
vs로 연 뒤 
.env.local 파일 생성
->
REACT_APP_YOUTUBE_API_KEY=위에서 생성한 api 키

https://youtube.googleapis.com/youtube/v3/videos?chart=mostPopular&key=[YOUR_API_KEY]&maxResults=25&part=snippet
여기에 발급받은 키를 입력해 웹에 입력해보기
그 걸 복사해서 public/data 폴더 생성 후 video.json 파일 생성 후 붙여넣기

https://youtube.googleapis.com/youtube/v3/search?key=[YOUR_API_KEY]&maxResults=25&part=snippet&q=react
여기에 발급받은 키를 입력해 웹에 입력해보기
search.json 파일 생성 후 붙여넣기

https://youtube.googleapis.com/youtube/v3/search?key=[YOUR_API_KEY]&maxResults=25&part=snippet&channelId=UC0v-tlzsn0QZwJnkiaUSJVQ
여기에 발급받은 키를 입력해 웹에 입력해보기
searchChannel.json 파일 생성 후 붙여넣기

https://youtube.googleapis.com/youtube/v3/channels?id=tlzsn0QZwJnkiaUSJVQ&key=[YOUR_API_KEY]&maxResults=25&part=snippet
여기에 발급받은 키를 입력해 웹에 입력해보기
Channel.json 파일 생성 후 붙여넣기


css파일 및 text 파일 삭제, App.js => App.jsx로 rename

index.js에
import {} from 'react-router-dom'; 추가


프로젝트 시 목데이터를 가지고 작업

컴포넌트 디렉토리 생성 - SearchHeader 파일 작업
Videos.jsx
데이터 요청 시 받아와서 줌 - axios
performence issue 할 때마다 불러오는 것이 아니라  cashe ( 메모리에 보관하자 함)
useEffect 를 통해서 키워드 값이 바뀔 때마다 하는 것이 아니라
메모리에다가 캐쉬를 해주고 요청을 하면 캐쉬 안에 있으면 바로 되돌려 줌

But 캐쉬에 없으면 받아서 되돌려 줌

Issue (문제) : 
1. 캐쉬를 쓸 수 없을 때
2. 5초 정도 걸렸다면 (처리 속도) 화면로딩 중인지 에러가 발생했늕 기타의 사항을 제대로 알 수 없음
이런 것들의 작업을 위해서는  useEffect 또는 다양한 코드로 구현을 해줘야 함
이와같은 이유로 실전에서 많이 사용되는 것이 == react query 임


리액트 쿼리 이용 해서 데이터 만들 시
메모리 공간에 요청 시 공간 만듦
요청시 없으면 정보 가져옴
공간이 변화햇을 시  -> 화면전환, 마우스 클릭 시 등 다양한 이벤트 발생 시
받아와서 바뀌었으면 사용자의 화면 변환함 => 다양한 작업 하고 있음

데이터 를 서버로 부터 받아왔을 시 
나의 캐쉬 영역에 있으나
기본적인 캐쉬 저장 시간은 5분
5분 후에는 캐쉬에 있는 데이터는 desapearstale Time
staleTime - 탁한, 신선하지 않음 : 0
이 것은 불러오면 서버에서 데이터를 가지고 옴
5분, 1초, 5분 5초 식으로 세팅을 하면 그 사이에는 이 공간이 움직이지 않음

use hook 을 쓰기 위해서 app.jsx을 </queryClientProvider>을 작성
login processing 을 위한 hook을 사용가능

파이어베이스 가입해서 작업하는 것 = 다음주 월요일 4/15 > 예습하기

 

이하 사진 웹 서버 띄운 사진

videoCard.jsx