React Day 5

API란?
https://aws.amazon.com/ko/what-is/api/

Query String?
https://velog.io/@rlawogks2468/%EC%BF%BC%EB%A6%AC%EC%8A%A4%ED%8A%B8%EB%A7%81Query-String%EC%9D%B4%EB%9E%80

1교시

섭씨온도(°C)란?

Celsius. 스웨덴의 천문학자 이름에서 유래.
물이 어는 온도는 0도(화씨 32도),
물이 끓는 온도는 100도(섭씨 212도),
이 사이의 온도는 100등분 됨.

화씨온도(°F)란?

Fahrenheit. 독일 물리학자 이름에서 유래.
물이 어는 온도는 32도(섭씨 0도),
물이 끓는 온도는 212도(섭씨 100도),
이 사이의 온도는 180등분 됨.

섭씨(°C)에서 화씨(°F)로 변환법
[°F] = [°C]×9/5+32, [°C] = ([°F]−32)×5/9

과거에는 영어권 국가에서 화씨를 많이 사용.
지금은 대부분의 국가가 섭씨 사용,
미국과 소수의 국가에서만 화씨 사용.

화씨에서 섭씨 변환하는 것

API KEY 뒤에 &unit=metric 삽입

https://openweathermap.org/current
: Unit의 metric을 사용하면 화씨 섭씨 변환이 가능한 설명 링크

import axios from "axios";
import { useEffect, useState } from "react";

const App = () => {
  const [weatherData, setWeatherData] = useState();

  const getWeather = async () => {
    const response = await axios.get(
      "https://api.openweathermap.org/data/2.5/weather?lat=37.5612533&lon=126.7985384&appid=Key&units=metric"
    );

    setWeatherData(response.data);
    console.log(response.data);
  };

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

  return (
    <div className="bg-red-100">
      {weatherData ? (
        <div>
          <img
            src={`https://openweathermap.org/img/wn/${weatherData.weather[0].icon}@2x.png`}
          />
          <div>
            {weatherData.name}, {weatherData.main.temp}
          </div>
        </div>
      ) : (
        <div>로딩중...</div>
      )}
    </div>
  );
};

export default App;

Chrome console에서 Geolocation 확인법

navigator.geolocation.getCurrentPosition((position)=>{
    console.log(position);
});

입력하면 아래와 같이 확인 가능!

• index.js의 Strict mode가 디버깅을 해서 렌더링이 2번 뜨는데
  삭제하면 한 번만 뜸. 배포되면 사라짐. 디버깅 체크해주는 것이므로 내비두면 됨.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

2교시

const getGeolocation = () => {
    navigator.geolocation.getCurrentPosition((position) => {
      setLatitude(position.coords.latitude);
      setLongitude(position.coords.longitude);
    });
  };

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

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


위 코드 실행하면 Components의 APP값 확인

#오류 1

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

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

위 둘은 동시에 실행되는데 이게 실행되기 위한 조건이
latitude, logitude값이 있어야 함
이 값이 무엇이냐?

