목록Coin (4)

Act99 기술블로그

[NextJs & Flask] 코인사이트 만들기 1 (Crawling & Save data with MongoDB)

이번에 할 것은 Python Requests를 이용해 코인 데이터를 Crawling한 후 MongoDB에 저장시키고 NextJS Project로 데이터를 보내는 작업을 할 것이다. 먼저, Server 폴더와 Client 폴더를 만들어주었다. 다음 Server 폴더에 가상환경 (venv) 설정을 해주었다. 다음 pip3 를 이용해 Flask, Requests, Flask_cors(CORS 문제 해결을 위해), pymongo 를 설치해주었다. 먼저한 일은 코인 데이터를 수집하는 일이였다. 테스트용으로 비트코인 데이터를 수집한 후, mongoDB에 넣어주었다. - init_db.py import requests from pymongo import MongoClient client = MongoClient('l..
개발팁저장소/nextjs 2021. 12. 31. 17:17
[Nextjs] 주식사이트 만들기-9 코인 정보 슬라이드 (Carousel) 만들기

이번에는 코인 정보 슬라이드를 만들어주었다. 시간초의 경우 setInterval & useEffect & useRef 로 만들지 않고 useInterval hook 을 이용해서 만들었다. 결과물은 아래와 같다. 내용을 딱히 넣을 것이 없어서 Description 데이터를 800자만 불러왔다. 데이터가 html tag 까지 갖고 있어, dangerouslySetInnerHTML 을 이용했다. 코드는 다음과 같다. - homeSlider.tsx import { useEffect, useState } from "react"; import CoinSliderCard from "../../components/slider/coinSliderCard"; import useInterval from "../../hook..
개발팁저장소/nextjs 2021. 12. 17. 15:59
[React] 주식사이트 만들기-5 실시간 코인 차트 만들기 [Redux, Crypto Compare] 차트 라이브러리x

사실상 이것을 만들기 위해 여태까지 달려왔다고 해도 무방하다. 최종 목표는 실시간 데이터를 불러오고 차트를 구현시키는 것이였다. 그리고 이번에 할 것은 실시간 코인차트 만들기이다. 먼저, 내가 사용할 CryptoAPI (코인 시세 API) 사이트는 CryptoCompare 사이트이다. https://www.cryptocompare.com/ Cryptocurrency Prices, Portfolio, Forum, Rankings Track cryptocurrency markets with live prices, charts, free portfolio, news and more. www.cryptocompare.com 회원가입을 해준 후, 무료 API-Key 를 받는다. 다음 사용 목적을 적은 후 앱을 만..
개발팁저장소/react 2021. 12. 7. 16:35
[React] 주식사이트 만들기-2 코인API 가져오기 (with Redux toolkit)

오늘은 코인 API 를 가져와 실시간 데이터를 가져오는 작업을 할 예정이다. 결론부터 얘기하면 Redux에 대해 더 공부할 필요성을 느꼈다. (Redux 사용하기 위한 빌드가 꽤 난해하다고 생각했기때문. 또한 docs를 봐도 잘 이해가 되지 않는다. 다만 튜토리얼을 진행하고 직접 사용해보면서 내가 느꼈던 *Props 처리하는데 너무 많은 코드들이 들어간다* 라는 점을 해결하는 툴이라는 것.. ) 그리고 이번에 사용한 것은 Redux toolkit 중에서 RTK Query 이다. 코인 데이터를 가져오기 위해 Rapid API 에서 api-key 와 url 을 제공받았다. https://rapidapi.com/Coinranking/api/coinranking1 Coinranking API Documentat..
개발팁저장소/react 2021. 12. 6. 15:44
이전 Prev 1 Next 다음