[220718] 유튜브 클론코딩 1

1. api 키

오픈 api 는 키가 있음, 구글 api 키를 받아야 인증 정보를 넣어야지만 사용가능

구글 api : https://console.cloud.google.com/apis/dashboard?pli=1 구글 api console

- 인증키를 받을 수 있는 곳

- 프로젝트 만들기→이름→생성

- 라이브러리로 가서 youtube data api v3 사용 버튼 누르기

- 그럼 첫화면으로 넘어감

- 상단 오른쪽에 사용자 인증 정보 만들기 버튼 누르기

- 공개 데이터로 체크, 다음 버튼

- 그럼 api 키 라고 나올 텐데 그 키를 이용해서 가져올 수 있음, 자기 키 복붙해놓기

 

- youtube data api 들어가보면 가져올 수 있는 방법 등 여러가지 적혀있음

- 한국어의 경우 안되는 것들이 있음 영어로 바꿀 것

- API Reference → videos → list 로 들어가기

- part 는 snippet, chart 는 mostPopular(인기순), maxResults(최대 몇 개) 는 30, regionCode 는 kr, oauth 는 체크 풀기

- 그러면 결과물이 나옴, show code 들어가서 http 누르면 상단에 주소가 나오는데 그걸 복붙해서 쓰면 내가 위에서 선택한대로 설정값을 가져옴

 

GET https://youtube.googleapis.com/youtube/v3/videos?part=snippet&chart=mostPopular&maxResults=30®ionCode=kr&key=본인키

→ accept 은 서버에 요청할 때 이런 데이터 타입을 허용해줄 것이라 알려주면 서버에서 그에 맞는 응답을 해줌

→ [YOUR_API_KEY] HTTP/1.1

Authorization: Bearer [YOUR_ACCESS_TOKEN]

Accept: application/json 이건 필요 없고 아까 받아온 키를 key 뒤로 붙여넣기

 

- 위의 get 어쩌구를 브라우저 주소창에 넣어보기

- 우리가 필요한 정보는 snippet 안에 다 있음

 

 

 

2. app.js 로 돌아와서 주소를 fetch 로 뿌리기?

- import {useState,useEffect} from 'react';

const [videos, setVideos] =useState([])

  useEffect(()=>{

    getMostPopularVideos();

  },[])

  const getMostPopularVideos = async()=>{

    const url=`https://youtube.googleapis.com/youtube/v3/videos?part=snippet&chart=mostPopular&maxResults=30®ionCode=kr&key= 본인키`

    const res = await fetch(url);

    const data = await res.json();

    console.log('인기동영상목록', data)

  }

→ api 정보 불러와주기

→ 그럼 콘솔에 : 인기동영상목록 {kind: 'youtube#videoListResponse', etag: 'ctotuwi6huGd-Q_Z-Ya1OPPCQis', items: Array(30), nextPageToken: 'CB4QAA', pageInfo: {…}} 이렇게 들어와 있는 걸 볼 수 있음

- getMostPopularVideos 안에 setVideos(data.items) 해줘서 items 만 들어오도록

- return 문 안에

{

   videos.map(item=><div key={item.id}>{item.snippet.title}</div>)

}

→ 이렇게 해주면 title 이 주루룩 다 나열됨

- 개발자 검사에 네트워크 들어가보면 요청이 어떻게 들어가 있는지 나와있음

- 요청헤더, 응답헤더에 나와 있는 건 다시 검색해보기, origin 이 계속 나오는데 그건 리소스 출처를 뜻함(이후 다시 설명)

- scheme 은 프로토콜이 어떤 걸로 잡혀있는지 나옴

 

 

 

3. 날씨api 불러와보기

- weather api https://openweathermap.org/api

- 상단 오른쪽에 본인 이름 누르고 my api keys 들어가보면 key 가 나옴

- api 키 : e87e991da99c74ba6aad50150b10c85c

- api 메뉴로 들어가보면 Current Weather Data 에 api doc 버튼 누르기

- API call 에 https://api.openweathermap.org/data/2.5/weather?lat={lat}&lon={lon}&appid={API key} 복붙

- 주소의 {api key} 부분에 본인 키 붙여넣기

- 구글 지도에 들어가서 위도 경도 받아오기

- {lat} 부분에 위도경도 넣어주기 : 마우스 오른쪽 클릭 주변 검색 누르면 검색창에 표시됨

- https://api.openweathermap.org/data/2.5/weather?lat=37.543365&lon={lon}&appid=e87e991da99c74ba6aad50150b10c85c

 

 

 

4. app.js 돌아와서 데이터 뿌려주기

const [weather, setWeather] =useState(null)

  useEffect(()=>{

    getCurrentWeatherData();

  },[])

  const getCurrentWeatherData = async() =>{

    const url=`https://api.openweathermap.org/data/2.5/weather?lat=37.5468&lon=126.9498&appid=e87e991da99c74ba6aad50150b10c85c`

    const response = await fetch(url);

    const data = await response.json();

    console.log('날씨데이터', data)

    setWeather(data)

  }

→ 이렇게 해주면 콘솔 : 날씨데이터 {coord: {…}, weather: Array(1), base: 'stations', main: {…}, visibility: 10000, …}

- 날씨 섭씨로 바꿔주기 : weather api 홈페이지→ api → Current Weather Data 에 api doc 버튼 → celsius 찾기 → units=metric 넣어주면 된다고 뜸 → app.js 에 url 주소 맨 뒤에 &units=metric 붙여주면 됨

- 지역 이름이랑 온도 출력하기 :

<h1>{weather && weather.name}</h1>

<h2>{weather && weather.main.temp}도</h2>

 

 

 

 

5. 넷플릭스나 왓챠 클론할 때 쓰는 api

movie database api : https://www.themoviedb.org/

이것도 한번 불러와보기