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/mobile/first-feature.md (or send Accept: text/markdown).

첫 기능 만들기

새 화면에서 서버 검증 데이터까지의 엔드 투 엔드 워크스루.

이 가이드에 대해 질문하기

초보자 연습

전제 조건: 아래 두 개의 초보자 가이드를 읽고 Mobile 로컬 설정을 완료한 다음 이 리포지토리를 루트에서 편집기로 엽니다. Mobile 설정은 apps/mobile/.env.local에 있으며 Expo는 루트 .env를 읽지 않습니다. 미리 보기에는 실제 데이터를 위한 접근 가능한 백엔드가 필요합니다.

빠른 용어: 작업 영역은 한 팀의 별도 사용자, 데이터 및 설정입니다. 서버는 신뢰할 수 있는 백엔드입니다. 제공업체 키를 브라우저 및 전화 코드에 보관하세요. 마이그레이션은 테이블을 생성하거나 업데이트하는 버전이 지정된 데이터베이스 변경입니다. AI 모델은 응답하는 엔진입니다. 모델 카탈로그는 서버의 사용 가능한 모델 ID 및 가격 목록입니다. 공급자는 AI, 이메일, 청구 서비스와 같은 외부 서비스입니다. 자격은 작업 영역에서 기능을 사용할 수 있도록 하는 부여입니다. 웹훅은 한 서비스가 다른 서비스의 URL에 보내는 메시지입니다.

1. .agents/skills/add-a-mobile-screen/SKILL.md를 열거나 — 코딩 에이전트에게 따르라고 하고 — 작은 화면을 하나 만듭니다. 예를 들어 apps/mobile/app/(app)/ideas.tsx에 로직을 apps/mobile/src/ideas/에 둡니다.

2. 실행 중인 미리 보기를 통해 기기에서 새 화면을 열고 로그인한 멤버에게 렌더링되는지 확인합니다.

3. 로그아웃한 계정과 두 번째 워크스페이스 계정을 확인합니다 — 비공개로 유지되어야 할 것은 거부되거나 없어야 합니다. 서버가 경계를 강제하기 때문입니다.

사용자 정의 코드의 경우 화면 이름, 표시되는 데이터, 볼 수 있는 사람, 처리할 오류를 지정합니다. 이 태스크를 코딩 에이전트에 주고 AGENTS.md, .ai/PROJECT_CONTEXT.md 및 건드릴 파일의 .ai/ 미러를 읽게 하고, 편집 전에 파일과 검사를 나열하게 하고, diff를 보여 달라고 하십시오. 샘플 값을 사용하고 실제 비밀은 절대 붙여넣지 마십시오.

화면 만들기

apps/mobile/app/(app)/ 아래에 라우트 파일을 추가합니다 — Expo Router가 해당 파일을 로그인 스택 내의 화면으로 바꿉니다. apps/mobile/src/ui 프리미티브(Screen, Card, Title, Detail, AppButton)로 구성하여 앱의 간격, 타이포그래피, 색상을 상속하게 합니다.

apps/mobile/app/(app)/ideas.tsx
apps/mobile/src/ideas/index.ts
apps/mobile/src/ideas/index.test.ts

첫 기능 만들기

초보자 연습

화면 만들기

형식화된 클라이언트를 통해 읽고 쓰기

서버가 소유권을 결정하게 하기

액세스 및 복구 확인

상태 다듬기

아직 고민 중이신가요?

이유를 알려주세요

$299 풀 번들을 사고 싶지만 예산 초과예요

하나의 스택만 필요한데 $149도 여전히 부담돼요

AI로 직접 만드는 것보다 시간을 얼마나 아껴주는지 아직 모르겠어요

더 자세한 실제 데모를 보고 싶어요 / WeChat Pay·Alipay가 필요해요