For AI agents: fetch the complete documentation index at /llms.txt, the full documentation corpus at /llms-full.txt, the agent skill at /skill.md, or this page as Markdown at /ko/docs/web/tech-stack.md (or send Accept: text/markdown).
기술 스택
키트 뒤에 있는 기술과 각각의 역할.
시작하기 전에
파일 → 폴더 열기를 사용하여 Visual Studio Code에서 다운로드한 supastack 프로젝트를 연 다음 터미널 → 새 터미널을 선택합니다. 저장소 루트는 package.json, 앱 및 패키지가 포함된 폴더입니다. 아래 명령을 실행하고 터미널을 열어 두십시오. 명령이 인식되지 않으면 계속하기 전에 도구 설치 가이드를 완료하세요.
먼저 플랫폼 튜토리얼을 읽어보세요. 서버는 브라우저 또는 전화 요청에 응답하는 앱 프로세스입니다. 웹은 apps/web/.env.local를 읽고, Expo는 apps/mobile/.env.local를 읽고, 데이터베이스 마이그레이션 명령은 루트 .env를 읽습니다. 데이터베이스 없는 /dashboard 데모는 Postgres를 마이그레이션해야 하는 실제 /auth 계정과 별개입니다. 전화 또는 데스크톱 전용 결제에는 별도로 실행되는 웹 백엔드가 필요합니다.
corepack pnpm --filter @supastack/web dev애플리케이션 스택
웹 앱은 공유 TypeScript 패키지로 구성된 Next.js 애플리케이션이며, 같은 패키지가 Expo 모바일 앱에도 사용됩니다. 제품 UI는 디자인 토큰 위의 CSS Modules를 사용하므로 디버깅할 런타임 CSS-in-JS가 없고, 객체 스토리지는 S3 호환입니다. 아래 도구들이 기본값으로 선택된 스택입니다.
Next.js + React
TypeScript + Turborepo
TypeScript strict 모드가 pnpm 워크스페이스 전체에 적용되며, Turborepo가 빌드를 조율합니다.
Better Auth
Better Auth가 아이덴티티 엔진이며, 이를 표준화하려는 팀을 위해 Auth.js 엔진도 제공됩니다.
Drizzle + PostgreSQL
영속성은 PostgreSQL 위의 Drizzle ORM을 통해 이루어지며, 모든 레코드가 지나가는 스키마와 헬퍼입니다.
결제
결제는 Stripe이 기본이며 Lemon Squeezy 어댑터가 포함되어 있습니다.
Trigger.dev
백그라운드 작업은 Trigger.dev에서 실행됩니다.
트랜잭션 이메일
트랜잭션 이메일은 Resend 또는 AWS SES를 통해 발송됩니다.
Sentry + PostHog
Expo
Expo 모바일 앱은 동일한 TypeScript 패키지를 사용하므로 계약 변경이 두 환경에서 동시에 타입 체크됩니다. Expo는 iOS와 Android용으로 제공됩니다.
공유 모듈
모든 횡단 기능은 작은 계약을 가진 패키지에 존재합니다: auth, db, billing, ai, jobs, email, storage, observability, config, i18n, api. 애플리케이션이 이를 조합하고 프로덕트 도메인 로직은 키트 밖에 둡니다.
프로바이더 기반 모듈마다 fake 또는 로컬 어댑터가 포함되어 기본 테스트·개발 주기가 유료 서비스를 호출하지 않습니다.
검증 도구
Vitest가 단위·통합 동작을, Playwright가 브라우저 플로우를 커버하고 ESLint와 Prettier가 코드를 일관되게 유지합니다. 결정적 스위트는 프로바이더 자격 증명 없이 실행되며, 실제 프로바이더 수용은 별도의 선택적 경로입니다.
corepack pnpm test # deterministic unit + integration
corepack pnpm check # lint, types, tests, format
corepack pnpm build # production builds
corepack pnpm test:e2e # browser flows