[React] YouTube Data API v3, weatherMap api 사용법

크롬에 google api console쳐서 들어가면 구글cloud api 사이트나옴(map 등 할때 생성하는 api사이트와같음)

https://console.cloud.google.com/

 

YouTube Data API v3 사용

1. api>youtube검색>YouTube Data API v3 사용 클릭

Google 클라우드 플랫폼

 

2. 사용자인증정보>사용자인증정보만들기>api 만들기

 

 

3.

사이트 참고해서

https://developers.google.com/youtube/v3/docs/videos?hl=en 

Videos  |  YouTube Data API  |  Google Developers

사이트에서 video>list들어가서 tryit

 

▼ 오른쪽 method 각각 체크 (이거 맞는지는 확인 필요)

showcode

GET https://youtube.googleapis.com/youtube/v3/videos?part=snippet&chart=mostPopular&hl=9-&maxResults=30&regionCode=kr&key=[YOUR_API_KEY] HTTP/1.1

에서

 

'https://youtube.googleapis.com/youtube/v3/videos?part=snippet&chart=mostPopular&hl=9-&maxResults=30&regionCode=kr&key=YOUR_API_KEY' 

복붙해서 코드 작성

 

▼ 코드

import "./App.css";
import { useState, useEffect } from "react";

function App() {
  const [videos, setVideos] = useState([]);
  const getMostPopularVideos = async () => {
    const url =
      "https://youtube.googleapis.com/youtube/v3/videos?part=snippet&chart=mostPopular&maxResults=30&regionCode=kr&key=키값";
    const res = await fetch(url);
    const data = await res.json();
    console.log("인기동영상목록", data);
    setVideos(data.items);
  };

  useEffect(() => {
    getMostPopularVideos();
  }, []);
  return (
    <div className="App">
      {videos.map((item) => (
        <div key={item.id}>{item.snippet.title}</div>
      ))}
    </div>
  );
}

export default App;

 

▼ 화면

 

---

weatherMap api 사이트

 

https://openweathermap.org/api

 

Weather API - OpenWeatherMap

1.로그인> api keys 누르면 밑에 key 값이 뜸 > 복사

 

2. api> Current weather data>
https://api.openweathermap.org/data/2.5/weather?lat={lat}&lon={lon}&appid={API key} 복사 

{API key}에 내꺼 key 넣기

 

3. 위도 경도를 구글에서 복사해서 각각 {lat}, {lon}에 넣기
ex) 37.5462, 126.9607

 

4. 섭씨도 사용하고 싶으면 Celsius 검색해서 방법 알면

api 뒤에 &units=metric 추가

https://openweathermap.org/current

Current weather data - OpenWeatherMap

 

▼  코드

const getCurrentWeatherData = async () => {
    const url =
      "https://api.openweathermap.org/data/2.5/weather?lat=37.5462&lon=126.9607&appid=키값&units=metric";
    const response = await fetch(url);
    const data = await response.json();
    console.log("날씨데이터", data);
  };

  useEffect(() => {
    getCurrentWeatherData();
  }, []);

 

 

▼ 크롬에서 보면 다음과 같이 출력

 

---

Movie Data API 

여기도 무비데이터 api로 많이 이용하는 사이트임.

 

https://www.themoviedb.org/

The Movie Database (TMDB)