open-APi

open-APi를 사용하려고 이번에는 한국것을 사용해보려 검색하고 돌아봤다.

공공데이터포털에서 관광지 날씨등을 받아오려했더니 문제가 생겼다.
CORS에러인줄 알았는데 나중에 다른것을 하다보니 깨달았다...
뭔가를 잘못적은거였다.

다른 open-API를 찾아보았다.

rapidapi
라는 사이트였다.

국가의 날씨를 받아오는것이었고, 코드도 잘 나와있어서 사용하기 수월한듯 보여 적용을 했다.

데이터를 뿌리는 과정에서 좀 해매긴 했지만... 어쨌든 불러는 왔다.

이제 정리만하면 된다.

해당코드

/* Javascript 샘플 코드 */
import axios from "axios";
import { useEffect, useState } from "react";
import * as S from "./openAPI.styles";
export default function OpenAPI(): JSX.Element {
  const [today, setToday] = useState("");
  const [todayW, setTodayW] = useState("");
  const [conditionIcon, setConditionIcon] = useState("");
  const [forecastIcon, setForecastIcon] = useState([]);
  useEffect(() => {
    const options = {
      method: "GET",
      // url: "https://weatherapi-com.p.rapidapi.com/current.json",
      url: "https://weatherapi-com.p.rapidapi.com/forecast.json",
      // params: { q: "South Korea" },// 오늘날씨만 받아오기
      params: { q: "South Korea", days: "3" },
      headers: {
        "X-RapidAPI-Key": "bcaa27cb8amsha0c78dedd13b245p1e6b34jsn749e0be3decd",
        "X-RapidAPI-Host": "weatherapi-com.p.rapidapi.com",
      },
    };

    axios
      .request(options)
      .then(function (response) {
        console.log(response.data.forecast.forecastday[0].day.condition.text);
      setForecastIcon(response.data.forecast.forecastday);
        // response.data.forecastday.map((el)=>(
        //   el.day.condition.icon
        // ))
        // console.log(response.data);
        setTodayW(response.data.current.condition.text); // 오늘의 날씨 영어
       setConditionIcon(response.data.current.condition.icon); // 오늘의 날씨 아이콘
        setToday(response.data.location.localtime.slice(0, 10)); // 날짜
      })
      .catch(function (error) {
        console.error(error);
      });
  }, []);

  return (
    <>
      <S.TodayWeatherWrap>
        <S.WeatherTitle>오늘의 날씨</S.WeatherTitle>
        <S.WeatherImg src={conditionIcon} />
        <div>
          <S.WhatWeather>{todayW}</S.WhatWeather>
          <span>{today}</span>
        </div>
        {forecastIcon.map((el: any) => (
          // 앞으로의 날씨 3일
          <img src={el.day.condition.icon} key={el} />
        ))}
      </S.TodayWeatherWrap>
    </>
  );
}

랜더링시 한번만 실행되게 useEffect로 묶었는데 일단 안묶으면 어떻게되는지 한번 해봐야겠다.