활동 기간 (2022 1.1 ~ 2023 2.)
팀 구성 ⇒ 벡엔드2, 프론트엔드2
- 사용 기술 : youtube api , postman, tailwindcss, react router, react query
- 인원 : fronted end 1명
- 기간 : 2023 2.27(월) ~ 2023.
- 반응형 웹사이트 크기 조절 기능까지 만들 예정
- 사용 기능 :
-
youtube api key 획득하기
- youtube > data api > Calling the Api → Developter Console’s API Access
- project 생성 후 API 및 서비스 사용 설정(Enable apis and services) → YouTube Data API v3 click(활성화 시키기)
- Credential (사용자 인증 정보가 필요하다.)
- api key ⇒ AIzaSyBzQBof5YV078QGbgjYZItlAo-wkjpAzqM
-
검색 기능 구현하기
- youtube > data api > Reference > search -list > Common use cases → list(by keyword) </> click >
-
GET https://youtube.googleapis.com/youtube/v3/search?part=snippet&maxResults=25&q=surfing&key=[YOUR_API_KEY] HTTP/1.1
Authorization: Bearer [YOUR_ACCESS_TOKEN]
Accept: application/json
c. 포스트맨으로 관리하기
variable → key입력
initial value에 AIzaSyBzQBof5YV078QGbgjYZItlAo-wkjpAzqM
입력
d .mock data
무료이긴한데 하루에 몇천개 몇만개 요청은 불가능함 api용량이 무료가 아님
그래서 가짜의 데이터를 json파일의 형태로 저장해두곧 사용하는것이 mock data이다.
프로젝트 시작
mock data 준비하기
Youtube의 search header는 고정이기 때문에
Outlet을 쓰면된다.
- setting router
- yarn add react-router-dom
- router 정의는 app에서 해도되고, index에서 해도된다.
<App>
/ 👉 <Videos>🔥
/videos 👉 <Videos>🔥
/videos/query 👉 <Videos>🔍
/videos/watch/id 👉 <VideoDetail>- index : true를 하는 이유
index: true 옵션은 React Router에서 경로에 대한 정확한 일치가 없을 경우 해당 경로에 대해 렌더링될 컴포넌트를 설정하는 옵션입니다.
예를 들어, 위의 코드에서 Videos 컴포넌트는 / 경로에 대해 설정되어 있습니다. 그러나 / 외에도 다른 하위 경로가 있을 수 있습니다. 이 때 index: true 옵션을 설정하면 / 경로가 요청되었을 때 Videos 컴포넌트가 렌더링됩니다.
따라서 index: true 옵션은 하위 경로 중에서도 가장 우선적으로 렌더링될 컴포넌트를 설정하는 것입니다. 이를 통해 사용자가 최상위 경로를 요청했을 때 보여줄 초기화면을 설정할 수 있습니다. 위의 코드에서 App 컴포넌트는 최상위 경로에 대해 설정되어 있으므로, index: true를 설정해주는 것이 적절합니다.
react icons 사용하기
npm install react-icons --save
-
form onSubmit={handleSubmit}
- submithandler를 사용할 때
- 꼭 event.preventDefault()를 사용해야 한다.
- button이 있어야 엔터⇒ 실행
- submithandler를 사용할 때
-
searchbutton 누르면 useNavigate를 이용해서 이동한다.
-
useParams
React의 useParams hook은 React Router를 사용하여 라우트 파라미터 값을 추출하는 데 사용됩니다.
라우트 파라미터는 URL 경로의 일부로 전달되는 값입니다. 예를 들어, /users/:id 경로에서 id는 라우트 파라미터입니다. 이를 통해 특정 사용자의 정보를 조회하는 데 필요한 ID 값을 URL에 포함시킬 수 있습니다.
useParams hook을 사용하면, useParams 함수를 호출하고 라우트 파라미터 이름을 전달하면 해당 파라미터의 값을 추출할 수 있습니다. 예를 들어, 위의 예에서는 const { id } = useParams()와 같이 작성하여 id 파라미터의 값을 추출할 수 있습니다.
아래는 useParams를 사용하여 URL에서 id 파라미터를 추출하는 예시입니다.
javascriptCopy code
import { useParams } from 'react-router-dom';
function User() {
const { id } = useParams();
return (
<div>
<h2>User ID: {id}</h2>
</div>
);
}
이 코드는 User 컴포넌트가 /users/:id 경로에서 렌더링될 때, id 값을 추출하여 출력합니다. 예를 들어, /users/123 경로에서는 "User ID: 123"이 출력됩니다.
- 비디오 목록 만들기
-
react query 만들기
-
QueryClient를 outlet에 감싸준다.
outlet 어떤곳이든 usequery를 사용할 수 있다.
-
- fetch의 단점
- 200대의 status는 성공적인 case인데 이러한 경우 말고 400대도 모두다 then으로 들어와서 then 코드 실행됨.
- 그리고 res를 json화 시켜줘야함.
- axios는 이러한 단점을 보완함
- then은 200대의 status코드만 가능하다.
- catch로 error를 확인할 수 있다.
- usequery의 캐싱 전략 channelInfo ⇒ 채널이미지가 빈번하게 안바뀜으로 stale 타임을 짧게 두지않고, 오분정도로 길게 둔다. 채널정보를 클릭했을 때 네트워크를 요청하지 않도록한다. network tap에서 확인할 수 있다. youtube.channelImageURL(id), {staleTime: 100 * 60} relatedvideo ⇒ stale을 줌으로써 refetching 시키지않는다. videos에서 사용 베포에서 주의할 점 .env파일은 안올라가기떄문에 environment variables를 직접 정의를 해줘야한다.
