REST API
를 이용해
업비트의 시세정보를 가져오는 복습을 하겠습니다.
제일먼저 업비트 API를 검색후 사이트에 들어가
REST API 를 이용한 업비트 시세 수신에서
여기 있는 url을 복사해둡니다
그리고 markets 뒤에 내가 원하는 시세 정보를 더 기입합니다.
이더와 매틱을 더 기입한뒤에
https://api.upbit.com/v1/ticker?markets=KRW-BTC,%20KRW-ETH,%20KRW-MATIC
이렇게 복사해둡시다.
REACT Tailwind css, AXIOS
리액트와 테일윈드CSS ,AXIOS를 각각 설치합니다.
터미널에
npx i create-react-app . <---현재폴대에설치
그뒤에
css,logo import 삭제
app.css 삭제 logo.svg삭제
app.js에 html 삭제하기
app.js -> app.jsx 로 바꾸기
-> Tailwind css 설치
npm i tailwindcss
npx tailwindcss init
그리고
config 에서 content: ["./src/**/*.{js,jsx,ts,tsx}"],
index.css 에있는 모든 html 지우고
사이트에있는
@tailwind base; @tailwind components; @tailwind utilities;
적용
마지막으로 npm i axios
까지 하면 끝
useEffect로 코인시세를 먼저 불러오자
이렇게 먼저 코드를 작성한다 .
response에 async와 await 로 우리가 복사한 url을 axios.get한뒤
try catch 구문으로 에러가 나오는지 아니면 요청을 잘 불러오는지 테스트한다
그리고 렌더링할 coinGetPrice를 useEffect에 넣는다
이렇게 크롬 DEV-tool 에서 data를 열어 잘가져왔는지 확인해준다.
error 가 뜨지 않았으니 try catch문은 지워준다.
coinPrice와 setCoinprice를 useState에 넣어준뒤
setCoinprice에 reponse.data 객체를 넣어준다 .
그리고 나서 coinPrice는 삼항연산자를 이용해 response.data가 정상적으로 렌더링되면
이미지와 가격을 나타내고 아니면 Loading...을 나타내도록한다.
이코드를 npm run start를 하면
아직 스타일을 안먹여줘서 이렇게 커다란 이미지가 나온다.
이미지는 img에 className을 주고 가로길이 w-8 만 해주면 된다
li에 className을 먹여 flex justify-center items-center gap-6 정도 주면 볼만해진다.
마지막으로 슬라이드기능을 추가해주자.
슬라이드 기능은 https://react-slick.neostack.com/docs/get-started/
여기에 들어가면 자세히 나와있는데
처음으로 npm i react-slick 을해주고
다음으로 npm install slick-carousel
index.js 파일로 가서
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import해주면 된다.다음으로 slider 태그를 li태그에 감싸주면된다.
를 작성해 임포트 해주면된다.
<Slider
dots={true}
infinite={true}
speed={500}
slidesToShow={1}
slidesToScroll={1}
autoplay={true}
autoplaySpeed={2000}
arrows={false}
>
그리고 닫는 Slider는 닫는 li아래 해주면된다. 그리고
toLocaleString();
요녀석은 1000단위 마다 콤마를 찍어주는 내장함수이다.
원화로 표시된 가격에 toLocaleString();을 찍어주면 가독성이 훨씬 좋아진다.
