전체 글418 러닝 앱 개발하기 4 ( MetaMask 지갑 연결 후 Telegram으로 토큰 지급 요청 보내기 ) 사용자 탭 > MetaMask 지갑 연결 > 지갑 주소 앱 상태/AsyncStorage 저장 > 토큰 받기 버튼 > 수량 입력 모달 > POST/api/token-request > Express 백엔드 검증 > Telegram Bot API 호출 > 관리자 채팅방 알림 핵심은 Telegram Bot Token과 관리자 chat_id를 프론트엔드에 절대 두지 않는 것이다.프론트는 백엔드 API만 호출하고, 실제 Telegram API 호출은 서버에서만 처리한다. 파일별 역할hooks/use-wallet.tsimport AsyncStorage from "@react-native-async-storage/async-storage";import * as Linking from "expo-linking";impo.. 2026. 5. 20. 러닝 앱 개발하기 3 ( GoogleMap API 생성하기 ) 러닝 앱에서 지도 기능을 구현할 때, 웹에서는 정상 동작하지만 Android 앱에서는 아래와 같은 에러가 발생했다.RuntimeException: API key not found이 차이는 단순한 설정 문제가 아니라, 웹가 모바일의 동작 구조 차이기 때문이다. 즉, react-native-maps를 사용하려면 Google Maps API 키가 필요하다고 한다. 1. Google Maps API Key 발급Step 1: Google Cloud Console에서 API 키 생성1. https://console.cloud.google.com 접속2. 새 프로젝트 생성 (또는 기존 프로젝트 선택 )3. "Maps SDK for Android" 활성화4. "Maps SDK for iOS" 활성화5. "Credent.. 2026. 5. 5. 러닝 앱 개발하기 2 ( VSCode 로 Expo 빌드 ) 1. 프로젝트 생성pnpm create expo-app .현재 폴더에 Expo 기반 Recat Native 프로젝트 생성하는 것이다.내부에서는 Expo 템플릿 다운로드, app/ , package.json, assets/ 등 기본 구조를 생성하고, React Native + Expo 환경을 자동으로 세팅한다.즉, 앱 개발 뼈대 생성하는 단계이다. 2. 개발 서버 실행pnpm expo start Expo 개발 서버 실행.QR코드가 생성되고, 웹과 모바일에서 앱 실행이 가능하다.이제 안드로이드 앱에서 Expo Go 앱을 다운 받고, 스캔을 하면 바로 실행해서 확인할 수 있다.이 단계는 로컬에서 앱 테스트 하는 것이다. 3. Expo 계정 로그인https://expo.dev/accounts/joohongpa.. 2026. 5. 5. 러닝 앱 개발하기 1 ( Manus 및 Git 연동 ) https://manus.im/app/J7n1Ta1i46nb06PppdW6Eq ManusManus은(는) 답변을 넘어 작업을 실행하고, 워크플로를 자동화하며, 인간의 능력을 확장하는 행동 엔진입니다.manus.im 우선 Manus AI로 UI 및 기능들을 뽑아두었다. git remote add origin https://github.com/qkrwnghd512/coinApp.gitgit remote -vgit add .git commit -m "first commit"git branch git push origin main Manus로 기초 세팅을 해둔 앱이 깃에 연동되었다. npm install -g pnpmpnpm install "dev:metro": "cross-env EXPO_USE_METRO.. 2026. 5. 5. Window nvm설치 및 node.js 설치와 node.js 버전관리 1. NVM for Windows 설치Windows에서 NVM을 사용하려면 NVM for Windows를 설치해야 한다. https://github.com/coreybutler/nvm-windows/releases Releases · coreybutler/nvm-windowsA node.js version management utility for Windows. Ironically written in Go. - coreybutler/nvm-windowsgithub.com 최신버전의 nvm-setup.exe 파일을 찾아 다운로드 하면 된다. 2. CMD에서 node 설치nvm versionnvm install 16.20.2nvm install 20.19.4nvm list 이런식으로, VSCode나 사.. 2026. 4. 10. [AWS] EC2 인스턴스 시작 하기 https://ap-northeast-2.console.aws.amazon.com/ec2/home?region=ap-northeast-2#Home: https://ap-northeast-2.console.aws.amazon.com/ec2/home?region=ap-northeast-2#Home: ap-northeast-2.console.aws.amazon.comEC2 홈페이지를 오게 되면 우선, 인스턴스 시작을 통해 진행할 수 있다. 이름 및 태그에 이름은 내가 진행하는 거에 대한 제목을 쓰자. 만약 내가 코인에 대한 걸 한다면, '이름-server'를 쓰자.ex) coin-server OS는 우분투가 유리하다. ( 가볍고 최적화가 잘 되어있어 체감 성능이 좋다. )버전은 최신버전 그냥 아무거나 쓰면 .. 2026. 2. 14. [AWS] EC2 , 리전(Region) 👉 리전(Region) 이란? - AWS가 전 세계에 구축해 둔 물리적으로 분리 된 데이터 센터 집합 단위이다.컴퓨터들이 전 세계적으로 다양하게 분포해있는데, 이렇게 컴퓨터들이 위치한 위치를 보고 AWS에서는 리전(Region)이라고 한다. 👉 리전 특징 AWS는 전세계적으로 다양한 Region을 보유하고있다. 👉 리전은 어떤 기준으로 선택할까? - 사람들이 애플리케이션을 사용할 때는 네트워크를 통해 통신한다. 이때, 사용자의 위치와 애플리케이션을 실행시키고있는 컴퓨터와 위치가 멀면 멀수록 속도가 느려진다. 즉, 애플리케이션의 주된 사용자들의 위치와 지리적으로 가까운 리전(Region)을 선택하는 것이 유리하다. ※ 리전마다 EC2가 따로따로 관리되고있다. 🌏 Region (ap-north.. 2026. 2. 14. [FastAPI] React에서 받은 값 세션에 저장하기 우선 backend에 pip install itsdangerous 를 설치한다. App.jsaxios에게 요청 보낼 때 쿠키도 함께 들고가라는 의미이다.react의 도메인 3000번에서 backend 쪽 8000번으로 갈 때에는 브라우저 보안정책 때문에 쿠키를 자동으로 안보낸다.따라서 저 코드를 넣게 되면 " Cookie: session=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9... " 이런 형태가 된다. app.py단, allow_credentials = True 라는 코드가 있어야한다. 서버가 허락한다는 뜻이다.이게 없으면 브라우저가 에러 낸다. CORS policy: Credentials flag is true, but server didn't allow credentia.. 2026. 2. 6. [FastAPI] React에서 그린 RSI 데이터 FastAPI로 받아오기 https://bright-landscape.tistory.com/473 [React] ApexChart로 RSI 지수 데이터 그리기결과화면현재 진행하고 있는 코인 자동매매에서 핵심 지표인 RSI 지수를 차트에 추가해주었다.https://bright-landscape.tistory.com/461 [React] ApexChart로 이동평균선(MA) 그리기결과화면MA(이동평균)선을 5, 10bright-landscape.tistory.com지난 시간에는 RSI 지수를 그려보았다.이번에는 설정 탭에서 과매도, 과매수 구간을 지정한 값을 RSI 차트에 나타내보았다.zustand 사용먼저, Minutes.js , TradeSignal.js 코드들로 zustand를 세팅해주고, Settings.js 파일에서 zus.. 2026. 1. 27. [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. [React] Zustand와 FastAPI으로 분봉 상태 공유하기 React 전 상태 → FastAPI → 다른 Python 모듈까지 전달 할 예정이다. 설정 탭에서 분봉을 설정할 때 마다 차트 탭의 분봉 데이터가 변경되면서 그림이 변경 된다. Zustand란 무엇인가? => React에서 전역 상태를 가장 간단하고 직관적으로 관리할 수 있게 해주는 경량 상태 관리 라이브러리다. import { create } from "zustand";export const useStore = create((set) => ({ count: 0, increase: () => set((state) => ({ count: state.count + 1 })),}));-------# 사용은 이렇게 한다.const count = useStore((s) => s.count);cons.. 2026. 1. 18. [FastAPI] asyncio 사용하여 볼린저밴드 차트 구현하기 CMD창에 실시간으로 찍히고 있는 웹소켓 데이터들 asyncio란 무엇인가? - 하나의 프로그램이 여러 작업을 동시에 처리하는 방식이다.정확히 말하면 동시성 (Concurrency) 제공, 비동기 I/O를 위한 파이썬 표준 라이브러리이다. @app.on_event("startup")async def startup_event(): asyncio.create_task( )해당 함수는 백그라운드에서 계속 실행하는 것으로, 계속 돌아가야하는 작업 ( 웹소켓, 모니터링 등)에 적합하다. await을 안걸어주면 CPU 사용율이 100%가 된다. 반드시 걸어주자.구분await 없음await 있음CPU 사용률100%낮음이벤트 루프독점공유다른 작업실행불가실행 가능서버 응답멈춤정상 app.pyapp.py에서.. 2026. 1. 6. 이전 1 2 3 4 ··· 35 다음
