---
# System prepended metadata

title: Dream Coding - React 7. Youtube Project - Study

---

# 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 보면 각각의 다른 언어들로 어떻게 받아오는지 나옴