related
micro SAAS 만들며 cursorAI 맛보기
objective
- cursorAI를 이용해서 코딩하는 flow 익히기.
기술 스택 설명
1. Next.js
-
개요
React 기반의 웹 프레임워크로, 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 간편하게 구현할 수 있습니다. -
주요 특징
- SEO 개선 및 빠른 초기 로딩 지원
- 파일 기반 라우팅으로 간편한 페이지 구조
- Vercel(옛 Zeit)에서 만든 프로젝트로, Vercel과 궁합이 좋음
- API Routes, 이미지 최적화(Image Optimization) 등의 생산성 도구 제공
-
장점
- SSR/SSG 혼합 사용 가능
- 설정이 간편하고 직관적
- 대규모 프로젝트에서도 안정적으로 확장 가능
2. v0
-
개요
“v0”는 맥락에 따라 의미가 달라집니다.
1) 정식 버전(1.0) 전의 초기 버전을 의미할 수 있고,
2) 특정 라이브러리 이름이 “v0”일 수도 있습니다. -
주의
일반적으로 버전이 0.x인 소프트웨어는 베타(또는 알파) 버전으로 여겨지며, 안정성이 확보되지 않았을 수 있습니다.
3. shadcn/ui
-
개요
React + Tailwind CSS 기반의 UI 컴포넌트 라이브러리(또는 템플릿).
공식 GitHub 저장소에서 확인 가능합니다. -
주요 특징
- Tailwind CSS로 구성되어 있어 UI 커스터마이징이 용이
- Next.js 프로젝트와 바로 통합 가능
- 접근성(ARIA) 고려 및 다양한 UI 패턴 제공
-
장점
- 빠른 프로토타이핑
- 컴포넌트 간소화 및 모듈형 설계
- Tailwind CSS와의 높은 호환성
4. Supabase
-
개요
오픈소스 BaaS(Backend as a Service) 플랫폼으로, Postgres DB를 기반으로 실시간(Realtime), 인증(Authentication), 스토리지(Storage) 등을 제공하는 Firebase 대안 서비스입니다. -
주요 특징
- Postgres 고유의 Row-Level Security(RLS) 및 확장성
- 실시간 데이터베이스 기능
- GraphQL, REST, Supabase 클라이언트 라이브러리를 통한 접근
-
장점
- 빠른 백엔드 구축 가능
- Firebase 대안으로 각광
- 오픈소스이므로 커뮤니티와 생태계가 빠르게 성장 중
5. Vercel
-
개요
클라우드 기반 웹 애플리케이션 호스팅 플랫폼으로, Next.js의 창시자가 만든 서비스입니다. -
주요 특징
- GitHub/GitLab/Bitbucket 연동을 통한 자동 배포(CI/CD)
- 글로벌 CDN과 서버리스 함수(Serverless Functions) 제공
- 자동 SSL 인증서 발급 및 확장(Scale) 용이
-
장점
- Next.js 프로젝트에 최적화
- 직관적이고 간편한 배포 프로세스
- 무료/유료 플랜 모두 빠른 배포 속도와 안정성 제공
6. LangChain
-
개요
대규모 언어 모델(LLM)을 활용하는 애플리케이션을 쉽고 구조적으로 개발할 수 있도록 도와주는 프레임워크입니다. Python, JavaScript/TypeScript 등 여러 언어를 지원합니다. -
주요 특징
- Chains: 여러 단계의 LLM 호출을 체계적으로 연결
- Memory: 대화형 맥락 및 세션 정보 관리
- Agents: LLM이 외부 도구(검색, 계산 등)를 활용할 수 있도록 지원
- Prompt Templates: 반복적으로 사용하는 프롬프트 형식을 템플릿으로 관리
-
장점
- GPT-3, GPT-4, Claude 등 다양한 LLM API와 연동 가능
- 챗봇, 질의응답(Q&A), 요약 등 LLM 활용 사례를 쉽게 구현
- 확장성과 유지보수성 향상
요약
- Next.js
React 기반 웹 프레임워크로, SSR/SSG에 특화. - v0
버전 0 또는 초기 베타 버전을 가리킴 (구체적 사용 시 맥락 확인 필요). - shadcn/ui
Tailwind CSS 기반 UI 컴포넌트 라이브러리로, Next.js와 궁합이 좋음. - Supabase
Postgres 기반 오픈소스 BaaS, Firebase 대안으로 사용됨. - Vercel
Next.js로 유명한 클라우드 호스팅 플랫폼, 간편한 CI/CD 제공. - LangChain
LLM(대규모 언어 모델) 활용 애플리케이션 개발을 위한 프레임워크.
이 스택들을 조합하면, Next.js를 통해 프론트엔드와 서버 사이드 렌더링을 처리하고, shadcn/ui로 UI를 쉽고 빠르게 구성하며, Supabase로 백엔드 기능(인증, DB, 실시간 기능)을 해결할 수 있습니다. 그리고 최종적으로 Vercel에 배포하여 안정적이고 자동화된 서비스를 운영하며, LangChain을 통해 AI/LLM 관련 기능(예: 챗봇, 질의응답)을 손쉽게 추가할 수 있습니다.
