ReactNative 6

DateP 프로젝트: 2025년 3월 19일 - Firebase Functions 배포 완료 및 Home Screen 로딩 스피너 추가

제목: DateP 프로젝트: 2025년 3월 19일- Firebase Functions 배포 완료 및 Home Screen 로딩 스피너 추가 DateP Project: 오늘 한 일Firebase Functions 배포 완료 및 테스트수정 및 추가:free, basic, premium 플랜에 대한 Firebase Functions 배포 완료.각 플랜별 테스트 성공적으로 마무리:freebasicpremium성과:basic과 premium은 속도 차이가 거의 없음(빠른 응답 확인).free 플랜은 Perplexity API 사용으로 인해 속도가 상대적으로 느림(10~15초 소요).문제:free 플랜의 속도 차이가 눈에 띔. 목표는 5초 내 응답.Home Screen UI 개선: Search Button에 로딩..

DateP 2025.03.20

[개발 일지] DateP 프로젝트: 백엔드와 GPT 연동, 로딩 상태와 Modal 개선

안녕하세요! 오늘은 제가 진행 중인 DateP 프로젝트에서 백엔드와 프론트엔드를 연결하고, GPT 기반 데이트 코스 추천 기능을 완성한 이야기를 공유하려고 합니다. 추가로 API 로딩 상태와 UI 개선 작업도 진행했는데, 하루 동안 꽤 알찬 작업을 마무리한 것 같아 뿌듯하네요. 그럼 어떤 작업을 했는지 하나씩 정리해 볼게요!1. 백엔드, 프론트엔드, GPT 데이트 코스 연결 완료DateP는 데이트 코스를 추천해주는 앱인데, 이번에 핵심 기능인 GPT 기반 코스 추천을 백엔드와 프론트엔드에 제대로 연동했습니다. 백엔드에서 GPT API를 호출해 데이터를 받아오고, 프론트엔드에서그 결과를 렌더링하는 과정을 마무리했어요.이제 사용자가 앱에서 버튼 하나만 누르면 GPT가 추천한 데이트 코스가 쫙 나오는 멋진 기..

DateP 2025.03.14

React Native와 Gluestack UI를 활용한 UI 설계 튜토리얼

이번 글에서는 Expo와 Gluestack UI를 활용하여 효율적으로 UI를 설계하는 방법을 소개합니다. 기본적인 프로젝트 설정부터 Gluestack UI 컴포넌트를 활용한 실질적인 코드 작성까지 단계별로 설명합니다.1. Expo 프로젝트 생성하기먼저 Expo 프로젝트를 생성합니다. Expo CLI를 설치한 후 아래 명령어를 실행하세요: npx create-expo-app my-project 이 명령어는 기본적인 Expo 프로젝트를 생성합니다. 프로젝트 생성 및 기본적인 설정 방법은 이전 글을 참고하세요.2. Gluestack UI 설정하기Gluestack UI 초기화 Gluestack UI는 다양한 React Native 컴포넌트를 제공하는 라이브러리입니다. 초기화를 위해 아래 명령어를 실행하세요: n..

RN Template 2025.01.03

React Native에서 "IAP Initialization error: 'skus' is required" 오류 해결 방법

React Native에서 "IAP Initialization error: 'skus' is required" 오류 해결 방법안녕하세요, 오늘은 React Native를 사용하여 In-App Purchase (IAP) 기능을 구현할 때 발생할 수 있는 "IAP Initialization error: 'skus' is required" 오류에 대해 다뤄보겠습니다. 이 오류는 특히 react-native-iap 라이브러리를 사용하는 과정에서 자주 발생합니다. 해당 오류의 원인과 해결 방법을 자세히 알아보겠습니다.오류 원인이 오류는 react-native-iap에서 구독 상품(SKU) 정보를 불러오거나 초기화할 때 발생합니다. 주된 원인은 다음과 같습니다:SKU 배열 전달 문제:getSubscriptions ..

React Native iOS 빌드 시 검은 화면과 번들 중복 실행 문제 해결

안녕하세요! React Native 프로젝트의 iOS 빌드 과정에서 겪었던 검은 화면 문제와 index 번들 중복 실행 문제를 공유합니다. 해결 과정과 원인을 단계별로 정리해보았으니, 같은 문제를 겪는 분들께 도움이 되면 좋겠습니다.문제 1: 검은 화면 발생현상React Native 앱을 실행하면 네이티브로 설정한 Bootsplash 화면은정상적으로 표시되지만, 화면 전환 후 검은 화면으로 넘어가는 문제가 발생했습니다.원인RCTRootView가 제대로 초기화되지 않았기 때문입니다.React Native 앱은 RCTRootView를 통해 JavaScript 번들을 로드하고 화면을 렌더링하는데, AppDelegate.mm에서 이 부분이 빠져있었거나 잘못 설정되어 있었던 것입니다.잘못된 해결법: super 코..

android만 설계해서 빌드완료한 코드 IOS 빌드 전 체크하기

안녕하세요! 오늘은 Android에서만 작동하던 React Native 앱을 iOS에서도 빌드하기 위한 체크리스트를 정리해보려고 합니다.  1. Splash Screen 설정하기  먼저 스플래시 스크린부터 설정해볼게요! Android에서는 이미 설정되어 있던 스플래시 스크린을 iOS에도 동일하게 적용해야 합니다.  react-native-bootsplash 설정    npx react-native generate-bootsplash ios/FlirtingAi/test.png --background "#FFB347" --platform ios      이 명령어를 실행하면 다음 파일들이 자동으로 생성됩니다:   BootSplash.storyboard    Colors.xcassets    Images.xc..