React - youbute project

• AIzaSyCNXGFsXK7Pmu2SSdfqLffstldUZJ7ulTU 나의 API키

Youtube 프로제트 들어가기 전에

• youtube API도 REST API 중에 하나
• 설정에서 Workspace에서 → workbench → Appearance → Color Customizations

settings.json 안에 작성할 내용:

{

"workbench.colorCustomizations": {

"titleBar.activeBackground": "#F54133",

"titleBar.inactiveBackground": "#F54133"

}

}

 

Youtube 재생

• 유튜브 재생 하는 것을 알아 보고 싶다 → Home에 Play YouTube Video에 iFrame 선택 → sample → iframe → show play parameters → iFrame Embed Code

 

Youtube API 키 설정하기

• English를 설정해야지 Try this API버튼이 나옴
• 할당량이 있으니 잘 알아보고 설정하기

1. https://developers.google.com/youtube/v3
2. Get Started : https://developers.google.com/youtube/v3/getting-started
3. APIs console : https://console.developers.google.com/cloud-resource-manager
   1. 대한민국 , 체크사항 체크(이메일 업데이트는 체크 X)
   2. 라이브러리 들어가서 You tube Data API v3 설치
   3. 설치가 되면 맨위에 뜨는 것 설정 해주기(Create credent)
   4. 완료

 

코드를 잘 입력한거 같은데 왜 안되죠?

• 개발툴을 열어서 Components에 들어가 확인을 한번 더 확인해보자!
• video의 제목은 prpos.video.snippet.title에 있는 것을 알 수있다.

 

 

반복해서 쓰기 귀찮은 videos.props.snippet 어떻게 할 수 없나요?

⇒ 있어요! key인 snippet도 deconstructing이 됩니다!

• (props) 자리에 ({video : {snippet} }) 을 적어줘서 videos.props를 반복적으로 더이상 안 적어도 되죠

 

컴포넌트 유닛테스트를 하기위해서 이런 것은 NO!

1. 코드안에 중요한 키와 같은 credential은 바로 코드안에 들어있는 것
2. 컴포넌트 안에서 네트워크 통신하는 로직이 들어있는 것

 

컴포넌트 안에서는 className을 줄 수없다는데 어떻게 하죠?

div나 다른 태그들로 묶어서 className을 주면 된다.

 

memo()함수가 안먹어요ㅠ

memo()를 써도 계속 props가 계속 바뀌면 리렌더가 발생

useCallback 사용(우리가 자식 컴포넌트에 props를 전달 할 때 계속 새로운 콜백을 전달하면 자식컴포넌트가 다시 리렌더가 발생할 때 사용) → 하지만 useCallback은 한번 만들면 메모리상에 계속 보관 하기 때문에

메모리에 많은 영향이 간다. 정말 사용할 때만 쓰자