지에고

자 어떤걸 할까 했다가 최근에 토토에 미친 친구 하나가 이런거 있음 좋겠다 해서 한번 해보려고 합니다.

배트맨 토토사이트에서 경기들을 가져온 뒤

가장 무난하게 승리를 할만한 경기를 예측해보는 겁니다. 

경기들 중 우리는 농구 경기만 타겟팅해서 경기들 중 가장 베팅하기 좋을만한 것을 추천해달라고할겁니다.~!

첫번째로 할일은 기존 데이터들을 학습시키는 겁니다.

학습시킬떄는 사실 많은 데이터보다는 최근 25년도 데이터를 가지고 학습시키는게 좋을 것 같은데요. 

흠 EPL 이 유명하니 EPL 들로만 추가해서 학습시켜보겠습니다.

잠시 보류합니다.

결과가 딱히 의미있는 값이 안나와서 일단 어떻게 다시 진행할지 고민좀 하고 진행하겠습니다.

일단 어디에서나 활용가능할만한 잡담을 나누는 사이트를 제작해볼까합니다.

해당 컨텐츠는 앞으로 개발할 여러사이트에서 방명록 형식으로 추가 될것을 기대하고 있습니다.

자 신규폴더를 생성해주시구요 저는 이번에는 board_ziego 로 만들었습니다.

pnpx create-next-app@latest .

cmd 에서 프로젝트 생성해주시구요

커서에게 요청합시다.

"next js 프로젝트야. src 코드 위치는 app/page.tsx 코드가 이미 있어. 거기에다가 추가해서 작성해줘. 방명록 형식으로 글을 써서 올리는 사이트를 만들거야 firebase db 를 사용할거야 구현해줘"

pnpm install firebase 

설치하라고 하네요 설치 진행해주세요.

그리고 accept all 해주세요.

이제 방명록을 올리면 저장 될 db 를 firebase 를 이용하여 사용해보도록 하겠습니다.

https://console.firebase.google.com/

구글계정 아무거나 로그인 하시면됩니다.

"프로젝트 만들기" 버튼을 클릭합니다
프로젝트 이름을 입력하고 (예: "guestbook-project")
Google Analytics 사용 여부를 선택합니다
"프로젝트 만들기" 버튼을 클릭하여 완료합니다

프로젝트에서 모든제품 cloud firestore 들어가주세요

데이터베이스 만들기 선택해주시구

보안 규칙에서 "테스트 모드로 시작" 선택 (개발용) 
데이터베이스 위치 선택 (예: asia-northeast3 (서울))
"사용 설정" 클릭

생성되고나면 홈에서 앱추가 클릭하고 프로젝트명 저장후 다음을 하면 Firebase config 정보가 나옵니다.

이제 db 설정은 완료되었습니다.

다시 커서로 돌아갑시다.

gpt 가 이런 코드를 만들어놨을거에요. config.ts 파일을 찾아서 위에 정보를 붙여넣기 해주세요

자 설정이 되었다면 실행해봅시다.

아래와 같이 잘 등록 되네요. 간단하게 몇가지만 요청해서 다듬어 보도록하죠

"좀 더 세련되고 이쁘게 수정해줘 gui 아이콘은 없애줘 그리고 전체적인 색상도 하늘색 계열로 해줘"

"이름은 캐시에 저장해서 계속 사용할수있게 해줘"

"제목을 대화방이 아니라 AI 공부방으로 바꿔줘 "

3개 정도 추가로 요청했습니다.

결과를 보도록 하죠

아주 깔끔하게 진행되었네요. 

강의가 도움이 되셨다면 우리가 만든 방명록에 한마디씩 남겨주세요~!

https://boards12.netlify.app/

자 이번에는 비트코인의 현재상황을 GPT 를 이용하여 예측하는 사이트를 만들려고합니다.

혹시~ 처음 방문하신분들은 

https://yc0345.tistory.com/238

이거 먼저 한번 해보시고 오세요~

2번째 프로젝트 AI 예측 사이트 제작하기

자 시작해봅시다

목표는 아래와 같습니다.

