Solo.dev

1️⃣ 기존 방식 vs 새로운 방식🔹 기존 방식 (문제점)사용자가 장소 + 코스 선택을 해야 해서 3번 요청을 보내야 조합이 가능했음.불필요한 API 요청이 많아지고, 사용자 경험(UX)도 불편했음.🔹 새로운 방식 (개선점)✅ 각 나라별로 미리 설정된 "데이트 코스 추천 키워드" 사용✅ 사용자는 장소만 입력하면 자동으로 검색어 생성됨✅ 3번 요청할 필요 없이 1번만 요청해서 최적의 장소 추천 가능✅ React Native UI도 최소한의 입력 필드(언어 & 장소)만 남기고 단순화2️⃣ Firebase Functions & RN UI 연결 테스트📌 Firebase Functions 주요 개선 사항course 관련 기능을 완전히 삭제meetingPlace + 나라별 데이트 키워드만으로 검색 쿼리(tex..

React Native에서 **react-native-iap(인앱 결제, IAP)**을 구현하면 에뮬레이터에서는 정상 동작하지만, 실제 기기에서는 구독 상품이 표시되지 않는 문제를 겪을 수 있습니다.이 글에서는 IAP가 실제 기기에서 정상적으로 동작하지 않는 이유와 해결 방법을 정리하겠습니다.🔹 문제 상황✅ 에뮬레이터에서는 getSubscriptions()이 정상적으로 구독 상품을 불러옴.✅ 하지만 실제 기기에서는 getSubscriptions()이 빈 배열([])을 반환하거나, 결제 요청이 실패함.✅ 릴리즈 빌드를 하더라도 구독 상품이 표시되지 않음.✅ Google Play 내부 테스트 트랙에서는 동작하지 않음.🔹 해결 방법 (가장 중요한 핵심 해결책)✅ 🔑 내부 테스트 트랙이 아닌 "비공개 테스..

구매 복원 기능 요약문제사용자가 앱을 삭제 후 다시 설치하거나 새로운 기기에서 로그인했을 때, 구독 상태(isUnlimited)가 유지되지 않음.복원 버튼을 눌러 구독을 복원했지만, 앱을 재실행해야 상태가 반영되는 문제가 발생.해결 방법구독 복원 기능 구현:RNIap.getAvailablePurchases()를 사용하여 복원 가능한 구매 내역을 확인.복원 가능한 구매 항목에서 productId를 기반으로 구독 상태 확인.앱 재실행 기능 추가:복원 완료 후 앱을 재실행하여 구독 상태가 즉시 반영되도록 구현.UI 개선:복원 성공 시 사용자에게 알림을 표시하고 앱을 자동으로 재실행.최종 코드restorePurchase 함수import { Alert, Platform, Linking } from 'react-n..

React Native 프로젝트에서 In-App Purchase(IAP)를 구현하면서 발생했던 iOS 구독 결제 문제를 해결한 과정을 공유합니다. react-native-iap 라이브러리를 사용하면서, 잘못된 접근으로 인해 구독 항목 로드 및 결제 요청이 실패했던 문제를 분석하고, 올바른 접근 방식으로 문제를 해결했습니다.1. IAP 초기화문제 상황IAP 초기화 과정에서 구독 항목을 불러오는 코드에서 getSubscriptions 함수에 잘못된 파라미터를 전달하여 오류가 발생했습니다.잘못된 접근const subscriptions = await RNIap.getSubscriptions(skus);skus를 배열 형태로 직접 전달했지만, 최신 react-native-iap에서는 객체로 전달해야 합니다.올바른..

데이터 관리 설계DateP 앱에서 메뉴와 세부 옵션 데이터를 효율적으로 관리하기 위해 selectOptions라는 객체를 사용합니다. 이를 통해 선택 가능한 **메뉴(문화, 여가, 식음료, 서비스, 쇼핑, 스포츠)**와 각 메뉴에 대한 세부 옵션을 정의하고 통합 관리합니다.데이터 관리 방식SelectOptionsType 타입 정의:selectOptions 객체의 키는 동적으로 접근 가능해야 하므로 [key: string] 형태로 정의.각 키에 해당하는 값은 { label: string; value: string }[] 배열로 정의.데이터 저장:메뉴는 menu 키에 저장(문화, 여가, 식음료, 서비스, 쇼핑, 스포츠).각 메뉴에 따른 세부 옵션은 해당 키에 저장.코드: optionsData.tstype S..

전체적인 앱 구조 설계앱 설계 아이디어DateP 앱은 간단하면서 직관적인 구조로 구성됩니다. 아래는 앱의 전체적인 설계 개요입니다.탭 네비게이션 사용Home 탭: 사용자 입력 (취미, 나이, 데이트 코스 선택 등).Result 탭: 이전에 추천받은 결과를 확인하고 저장할 예정(아직 개발 중).각 화면의 역할Home 화면:데이트 추천을 위한 입력값을 수집하고, 결과를 반환하는 주요 인터페이스.사용자 입력 필드와 Select 컴포넌트를 활용하여 동적인 UI 제공.Result 화면:추천받은 결과의 히스토리를 저장하고 다시 볼 수 있는 기능 제공 예정.설계 목표직관적이고 사용하기 쉬운 UI를 제공.Gluestack UI의 컴포넌트를 최대한 활용하여 일관성 있는 디자인 구현.사용자가 추천 결과를 쉽게 볼 수 있도..

npx gluestack-ui add --allDateP 프로젝트 초기 설정프로젝트 생성 및 초기화React-Native EXPO 생성프로젝트 생성 명령어:bash코드 복사npx create-expo-app DateP EXPO는 크로스 플랫폼 개발에 강력한 도구로, iOS와 Android 앱을 동시에 개발할 수 있습니다.Gluestack UI 설치 및 초기화Gluestack UI는 React-Native 앱 개발에서 빠르고 일관성 있는 UI 컴포넌트를 제공.프로젝트에 Gluestack UI 설치:bash코드 복사npm install gluestack-ui Gluestack UI에서 제공하는 모든 컴포넌트를 초기화:bash코드 복사npx gluestack-ui add --all 위 명령어로 Gluestac..

오늘은 React Native Expo 환경에서 OpenAI의 Vision API를 사용하는 방법을 정리해보겠습니다. 기본적으로 Text Generation API를 사용해본 경험이 있어서 Vision API를 사용해보는 데 도전했습니다.이 글에서는 이미지와 텍스트를 분석하는 기능을 구현하는 과정을 단계별로 설명합니다. 1. Vision API란?OpenAI의 Vision API는 이미지 분석과 관련된 기능을 제공합니다. 텍스트와 이미지를 조합하여 더욱 정교한 분석을 수행할 수 있습니다. 공식 문서 링크는 여기를 참고하세요. 2. 환경 설정React Native 프로젝트는 Expo 기반으로 설정하였으며, Node.js 환경에서 OpenAI와 Expo 라이브러리를 활용합니다.주요 라이브러리:openai: ..

안녕하세요! 오늘은 React Native 프로젝트를 iOS에서 빌드하면서 발생했던두 가지 문제를 공유하려고 합니다.이 글이 비슷한 문제를 겪는 분들께 도움이 되었으면 좋겠습니다.1. SavedResultsScreen에 뒤로가기 버튼 추가문제 상황SavedResultsScreen에서 뒤로 가기를 통해 메인 화면으로 돌아가는 기능이 없었습니다.iOS의 기본 뒤로 가기 버튼이나 제스처가 작동하지 않는 경우 사용자 경험이 불편할 수 있습니다.해결 방법뒤로 가기 버튼을 추가하고 navigation을 통해 메인 화면으로 이동하도록 설정했습니다.추가된 코드뒤로 가기 함수 추가:const navigateToMainScreen = () => {    navigation.navigate('MainScreen'); // ..

애플리케이션을 개발할 때, API 키와 같은 민감한 정보를 안전하게 관리하는 것은 매우 중요합니다. 특히 React Native 앱의 경우 APK 파일에 직접 API 키를 포함시키면, 사용자가 APK를 추출하여 키를 노출시킬 수 있는 위험이 있습니다. 이를 방지하기 위해 Firebase Remote Config를 활용하여 API 키를 안전하게 관리하는 방법을 소개합니다.1. Firebase 콘솔에 접속하여 Remote Config 매개변수 추가하기먼저, Firebase 콘솔에 접속하여 Remote Config를 설정해야 합니다.Firebase 프로젝트 선택: Firebase 콘솔에 로그인한 후, API 키를 관리할 프로젝트를 선택합니다.Remote Config로 이동: 왼쪽 사이드바 메뉴에서 Remote..