react25 [React] ApexChart로 RSI 지수 데이터 그리기 결과화면현재 진행하고 있는 코인 자동매매에서 핵심 지표인 RSI 지수를 차트에 추가해주었다.https://bright-landscape.tistory.com/461 [React] ApexChart로 이동평균선(MA) 그리기결과화면MA(이동평균)선을 5, 10, 20, 60, 120일 선을 다섯개 추가해주었다. MaCalc.js// period일 이동평균 계산 ( 종가 기준 )export default function MaCalc(data, period) { const result = []; // 여기에 최종 MA 값들이 들bright-landscape.tistory.com이전에 ApexChart로 이동평균선(MA)를 그려보았었다. 이번에는 RSI 지수를 그려볼 것이다.RsiCalc.js/** * RSI(.. 2026. 1. 19. [FastAPI, React] 골든크로스, 데드크로스 ( Telegram Bot) 결과화면 전체 아키텍쳐 요약업비트 WebSocket ↓FastAPI 중계 ↓React 실시간 분봉 생성 ↓이동평균 계산 ↓골든 / 데드 감지 ↓FastAPI 알림 API ↓Telegram BotReact 구조CandleChart.jsimport React, { useState, useEffect, useRef } from "react";import Chart from "react-apexcharts";import axios from "axios";import MaCalc from "../utils/MaCalc";function CandleChart() { const [ca.. 2025. 12. 21. [FastAPI, Recat] 이전 데이터 + 실시간 데이터(WebSocket) 합하기 (3) 🔷 전체 구조 한 줄 요약과거 캔들 데이터(REST) + 실시간 체결 데이터(WebSocket)→ 캔들 배열을 계속 업데이트→ 그 배열로 이동평균(MA)을 계산→ ApexCharts로 캔들 + MA를 동시에 그림 CandleChart.jsimport React, { useState, useEffect, useRef } from "react";// Chart 컴포넌트 (ApexCharts를 React에서 사용하기 위함)import Chart from "react-apexcharts";// HTTP 통신용 라이브러리import axios from "axios";// 이동평균 계산 함수 (직접 만든 유틸 함수)import MaCalc from "../utils/MaCalc";function CandleCha.. 2025. 12. 14. [FastAPI, Recat] 이전 데이터 + 실시간 데이터(WebSocket) 합하기 (2) https://bright-landscape.tistory.com/464 [FastAPI, Recat] 이전 데이터 + 실시간 데이터(WebSocket) 합하기 (1)결과화면 ticker_ws.pyfrom fastapi import APIRouter, WebSocketimport websocketsimport jsonrouter = APIRouter()UPBIT_WS_URL = "wss://api.upbit.com/websocket/v1"@router.websocket("/chart")async def ticker(ws: WebSocket): await ws.accept() async with websobright-landscape.tistory.com이전 코드에서 정적인 차트와 거기에 실시간 움직이는 .. 2025. 12. 12. [FastApi, React] 업비트 WebSocket으로 실시간 시세 불러오기 결과화면 console에 보다시피, 메시지를 계속 받아와 화면에 뿌려지고 있다.1. wscat 설치npm install -g wscat 2-1.FastAPI , app.py ( 방법 1)1) 필요한 라이브러리들 ImportFastAPI/WebSocket → 웹소켓 서버 만들 때 필요websockets → FastAPI 내부에서 Upbit WebSocket과 연결할 때 필요json → 구독 메시지를 JSON 문자열로 바꿀 때 사용chart_router → 기존 REST API 라우터(chart/candle) 등록2) CORS 설정React 프론트엔드(3000포트)가 API를 호출할 때 CORS 오류가 생기지 않도록 허용.3) 업비트 웹소켓 주소FastAPI가 대신 Upbit WebSocket에 연결해서 .. 2025. 12. 10. [React] ApexChart로 이동평균선(MA) 그리기 결과화면MA(이동평균)선을 5, 10, 20, 60, 120일 선을 다섯개 추가해주었다. MaCalc.js// period일 이동평균 계산 ( 종가 기준 )export default function MaCalc(data, period) { const result = []; // 여기에 최종 MA 값들이 들어간다. // 길이는 data.length와 동일. for (let i = 0; i acc + cur.trade_price, 0); // slice 안에 포함된 trade_price(종가)들을 모두 더한다. // array.reduce((accumulator, currentValue) => ..., initialValue) 이 문법인데 줄여서 acc, cu.. 2025. 12. 10. JSON데이터를 ApexCharts로 데이터 변환하여 캔들 형식 만들기 결과화면 1. npm 설치npm install react-apexcharts apexcharts1) apexcharts - 차트 엔진 ( 실제 그래프 그리는 핵심 라이브러리 ) - 브라우저에서 차트 UI를 그리는 기능을 제공한다.2) react-apexcharts - React에서 apexcharts를 쉽게 쓰드록 만든 래퍼이다. - React 컴포넌트 형태로 를 사용할 수 있게 해준다.import reactCandleChart.jsimport React, { useState, useEffect } from "react";import Chart from "react-apexcharts";import axios from "axios";function CandleChart() { const [can.. 2025. 12. 9. FastAPI로 업비트 차트 React로 JSON 형식 데이터 가져오기 결과화면 1. FastAPI - chart.pyfrom fastapi import APIRouterimport requestsrouter = APIRouter( prefix="/chart", tags=["chart"], responses={404: {"description": "Not found"}},)@router.get("/candle")def get_upbit_candle(): url = "https://api.upbit.com/v1/candles/minutes/5?market=KRW-BTC&count=5" headers = {"accept": "application/json"} response = requests.get(url, headers=headers) .. 2025. 12. 8. 업비트 API 환경변수 세팅 및 FastAPI 로 자산 조회하기 1. UPBit 세팅 업비트를 로그인 하고, 우측에서 고객센터 > [OPEN API 안내] 를 클릭하여 Open API 사용하기에서 등록할 수 있다. 참고로 cmd창에서 ipconfig 했을때 나오는 ip가 여기서 허용하는 IP가 아니라는 점을 주의하자.나는 ipconfig해서 나오는 내 IP 값으로 해서 안되가지고 시간을 아주 많이 날렸다.. https://www.findip.kr/ 아이피 확인 - my ip addressIP 주소를 확인하는 가장 쉽고 빠른 방법 이 사이트(findip.kr)에 접속하는 것이 IP주소를 확인하는 가장 쉽고 빠른 방법이다. 27.0.238.181 가 현재 접속한 기기의 공인 IP(Internet Protocol) 주소다 IP주소는www.findip.kr위 주소에서 나오는.. 2025. 12. 6. VisualStudio로 FastAPI와 React 쉽게 연동하기 FastAPI + Recat 전체 프로젝트 구조 (베스트 프랙티스 )C:\fastApi│├── backend/ # FastAPI 서버│ ├── app.py│ ├── main.py│ ├── run.bat│├── frontend/ # React 프론트엔드 (CRA로 생성)│ ├── public/│ ├── src/│ │ ├── api/ # 백엔드 API 호출│ │ │ ├── App.js # axios 설정│└── README.md # 전체 프로젝트 설명우선 이렇게 backend는 FastAPI, frontend는 React로 프로젝트를 만들어 보려고 한다.https://bri.. 2025. 12. 6. [Spring-Boot , React] 스프링부트와 React 연동하기 0. Redux DevTools 구글에 Redux DevTools를 치고 Crome에 추가시켜준다. https://start.spring.io/ 먼저 위 사이트에서 스프링 프로젝트를 하나 생성해서 SpringBoot로 Gradle해왔다. 1. 프론트에서 React설치하기 npx create-react-app fronted 비주얼스튜디오에서 React를 설치한다. fronted 해당 폴더에서 npm start로 해서 리액트가 실행되면 리액트 실행까지 완성이다. 2. Proxy 설정하기. ( CORS 관련 오류 방지를 위해 proxy를 설정 ) npm install http-proxy-middleware --save CORS (Cross Origin Resource Sharing) 서버와 클라이언트가 동일한.. 2023. 9. 26. [React] 에러 react-scripts 은(는) 내부 또는 외부 명령 실행할 수 있는 프로그램 또는 배치 파일이 아닙니다. 'react-scripts'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. 라는 오류가 떴을 때, npm update 수행 이후 npm start를 다시 해보면, 정상적으로 실행 된다. 2023. 9. 26. 이전 1 2 3 다음
