'커서ai' 태그의 글 목록

커서 AI 를 개발하다가

프로버전은 너무 비싸서 계정을 새로 파서 하려고 했는데

Too many free trial accounts used on this machine. Please upgrade to pro

위와 같은 에러 메세지 와 함께 mini 도 더이상 사용할수가 없게되었다.ㅠㅠ

계정을 새로 만들어서 돌려서 사용하는건 불가능한가보다.

일단 정식 방법은 아니지만 잠시나마 사용할수 있는 방법을 공유하자면

커서 프로그램을 삭제한 뒤 아래 폴더를 모두삭제하고

Windows:
C:\Users\[YourUsername]\AppData\Roaming\Cursor
C:\Users\[YourUsername]\AppData\Local\cursor-updater
C:\Users\[YourUsername]\AppData\Local\Programs\cursor

커서를 재설치 한뒤

Windows: %APPDATA%\Cursor\User\globalStorage\storage.json

해당 폴더에 진입해서 아래 값들을 변경 했다.

{
            "telemetry.machineId": "",
            "telemetry.macMachineId": "",
            "telemetry.devDeviceId": "",
            "telemetry.sqmId": "",
            "lastModified": "2024-01-01T00:00:00.000Z",
            "version": "1.0.1"

}

HKEY_CURRENT_USER\Software\Microsoft\DeveloperTools\deviceid

해당 레지스트 값도 임시로 변경

키 값은 https://mercyhacks.com/ 사이트에서 받았지만 추천하진 않는다 사이트가 영...불안하다.

불안하니 다들 유료로 구매해서 사용하는걸 추천드립니다. 참고만 해주세요~!

저작자표시

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

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

자 신규폴더를 생성해주시구요 저는 이번에는 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/

로그인 - Google 계정

이메일 또는 휴대전화

accounts.google.com

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

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

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

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

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

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

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

다시 커서로 돌아갑시다.

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

import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';

const firebaseConfig = {
  // Firebase 콘솔에서 가져온 설정값을 여기에 넣으세요
  apiKey: "your-api-key",
  authDomain: "your-auth-domain",
  projectId: "your-project-id",
  storageBucket: "your-storage-bucket",
  messagingSenderId: "your-messaging-sender-id",
  appId: "your-app-id"
};

const app = initializeApp(firebaseConfig);
export const db = getFirestore(app);

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

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

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

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

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

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

결과를 보도록 하죠

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

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

https://boards12.netlify.app/

Create Next App

AI 공부방 ✏️ AI 학습에 대한 여러분의 생각을 공유해주세요

boards12.netlify.app

저작자표시

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

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

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

https://nodejs.org/en

Node.js — Run JavaScript Everywhere

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

다운받아서 설치를 진행해주세요.

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

Cursor - The AI Code Editor

Built to make you extraordinarily productive, Cursor is the best way to code with AI.

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

Git - Downloading Package

Download for Windows Click here to download the latest (2.48.1) 64-bit version of Git for Windows. This is the most recent maintained build. It was released on 2025-02-13. Other Git for Windows downloads Standalone Installer 32-bit Git for Windows Setup. 6

git-scm.com

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

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

https://github.com/

GitHub · Build and ship software on a single, collaborative platform

Join the world's most widely adopted, AI-powered developer platform where millions of developers, businesses, and the largest open source community build software that advances humanity.

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 초기화가 정상적으로 되는지 확인합니다.

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