> ## Documentation Index
> Fetch the complete documentation index at: https://supastack.dev/llms.txt
> Use this file to discover all available pages before exploring further.
> For the full documentation corpus in one file, fetch: https://supastack.dev/llms-full.txt

# 기술 스택

키트 뒤에 있는 기술과 각각의 역할.

## 시작하기 전에

파일 → 폴더 열기를 사용하여 Visual Studio Code에서 다운로드한 supastack 프로젝트를 연 다음 터미널 → 새 터미널을 선택합니다. 저장소 루트는 package.json, 앱 및 패키지가 포함된 폴더입니다. 아래 명령을 실행하고 터미널을 열어 두십시오. 명령이 인식되지 않으면 계속하기 전에 도구 설치 가이드를 완료하세요.

먼저 플랫폼 튜토리얼을 읽어보세요. 서버는 브라우저 또는 전화 요청에 응답하는 앱 프로세스입니다. 웹은 apps/web/.env.local를 읽고, Expo는 apps/mobile/.env.local를 읽고, 데이터베이스 마이그레이션 명령은 루트 .env를 읽습니다. 데이터베이스 없는 /dashboard 데모는 Postgres를 마이그레이션해야 하는 실제 /auth 계정과 별개입니다. 전화 또는 데스크톱 전용 결제에는 별도로 실행되는 웹 백엔드가 필요합니다.

[도구 설치 및 코드 받기](https://supastack.dev/ko/docs/web/before-you-start.md)

[명령, 파일 및 구성 알아보기](https://supastack.dev/ko/docs/web/terminal-basics.md)

[웹 첫 실행 튜토리얼 완료](https://supastack.dev/ko/docs/web/ship-in-5-minutes.md)

```
corepack pnpm --filter @supastack/web dev
```


## 애플리케이션 스택

웹 앱은 공유 TypeScript 패키지로 구성된 Next.js 애플리케이션이며, 같은 패키지가 Expo 모바일 앱에도 사용됩니다. 제품 UI는 디자인 토큰 위의 CSS Modules를 사용하므로 디버깅할 런타임 CSS-in-JS가 없고, 객체 스토리지는 S3 호환입니다. 아래 도구들이 기본값으로 선택된 스택입니다.


## Next.js + React

웹 앱은 App Router와 [React](https://react.dev) 19 서버 컴포넌트를 사용하는 [Next.js](https://nextjs.org) 16으로 동작합니다.

- [Next.js](https://nextjs.org)
- [React](https://react.dev)


## TypeScript + Turborepo

[TypeScript](https://www.typescriptlang.org) strict 모드가 pnpm 워크스페이스 전체에 적용되며, [Turborepo](https://turborepo.com)가 빌드를 조율합니다.

- [TypeScript](https://www.typescriptlang.org)
- [Turborepo](https://turborepo.com)


## Better Auth

[Better Auth](https://better-auth.com)가 아이덴티티 엔진이며, 이를 표준화하려는 팀을 위해 Auth.js 엔진도 제공됩니다.

- [Better Auth](https://better-auth.com)


## Drizzle + PostgreSQL

영속성은 [PostgreSQL](https://www.postgresql.org) 위의 [Drizzle](https://orm.drizzle.team) ORM을 통해 이루어지며, 모든 레코드가 지나가는 스키마와 헬퍼입니다.

- [Drizzle](https://orm.drizzle.team)
- [PostgreSQL](https://www.postgresql.org)


## 결제

결제는 [Stripe](https://stripe.com)이 기본이며 [Lemon Squeezy](https://www.lemonsqueezy.com) 어댑터가 포함되어 있습니다.

- [Stripe](https://stripe.com)
- [Lemon Squeezy](https://www.lemonsqueezy.com)


## Trigger.dev

백그라운드 작업은 [Trigger.dev](https://trigger.dev)에서 실행됩니다.

- [Trigger.dev](https://trigger.dev)


## 트랜잭션 이메일

트랜잭션 이메일은 [Resend](https://resend.com) 또는 AWS SES를 통해 발송됩니다.

- [Resend](https://resend.com)


## Sentry + PostHog

옵저버빌리티는 [Sentry](https://sentry.io)와 [PostHog](https://posthog.com)를 통해 제공됩니다.

- [Sentry](https://sentry.io)
- [PostHog](https://posthog.com)


## Expo

[Expo](https://expo.dev) 모바일 앱은 동일한 TypeScript 패키지를 사용하므로 계약 변경이 두 환경에서 동시에 타입 체크됩니다. Expo는 iOS와 Android용으로 제공됩니다.

- [Expo](https://expo.dev)


## 공유 모듈

모든 횡단 기능은 작은 계약을 가진 패키지에 존재합니다: 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
```


## 다음

[로컬 설정](https://supastack.dev/ko/docs/web/local-setup.md)