const App = () => {
  const [latitude, setLatitude] = useState();
  const [longitude, setLongitude] = useState();
  const [weatherData, setWeatherData] = useState();

여기에는 값이 없음

그래서 아래 코드가 있음
-1 위치값

const getGeolocation = () => {
    navigator.geolocation.getCurrentPosition((position) => {
      setLatitude(position.coords.latitude);
      setLongitude(position.coords.longitude);
    });
  };

setLatitude, Longitude가 거의 동시에 실행
.
.

-2 딜레이 없게 하려면?

 useEffect(() => {
    if (!latitude || !longitude) return;

    getWeather();
  }, [latitude, longitude]);

getWeather longitude 빼도 -1 set이 동시에 담아오기 때문에 하나만 있다해도 실행됨.

-3 날씨값

const getWeather = async () => {
    const response = await axios.get(
      "https://api.openweathermap.org/data/2.5/weather?lat=37.5612533&lon=126.7985384&appid=f9cd232dbbb4ca1f4cf80eb8468af216&units=metric"
    );

    setWeatherData(response.data);
    console.log(response.data);
  };

Weather API App.jsx 전체코드

import axios from "axios";
import { useEffect, useState } from "react";
import { MdOutlineWbSunny } from "react-icons/md";

const App = () => {
  const [latitude, setLatitude] = useState();
  const [longitude, setLongitude] = useState();
  const [weatherData, setWeatherData] = useState();

  const getGeolocation = () => {
    navigator.geolocation.getCurrentPosition((position) => {
      setLatitude(position.coords.latitude);
      setLongitude(position.coords.longitude);
    });
  };

  const getWeather = async () => {
    const response = await axios.get(
      "https://api.openweathermap.org/data/2.5/weather?lat=37.5612533&lon=126.7985384&appid=f9cd232dbbb4ca1f4cf80eb8468af216&units=metric"
    );

    setWeatherData(response.data);
    console.log(response.data);
  };

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

  useEffect(() => {
    if (!latitude || !longitude) return;

    getWeather();
  }, [latitude, longitude]);

  return (
    <div className="bg-red-100">
      {weatherData ? (
        <div>
          <MdOutlineWbSunny />
          <div>
            {weatherData.name}, {weatherData.main.temp}
          </div>
        </div>
      ) : (
        <div>로딩중...</div>
      )}
    </div>
  );
};

export default App;

-> 위치를 불러와야 그 위치의 날씨를 불러올 수 있으니 순서가 바뀌면 실행이 안 됨

* 아이콘 넣기

https://react-icons.github.io/react-icons

npm install react-icons --save

MdOutlineWbSunny(햇빛)

3교시

const weatherIcon = {
  "01": {
    textColor: "text-red-500",
    icon: <MdOutlineWbSunny size={120} />,
  },
  "02": {
    textColor: "text-red-500",
    icon: <MdOutlineWbSunny size={120} />,
  },
  "03": {
    textColor: "text-red-500",
    icon: <MdOutlineWbSunny size={120} />,
  },
  "04": {
    textColor: "text-red-500",
    icon: <MdOutlineWbSunny size={120} />,
  },
  "09": {
    textColor: "text-red-500",
    icon: <MdOutlineWbSunny size={120} />,
  },
  10: {
    textColor: "text-red-500",
    icon: <MdOutlineWbSunny size={120} />,
  },
  11: {
    textColor: "text-red-500",
    icon: <MdOutlineWbSunny size={120} />,
  },
  13: {
    textColor: "text-red-500",
    icon: <MdOutlineWbSunny size={120} />,
  },
  50: {
    textColor: "text-red-500",
    icon: <MdOutlineWbSunny size={120} />,
  },
};

숫자가 0으로 시작하면 ""를 넣어주는 게 좋음.

변하는 값을 가져와야 할 때는 대괄호
ex) {weatherIcon["03"].icon}

from

"03": {
    textColor: "text-red-500",
    icon: <MdOutlineWbSunny size={120} />,
  },

객체는 .이나 [] 둘 다 할 수 있는데
배열은 안 됨. 배열은 []

4교시

API KEY .env해서 Vercel 배포

5교시

코인API 가져오기

https://docs.upbit.com/docs/upbit-quotation-restful-api

비트, 이더, Matic API
https://api.upbit.com/v1/ticker?markets=KRW-BTC,KRW-ETH,KRW-MATIC

1. 세팅

COIN-API 폴더생성
git clone https://github.com/h662/cra-tailwind-template.git coin-api
npm install
npm run start

h662 git tailwind-template 설치 완료

git remote -v
rm -rf .git

Error 상황

200 - 정상
300 - redirect
(스타벅스 공짜와이파이, 스타벅스 경유 후 ->인터넷사이트)
400 -사용자 에러
500 - 서버에러