rn 8

🚀 [Firebase Functions + React Native] 데이트 추천 시스템 개선 과정 정리

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

DateP 2025.02.05

구매 복원 기능 요약

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

오류 메시지: purchase is not suitable to be purchased RN.IAP android

문제와 해결 요약문제오류 메시지: purchase is not suitable to be purchased발생 상황:RNIap.finishTransaction 호출 시, purchase 객체가 적절하지 않거나 유효하지 않음.이전에 완료되지 않은 트랜잭션이 존재하거나, purchaseToken이 없을 때 발생.해결 방법getAvailablePurchases로 최신 구매 정보 가져오기:RNIap.getAvailablePurchases()를 호출하여 사용 가능한 모든 구매 데이터를 가져옵니다.필요한 구매를 productId로 필터링하여 적절한 purchase 객체를 확인.트랜잭션 완료 처리 개선:getAvailablePurchases로 가져온 데이터를 사용해 finishTransaction 호출.디버깅 및 상..

offerToken is required for constructing ProductDetailsParams for subscriptions 에러 해결 방법

문제 및 해결 방법 정리문제에러 메시지:offerToken is required for constructing ProductDetailsParams for subscriptions 에러가 발생.상황:requestSubscription 호출 시 offerIdToken 필드에 offerToken 값을 전달했음.로그 상으로 offerToken은 제대로 가져오고 있었으나, 구매 요청에서 에러 발생.원인:requestSubscription 호출 시 매개변수 이름이 잘못 설정됨:잘못된 필드 이름: offerIdToken.올바른 필드 이름: offerToken.해결 방법수정 내용:requestSubscription 호출 시 매개변수 이름을 offerIdToken에서 offerToken으로 변경.기존 코드: const..

옵션 데이터 관리

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

DateP 2025.01.09

Open AI chat GPT Vision API 사용해보자

오늘은 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: ..

API 2025.01.04

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

RN 으로 짠 Modal 이 android 에서는 잘만 작동하다가 IOS는 이유

React Native를 활용한 앱 개발에서 Modal은 매우 유용한 컴포넌트입니다. 그런데 Modal이 Android에서는 잘 작동하지만 iOS에서만 이상한 문제가 발생하는 경우가 있습니다. 특히, 모달이 열리지 않거나 UI가 깨지는 상황은 많은 개발자들에게 혼란을 줄 수 있습니다. 이번 글에서는 이러한 문제가 왜 발생하는지, iOS와 Android의 차이는 무엇인지, 그리고 어떻게 해결할 수 있는지를 자세히 알아보겠습니다.1. iOS와 Android의 Modal 처리 방식 차이iOS: 새로운 View 계층 생성iOS에서 Modal은 기존 화면 위에 **새로운 뷰 계층(View Hierarchy)**을 생성하여 렌더링됩니다. 이 뷰는 전체 화면을 덮으며 다른 모든 요소와 독립적으로 동작합니다. 따라서,..