오늘은 API 적용 방법에 대해서 배웠다.
API 란?
만약 오늘의 날씨정보를 사이트에 보여주고 싶다면 어떻게 해야할까?
무식한 방법으로 생각해보면 네이버에서 날씨를 검색해 그때마다 사이트에 입력해 주는 방법이 있다.
하지만 이런 방법은 너무 비효율 적이다.
이럴때 날씨정보를 제공하는 API를 사용하면 오늘, 내일 다음주 월요일 날씨등을 보여줄수 있다.
이런 필요한 정보들을 무료로 제공해 주는것이 open-API 또는 public-API 이다.
더 강력하고 좋은 기능은 유료로 제공되기도 한다.
API 적용 간단실습 (api 검색)
API 적용은 유형에 따라서 난이도가 많이 다르다.
강아지 사진을 가져오는 아주 간단한 API를 구현해 보자.
먼저 사용할 API를 검색해야 한다.
구글에서 public api를 검색한다.
다른곳에서 검색할수도 있지만 github사이트에 여러 api들이 종류별로 모아져 있어 사용하기가 편하다.
정말 많은 종류의 api들이 종류별로 나와있다.
강아지 사진을 가져오는 기능을 사용해야 하니 Animals를 클릭한다.
Animals에 있는 Dogs를 클릭한다.
api 간단적용 (vscode) 적용
Dogs로 접속하면 강아지 사진을 랜덤으로 뽑는 페이지로 이동된다.
Fetch! 버튼을 클릭하면 강아지 사진이 랜덤으로 변경된다.
Fetch 버튼을 클릭하면 JSON으로 응답을 받고 그 안에 message란 key의 value값에 랜덤으로 강아지사진이 담겨있는 구조다.
먼저 axios를 이용해 데이터를 가져와야하니 axios를 import 해준다.
그후 image를 담아줄 dogImage란 state를 하나 만든다.
이미지를 받아올때까지 기다려야 하니 async, await를 적용해준 함수를 useEffect안에 넣어준다.
호출하는 함수는 아래와 같다.
async function getImage(){
const image = await axios.get("https://dog.ceo/api/breeds/image/random")
setDogImage(image.data.mesate)
}
get Image()
},[])호출할 url은 Fetch 클릭시 옆에 있던 url을 넣어준다.
이 url을 호출하면 json으로 전달받으며
{
"message": "https://images.dog.ceo/breeds/collie-border/n02106166_1637.jpg",
"status": "success"
}이런 형식으로 전달받는다.
이걸 아까 만들어준 state에 담아준다.
setDogImage(image.data.mesate)이렇게 담아준후 그려지는 부분에 바인딩만 시켜주면 된다.
api 간단적용 결과
위 api처럼 간단하게 적용하면 강아지들의 사진을 랜덤으로 받아올수 있다.
api 연습 (암호화폐 시세 가져오기)
강아지 사진으로 간단하게 실습을 했으니 조금더 어려운 api를 적용해 보기로 했다.
실시간으로 암호화폐의 가격들을 조회해 사이트에 표시해주는 api 기능이 있다.
주소창에 아래 주소를 검색한다.
해당 사이트는 암호화폐의 시세 및 정보들을 정리해서 보여주는 사이트(코인게코)이며 이 사이트에서 무료로 시세조회를 할수 있는 api가 있다.
사이트 하단부분에 Developer API를 클릭한다.
Explore Docs 부분으로 들어오면 간단한 설명이 있다.
간단하게 해당 코인의 시세만 가져오는 API를 사용할것이며 해당내용은 /simple/price으로 가능하다.
알맞는 api를 생성하기 위해 try it out를 클릭해 준다.
2가지의 설정이 필요하다.
먼저 해당 코인의 시세를 표기해줄 상대 통화를 적어준다.
원화 시세로 표현해줄것이기 때문에 krw라고 적는다.(달러로 표기하고싶으면 usd를 적는다.)
그리고 어떠한 코인의 시세를 가져올것인지 적어주는데 5개정도만 테스트로 적어준다.
필수항목을 모두 적어준 후 하단 부분의 Execute 버튼을 눌러주면
요청 url과 요청받는 방식에 대해서 볼수 있다.
이제 위 내용을 토대로 vscode에 적용해 준다.
import axios from "axios";
import { useEffect, useState } from "react";
export default function TestPage() {
const [btc, setBtc] = useState(0);
const [eth, setEth] = useState(0);
const [xrp, setXrp] = useState(0);
const [doge, setDoge] = useState(0);
const [bnb, setBnb] = useState(0);
useEffect(() => {
async function getResponse() {
const markets = await axios.get(
"https://api.coingecko.com/api/v3/simple/price?ids=bitcoin%2Cethereum%2Cripple%2Cdogecoin%2Cbinancecoin&vs_currencies=krw"
);
setBtc(markets.data.bitcoin.krw);
setEth(markets.data.ethereum.krw);
setXrp(markets.data.ripple.krw);
setBnb(markets.data.binancecoin.krw);
setDoge(markets.data.dogecoin.krw);
}
getResponse();
}, []);
return (
<>
<div>오픈API</div>
<div>비트코인 : {btc}</div>
<div>이더리움 : {eth}</div>
<div>리플 : {xrp}</div>
<div>도지코인 : {doge}</div>
<div>바이낸스코인 : {bnb}</div>
</>
);
}강아지 사진 적용과 동일한 방식으로 해준다.
다만 응답받는 객체의 형식으로 state에 담아주어야 한다.
{
"bitcoin":{
"krw": 0000
}이렇게 객체가 2개 있기때문에 해당형식에 맞게 state에 담아준 후 그려줄 부분에 바인딩을 해주면 된다.
이렇게 해주면 실시간 시세의 가격을 불러올수 있다.
이부분을 좀더 많은 숫자로 적용한다면 아래처럼 적용이 가능하다.
다만 100개, 200개 넘는 시세를 가져온다면 다른 api를 이용해서 가져오는게 훨씬 효과적이다.
