Cursor + Claude를 사용하여 전 스택 SaaS 어플리케이션을 만들기

튜토리얼

上周에 저는 Cursor and Claude 3.5를 사용하는 방법과 Open SaaS를 통해 풀스택 SaaS 어플리케이션을 만드는 것을 보여주는 동영상 튜orial을 발표했습니다.

원본 동영상은 인fluencer Rohan Paul에 의해 reposted되어 지금까지 200,000명이 보았습니다!

https://x.com/hot_town/status/1831679375269310890

많은 사람들이 관심이 있는 话题인 것 같아서, 동영상과 함께 一些 extra info and tips를 제공하여 快速に SaaS 어플리케이션을 만들고자 하는 사람들을 도울 수 있으며 추가적인 수익을 얻을 수 있도록 도와보고 싶습니다.

저는 Open SaaS를 사용하여 기반으로 해야 합니다.free, open-source full-stack React, NodeJS, and Prisma SaaS starter로 cool features를 许多하게 갖추고 있습니다.

Open SaaS는 아무 기능을 갖추고 있습니다:

  • Fullstack Auth

  • Open AI API app examples

  • AWS S3 file upload examples

  • Stripe or Lemon Squeezy payments integration

  • Fullstack typesafety

  • Admin dashboard

  • Email sending

  • 전체 문서

  • 간편하게, 한 명령어로 배포

자세한 정보를 원하시면 오픈 SaaS 홈페이지을 확인하세요.

템플릿은 팩eworkspace code가 포함되어 있어 좋은 시작점이 될 뿐만 아니라, 또한 Wasp에 기반되어 있으며, React/NodeJS 전체 스택 프레임워크로 误会 기능을 갖추고 있습니다.

Wasp는 중앙 설정 파일을 사용하므로 모든 것을 한 줄의 코드로 기능을 정의하면 되며, Wasp가 그것을 관리하는 것으로 误会 기능을 사용하지 않아야 합니다. 예를 들어 Auth를 위한 误会 기능을 만들어야 하는 것을 추가로 해제합니다.

app todoApp {
  title: "ToDo App",  // visible in the browser tab
  auth: { // full-stack auth out-of-the-box
    userEntity: User, 
    methods: { google: {}, gitHub: {}, email: {...} }
  }
}

이러한 것은 AI-assisted 编程 도구, Cursor와 Claude와 일하면 AI가 많은 일을 하지 않아야 하며, 간단한 코드를 写得하며, 디버깅하기 쉽게 코드를 얻을 수 있다는 의미입니다.

Cursor와 일하는 과정에서 AI가 误会하거나 에러 코드를 写得하는 문제가 아직 있습니다. 이러한 문제를 두 가지 방법으로 해결했습니다.

  1. Cursor의 上下文에 Wasp 문서를 추가

  2. Cursor Rules 설정에서 자주 犯하는 误会을 克服하는 方法을 지시

  3. 코드 베이스를 전체 Index하는 것을 확실히하세요

오픈 SaaS를 사용하고 Wasp를 하부 프레임워크로 쓰는 이점은 둘 다 무료이며 오픈 소스입니다.幸好, 이는 우리가 그들의 원시 문서 파일에도 접근할 수 있다는 것을 의미합니다. 이 파일들은 마크다운으로 작성되어 있고 각각의 GitHub 저장소에서 발견할 수 있습니다.

따라서 내가 할 일은 Wasp 문서 마크다운 파일을 현재 작업 중인 프로젝트의 루트 디렉토리 내 별도의 디렉토리로 복사하는 것입니다. 그런 다음 문제가 생기거나 새로운 기능을 구현하려고 할 때 언제든지 문서를 참조할 수 있습니다.

그런 다음, Cursor의 콘퍼터나 채팅 인터페이스를 사용할 때, “@” 기호를 사용하고 폴더 -> Docs를 선택하고 다음과 같은 프롬프트를 작성할 수 있습니다:

@docs를 가이드로 사용하여 Wasp의 Websockets 기능을 통해 앱 내 채팅 기능을 구현하는 것을 도와주세요. 앱에 채팅 페이지를 추가하십시오…

Cursor와 Claude는 다양한 파일에 코드를 작성하는 데에는 뛰어나지만, 여전히 작은 실수를 할 수 있습니다. 예를 들어, 잘못된 임포트를 하거나 Wasp 기능을 놓치는 등 빠른 구현을 하는 데 도움이 될 수 있는 경우가 있습니다.

이러한 공통 실수를 식별하는 것을 좋아하며, 이를 Cursor의 설정 내 Cursor Rules 섹션에 추가합니다. 대신에, 프로젝트 전용으로 유지하려면 .cursorrules 파일에 이러한 규칙을 추가할 수도 있습니다.

중요한 것은, Cursor가 지속적으로 같은 실수를 반복하는 것을 발견하면, 문서를 확인하고 문제를 찾아 새로운 규칙을 추가하는 것입니다.

지금까지 유용하게 여겼던 규칙들은 다음과 같습니다:

  • SDK에서 Wasp 함수를 가져올 때 ‘wasp’를 사용하고 @wasp를 사용하지 마십시오. 예를 들어, import { Task } from 'wasp/entities', import { type GetTasks } from 'wasp/server/operations', import { getTasks, useQuery } from 'wasp/client/operations'를 사용하십시오.

  • 신규 엔티티(모델)는 main.wasp 파일이 아닌 schema.prisma에 추가하십시오.

  • main.wasp 파일에 의존성을 추가하지 마십시오. 대신 npm install를 통해 설치하도록 지시하십시오.

  • Wasp 操作(쿼리와 행동) 생성할 때, 분리된 queries.ts와 actions.ts 파일을 사용하지 않고 기능 디렉터리 내의 operations.ts 파일로 통합하십시오.

이 것은 간단합니다. 您的 Cursor 设置에서 코드베이스를 인덱스 할 수 있는 옵션을 확인하십시오. 이렇게 하면 Cursor가 您的 전체 프로젝트(Documentation 파일 included)를 문맥에서 유지하는 것이 더 容易해집니다.

또한 Index new folders by default 옵션을 Show settings 드롭다운에서 볼 수 있습니다. 이를 활성화하여 새로운 폴더와 기능을 Cursor가 생성하면 자동으로 인덱스 할 수 있도록 configurate 하십시오.

그렇다면 이제 eternal 이고 멋진 SaaS app 아이디어를 실제로 만들 수 없다는 籍口가 없습니다.

Cursor, Open SaaS, Wasp를 사용하면 SaaS app 開発에 대한 cheat code가 되어 있으므로 그것을 好玩하게 해봐요!

Oh, and by the way, if you find this useful, we’d love a star on GitHub 🙏

오픈소스 인itative를 지지하는 가장 facile한 방법입니다.

감사합니다, 다음 시간에 봐요!

Source:
https://wasp-lang.hashnode.dev/using-cursor-claude-to-make-full-stack-saas-apps