# Dream Coding - React 7. Youtube Project - Study ## ==7.3 프로젝트 셋업== **프로젝트 색 구분** VSCode 설정 - Workbench - Appearance - Color settings.json 추가 Vscode를 커스터마이징 하는 것도 매우 중요한 것 ```json { "workbench.colorCustomizations": { "titleBar.activeBackground": "#F54133", "titleBar.inactiveBackground": "#F54133" } } ``` ## ==7.4 API 키 설정하기== ### 원하는 API 가져오기 - *원하는 어플리케이션 + API* 로 검색하면 웬만하면 다 나옴 - credentials (사용자 인증 정보)를 요구하는 경우가 다수 (익명으로 사용하기는 불가능) ### Youtube API [Google Cloud Platform](https://console.developers.google.com/apis) - 구글에서 제공하는 개발자용 사이트에서 가져올 수 있음 ## ==7.5 Youtube APIs 살펴보기== ### REST API - **Representational state transfer** - 백엔드와의 소통을 어떻게 할지 규약해놓은 것 - `GET` `POST` `PUT` `DELETE` 등이 있음 - `PATCH` 는 통상적으로 REST API로 분류되지 않음 - Youtube API 역시 REST API - 개발자툴 - 네트워크 - `**Shift**` +`**ctrl**` + `**R**` (강제 refresh) - 최근에는 `GraphQL` 을 이용하는 회사도 늘고 있다. ### HTML `iframe` [코딩교육 티씨피스쿨](http://www.tcpschool.com/html/html_space_framesIframes) - HTML 요소중 하나로 inline frame의 약자 - **해당 웹페이지 안에 어떠한 제약없이 새로운 웹페이지를 불러옴** - Youtube API를 사용하기에 적합함 ## ==7.6 Postman 소개와 설정== ### Postman - REST API 를 좀더 효율적으로 사용할 수 있게 만드는 도구 - 반복되어져서 사용되는 url등을 빠르게 만들어줌 ⇒ 중괄호 2개를 이용해서 collection을 불러올 수 있음 - 꽤 다양한 기능이 포진되어 있는듯. 사용하는 방법을 알면 충분히 좋은 도구가 될듯 함 `**Tip.**` code 보면 각각의 다른 언어들로 어떻게 받아오는지 나옴