1시간에 한번씩 현재 비트코인 가격과 추세를 분석하여 진입타점과 손절가를 작성해줍니다.

이번엔 신규폴더를 bitcoin_ziego 로 만들어줬습니다.

자 먼저 pnpm 을 설치해주겠습니다.

npm install -g pnpm@latest-10

pnpm -v 을 입력해서 버전이 나오면 정상적으로 설치 된 상태입니다. 

먼저 next js 초기화를 진행합시다.

pnpx create-next-app@latest .

생성이 되었으면 잘 생성되었는지 확인합시다. 

pnpm run dev

실행 후 js 페이지가 잘 나온다면 문제없이 준비되었습니다.

이후에 프로젝트들이 좀 복잡하고 고도화가 필요한 것들은 PRD 문서를 작성해서

AI 가 해당 문서를 항상 참조하여 작성하도록 해야지 에러나 엉뚱한 방향으로 제작하는것을 막을수 있습니다.

하지만 이렇게 간단한 프로젝트는 그냥 바로 명령해서 작성해도 됩니다.

이제 커서에게 프로그램 제작을 요청해보도록 합시다.

"next js 프로젝트야. src 코드 위치는 app/page.tsx 코드가 이미 있어. 거기에다가 추가해서 작성해줘. 비트코인 가격을 예측하는 사이트를 만들려고해 비트코인의 가격을 실시간으로 가져와서 표시해주고 30분봉으로 보여줘"

AI 가 차트그리는데 필요한 라이브러리가 있다고 하네요 아래와 같이 추가해주십시다.

아래 빨간 박스에 표시해둔 + 를 눌러 CMD 창을 하나 늘려주시구요

pnpm install chart.js react-chartjs-2 axios

위 명령어로 차트 라이브러리를 설치해줍니다.

그리고 Accept all 을 누르면 아래와 같이 웹사이트가 변경됩니다.

아주 심플하게 모양이 나왔네요.

이정보만 gpt 에게 던지면 가격정보만 보여서 어떠한 예측도 불가능할듯합니다. 몇가지 보조 지표를 추가해주도록하죠

대표적인 RSI 와 매물대 정보 정보를 추가해봅시다.

"RSI 와 매물대 정보를 바로 아래 그래프로 추가해줘"

accept all 누른 후 확인해봅시다.

나름 있어보이는 그래프들이 그려졌습니다. 

이제는 gpt 에게 정보를 전달하고 목표가, 손절가, 익절가 를 추천해달라고 해보겠습니다.

"웹사이트 제일 하단에 버튼을 누르면 GPT 에게 현재 사이트 정보를 기준으로 매수 추천 가격과 손절 익절 가격을 추가해주는 기능을 만들어줘"

자 여기서 중요한게 gpt api 를 사용하기 위해서는 api key 를 발급 받아야 합니다.

발급받는 방법은 아래 링크 참고해주세요.

https://yc0345.tistory.com/244

자 발급 받은 key 를 .env.local 파일 하나 생성해서 아래와 같이 키를 넣어주세요.

그리고 커서가 작성한 코드도 accept 해주세요.

open api 를 사용하기 위해서는 아래 와 같이 관련 라이브러리를 설치하라고 하네요. 설치 진행해주시면됩니다.

pnpm install openai 설치

자 커서가 open api 를 활용해서 요청하는 것도 만들어줬습니다.

적용 후 에러가 발생한다면 해당 에러들도 쳇 gpt 에게 요청하면됩니다. 

저는 아래와 같은 에러가 발생하여 에러 메세지를 붙여넣고 수정해달라고 했습니다.

accept 하니 정상적으로 보이는군요.

기본기능이 모두 추가되어서 아래와 같이 부수적인 요청들을 추가로 해줬습니다. 

"gpt 응답이 항상 한글로 오도록 한글로 변경해줘"

"price, rsi, volume 이 비어있는것같아 채워서 요청할수있도록 수정해줘"

"전체적으로 gui 가 너무 허접한것같아 조금더 이쁘게 수정해줘 그리고 마지막 응답할때 폰트들도 신뢰성있는 모습으로 이쁘게 변경해줘"

