🔥 Firebase Functions & Google Places API 연동 및 React Native 연결 과정 정리

✅ 1. Firebase Functions 환경 설정 및 API 연결

• Firebase Functions 프로젝트 초기화 및 TypeScript 설정
• Firebase Emulator 실행하여 로컬 환경에서 테스트
• Google Places API 활성화 및 API 키 발급
• 환경 변수 설정:
  • .env 파일 대신 Firebase Functions Config 사용
  • firebase functions:config:set google.api_key="YOUR_API_KEY" 명령어로 설정

---

✅ 2. Firebase Functions 백엔드 구축

• searchPlaces 엔드포인트 구현 (POST 요청 처리)
• Google Places API 호출 및 검색 결과 반환
• Firebase Emulator에서 함수 실행 및 테스트 진행

---

✅ 3. Postman을 통한 API 테스트

• Postman에서는 정상 작동, API 응답 확인 완료
• Firebase Emulator를 통한 API 테스트 성공

---

✅ 4. React Native 프론트엔드 연결 및 테스트

• fetch를 사용하여 Firebase Functions API 호출
• Postman에서는 정상 응답, 하지만 앱에서는 Network request failed 발생
• 원인 분석 및 해결:
  • 로컬호스트 문제:
    • 127.0.0.1:5001 → 10.0.2.2:5001 로 변경
    • (해결됨! API 요청 성공)
  • CORS 문제 가능성:
    • 현재 문제 없음, 추가 수정 필요 없음

---

✅ 5. 최종 결과

• Postman + Firebase Emulator → 정상 작동
• React Native 앱 (Android) → 10.0.2.2:5001로 요청 시 정상 작동
• Google Places API 권한 문제 없음, Firebase Functions 정상 응답

---

✅ 6. 내일 해결할 과제

• Firebase Functions 배포 후 실제 URL로 테스트 진행
• iOS 환경에서도 정상 동작하는지 확인
• Google Places API 응답 최적화 (필요한 필드만 요청하도록 개선)
• 받은 필드 전부 활용하게 하게 모달 정리 
• 지금은 10개중에 장소 유형 섞여서 나오는 것 같은데  총3번 요청할지 아니면 지금처럼 섞어서 할지 고민 .