데브허브 | DEVHUB | Build Your Own AI Caption Editor with React Native (Convex, ElevenLabs, NativeWind, Expo)Build Your Own AI Caption Editor with React Native (Convex, ElevenLabs, NativeWind, Expo)
- React Native와 Expo를 활용하여 AI 캡션 비디오 편집기를 구축하는 포괄적인 튜토리얼을 제공합니다. 🎬
- Convex (데이터베이스), ElevenLabs (텍스트-음성/음성-텍스트), Clerk (인증), Sentry (오류 추적) 등 다양한 핵심 기술 스택을 통합합니다. 🛠️
bunx를 사용하여 프로젝트를 생성하고, source 폴더 구조를 채택하여 깔끔한 코드 관리를 강조합니다. 📁
- NativeWind (Tailwind CSS)를 사용하여 스타일링을 적용하며, Tailwind 및 Babel 설정을 상세히 다룹니다. 🎨
expo-dev-client, expo-image-picker, expo-media-library, expo-video, expo-audio 등 필수 Expo SDK 패키지들을 설치하고 구성합니다. 📦
- Clerk Expo 및 Passkeys를 활용한 강력한 인증 시스템 구현 방법을 설명합니다. 🔑
- Yotai를 사용하여 간단한 상태 관리를 구현하고, React Navigation의 테마 프로바이더를 설정합니다. ⚛️
- Google Fonts를 로드하고, 스플래시 스크린을 제어하여 폰트 로딩 시 사용자 경험을 최적화하는 방법을 제시합니다. 🅰️
- 초기 단계에서 모든 의존성을 설치하고
bunx expo prebuild를 실행하여 개발 흐름이 끊기지 않도록 하는 중요성을 강조합니다. 🚀
app.json 파일에서 아이콘 경로, 스플래시 스크린, iOS 배포 대상 및 미디어 라이브러리 권한을 설정하는 방법을 안내합니다. ⚙️