결과화면입니다.

꽤 그럴듯한 AI 비트코인 사이트를 제작했습니다. 

응답이 제대로 안되는 경우 아마 gpt 를 무료로 사용하고 있어서 응답이 없을수 있습니다.

모델을 "gpt-4o-mini" 사용해주세요.

  try {
    const completion = await openai.chat.completions.create({
      model: "gpt-4o-mini",

아직 내용이 조금 부실한 것 같습니다. 그래서 기술적 지표들을 좀 더 추가해달라고 부탁했습니다.

"비트코인 가격 변화를 예측하는데 추가할수 있는 정보를 추가해서 gpt 에게 요청할때 제공해줘"

--;; 함수들 이름만 추가하고 내용은 없어서 추가로 요청했습니다.

"calculateMA calculateBollingerBands calculateMarketSentiment calculateMACD 이런 함수들이 선언이 안된것같아 추가해줘"

어우 내용이 너무 복잡하게 나오네요 ㅎㅎ 아래에 나온 내용을 조금 정리해서 제공해줘야 할듯합니다.

"gpt 응답을 json 형식으로 응답해달라고하고 그것을 파싱해서 GUI 가 깔끔하고 표시될수있도록 수정할거야 각 항목마다 레이아웃을 잡아서 진행해줘 매수 목표가, 손절가, 익절가, 분석코멘트 이런식으로 레이아웃을 구성해줘"

적용해보니 아주 이쁘게 잘나오네요.

그래프 아래에 표시되니 좀 보기 불편해서 아래와 같은 문구도 추가했습니다.

"AI Trading Recommendation 위치를 Bitcoin Trading Analysis 다음에 표시되도록 수정해줘 "

자 이제 비트코인 주요 지표를 보여주고 GPT 에게 현재 상황을 분석해주는 사이트를 제작했습니다.

Netlify 에 배포하려면 아래와 같이 오픈 api 키를 등록 해주셔야 정상적으로 빌드가 될거에요.

간단하게 2번쨰 사이트도 제작해보았습니다. 

사이트 업로드도 해두었으니 아래에 접속해서 확인해보세요.

https://coingpt.netlify.app/

AI로 100개의 컨텐츠를 제작하려고합니다

그 첫번째는 "로또 사이트 만들어 배포하기" 입니다.

쉬운 과정이니 후다닥 따라와주세요~

https://nodejs.org/en

다운받아서 설치를 진행해주세요.
 
두번쨰 준비물은 
우리의 코드를 대신 작성해줄 프로그램을 설치하는 것입니다
오늘의 주인공은 커서AI 
https://www.cursor.com/

전혀 어렵지 않습니다. 설치하시고 가입도 진행해주시면 됩니다. 
우리는 최초 2주간 무료로 사용할수있습니다. 이후에도 mini 를 사용하면 충분히 무료버전으로도 개발가능하니 돈 걱정마세요~! 
자 설치가 완료되었으면 실행해주세요.

프로젝트의 파일들이 생성될 폴더를 하나 만들어주세요 저는 lotto_ziego 라고 새폴더를 하나 만들었습니다.
그리고 cmd 창을 하나 열어주세요
이제 커서 앱을 실행해주시면  아래와 같은 화면이 나타납니다. open a folder 를 선택해주시고

위에서 생성한 폴더를 선택해주세요.
프로젝트가 열리면 아래 1,2 로 표시되어있는 버튼을 눌러주세요

하단에 추가된 창은 앞으로 우리가 플러그인 설치를 요청하거나 웹을 빌드할때 사용할 창입니다.

그리고 커서 ai 에서 가장 중요한 ai와 대화를 나누며 코드 작성을 도와줄 창입니다.

 Chat은 주로 질문과 대화에 중점을 두고, Composer는 코드 생성과 편집에 특화되어 있어요

 
하단 Terminal 창에 npm -v 으로 리액트가 정상적으로 설치되었는지 한번 체크해줍니다.

자 이제 Next.js 기본 프로젝트를 생성해주도록 할게요.
리액트를 생성해서 진행해도 되지만 추후에 v0 와 연동하려면 미리 next js 로 생성해두는게 좋습니다.~!
벌써 포기하시면 안됩니다. 그냥 아무생각없이 따라오시면 됩니다.~!

npx create-next-app@latest .

해당 명령어를 넣고 위와 같이 엔타만 연타해주세요. 우리는 자세히 몰라도됩니다. 어차피 코드짜는 사람은 ai 이니깐요.
npm run dev 로 현재 기준 웹페이지가 어떻게 되어있는지 구동해주세요

local : http://localhost:3000 을 컨트롤+마우스로 클릭하면 아래와같이 볼품없는 웹페이지를 확인할수있습니다

자 이제 우리 커서가 일할차례입니다.

"Next.js 생성된 프로젝트야 여기코드 기준으로 생성할거야. 로또예측 웹사이트를 만들거고 예측하기 버튼을 누르면 총 5개 세트를 랜덤으로 생성해주는 사이트를 제작해줘. 그리고 로또번호들은 자리수에 따라서 색상을 다르게 해줘 "

내가 사장이 된듯하군요. 

커서가 열심히 일한뒤 accept all 버튼이 활성화 됩니다. AI 가 작성한 코드를 승인해줍시다.

그리고 아까 열어 둔 허접한 웹사이트 를 새로고침해봅시다.

짜잔 제 기준에는 위와 같은 형식으로 제작되었습니다. 너무 허접한 ui 니 빠꾸를 먹여서 수정하라고 요청합시다.

"GUI 가 너무 안이쁜데 좀더 세련되고 미래지향적인 UI 로 변경해줘. 그리고 버튼 생성을 눌렀을때 간단한 애니메이션이 들어갔으면 좋겠어."

다시 한번 위와 같이 명령을 했습니다.

열심히 일한 커서에게 Accept all 로 반영하도록 허락해줍시다.

나름 열심히 수정해왔네요. 간단하게 로또 사이트가 완성되었습니다.

이제 이 완성된 사이트를 배포하는것을 진행해보도록 하겠습니다.

git hub 로 배포를 진행할 예정입니다. 먼저 git 을 설치해주세요.

https://git-scm.com/downloads/win

다음은 우리 코드가 반영될 github 가입을 해주세요.

앞으로 코드를 여기에 수정하고 반영하고 다시 빌드 배포하는 형식으로 진행될거에요.

https://github.com/

가입 후에 Create repository 를 클릭해주세요.

생성하시면 아래와 같은 형식으로 보이게 됩니다.

이제 인터넷상의 저장소를 만들어놨으니 우리가 개발한 로또 사이트를 해당위치로 올려보도록 합시다.

다시 커서로 돌아가서 + 눌러서 터미널창을 하나더 생성해줍니다.

echo "# lottoTest" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/ziego0445s/lottoTest.git
git push -u origin main

그리고 위 명령어를 차례대로 진행을해서 git 초기화가 정상적으로 되는지 확인합니다.

만약 반영이 정상적으로 안될 경우 토큰을 설정후 다시 해봐주세요.

자 정상적으로 반영이 되었다면 로또 코드 전체를 추가해보도록 합시다.

git add *

git commit -m "upload Project"

git push

하시면 아래와 같이 우리의 프로젝트가 웹 저장소에 잘 올라갔습니다.

이제는 저장소에 있는 프로젝트를 실제 웹으로 동작할수 있게 배포를 해보도록 하겠습니다.

https://www.netlify.com/

netlify 를 통해서 진행할 거고 gitHub 연결 을 해줍니다.

github 프로젝트를 선택해주세요.

제일 하단에 deploy 버튼을 눌러주세요.

자동으로 빌드가 완료되고 나면 아래 링크가 생성됩니다. 해당 링크에 들어가면 우리가 몇분만에 로또 사이트를 하나 만들어서 배포까지 진행되었습니다.~!!!!

# 커서에게 여러번 요청하여 제가 만든 사이트 입니다. 참고용으로 보셔서 자신만의 사이트를 만들어보세요~!

https://lottogpt.netlify.app/