https://docs.expo.dev/develop/development-builds/create-a-build/ Create a development build Learn how to create development builds for a project. docs.expo.dev

import { View, Text, ActivityIndicator } from 'react-native'; import React from 'react'; export default function FavoriteScreen() { return ( 로딩... ); } PlaceListView와 같이 파이어스토어에서 데이터를 가져온다. export default function FavoriteScreen() { const { user } = useUser(); const [favList, setFavList] = useState([]); useEffect(() => { user && getFav(); }, [user]); const getFav = async (del = false) => { setFa..

우선 데이터베이스만 사용할 경우 리액트랑 똑같기 때문에(리액트 네이티브) App으로 새 프로젝트를 만들지 않고 바로 기존 프로젝트 todoList 혹은 다른 프로젝트를 선택 ​ 우선 파이어스토어의 룰(규칙) 부터 살펴보자. 규칙의 날짜가 오버됬다면 우선 현재 날짜 이후로 간단히 수정해주고 프로젝트 완료후 규칙을 새로(인증등 적용)만들었다. 파이어베이스는 사용할려면 라이브러리를 설치해야한다. 파이어베이스를 설치한다. import { initializeApp } from "firebase/app"; import { getFirestore } from "firebase/firestore"; const firebaseConfig = { apiKey: process.env.EXPO_PUBLIC_FIREBASE_A..

현재 앱은 내가 있는 위치를 중심으로 검색이 된다. ​ 상단의 서치바를 검색할 경우 그 지역의 위도 경도를 얻어서 그 지역 위치로 검색되게 한다. ​ 우선 SearchBar 에 자동으로 나오는 주소를 클릭시 로케이션이 searchedLocation 으로 저장됨 { console.log("위치설정"); searchedLocation(details?.geometry?.location); }} ​ searchedLocation은 props로 상위 컴포넌트 HomeScreen 에서 가져옴 이때 HomeScreen의 searchedLocation을 이름없는 화살표 함수로 만드는데 이때 (위치)를 입력시 그 위치의 위도 경도를 로케이션에 저장한다. 그러면 로케이션에서 반경 5km으로 충전소를 찾아서 앱의 화면이 재..

GlobalApi.js에서 shortFormattedAddress추가하기 "places.evChargeOptions", "places.shortFormattedAddress", "places.photos", PlaceListView.jsx 생성 import { View, Text } from 'react-native'; import React from 'react'; export default function PlaceListView({placeList}) { return ( PlaceListView ); } HomeScreen.jsx 검색결과로 palceList 스테이트를 만듬 const [placeList, setPlaceList] = useState([]); //구글맵 서버에서 받은 resp.dat..

https://console.cloud.google.com/welcome/new?project=linear-rig-414323 Google 클라우드 플랫폼 로그인 Google 클라우드 플랫폼으로 이동 accounts.google.com 구글 클라우드 무료 시작하기 사용자 인증 정보 사용자 인증 정보 만들기로 api키를 발급한다. 사용설정된 API 및 서비스 에서 검색으로 두 개 사용 클릭한다. env파일 추가해서 api키 붙여넣기한다. Seacrbar에 적용 import { View, Text } from "react-native"; import { GooglePlacesAutocomplete } from "react-native-google-places-autocomplete"; import React..

사용 설명서에 따라 라이브러리를 설치한다. App.js에서 설치한 라이브러리 import해준다. import * as SecureStore from "expo-secure-store"; 토큰을 받아와서 함호화하고 저장한다 ClerkProvider에 추가한다 const tokenCache = { //clerk jwt 토큰을 받아서 함호화 async getToken(key) { try { return SecureStore.getItemAsync(key); } catch (err) { return null; } }, //암호화 된 토큰 저장하기 async saveToken(key, value) { try { return SecureStore.setItemAsync(key, value); } catch (err..

https://clerk.com/ https://undraw.co/illustrations Illustrations | unDraw The design project with open-source illustrations for any idea you can imagine and create. Create beautiful websites, products and applications with your color, for free. undraw.co 이미지 참고 파이어 베이스를 사용하지 않고도 인증을 해주는 서비스가 있음 Clerk | Authentication and User Management The easiest way to add authentication and user management t..

assets -> fonts -> images 에 이미지 저장 새 폴더 생성 App -> Screen 및 파일 생성 LoginScreen.jsx rnf 입력 후 엔터하면 자동생선 import { Text, View } from 'react-native' import React, { Component } from 'react' export default class LoginScreen extends Component { render() { return ( LoginScreen ) } } ※ Splash 이미지란? 앱을 실행하였을 때 앱 로딩되는 사이 사용자에게 보여지는 이미지를 말한다. 보통 앱이 로딩 중일 때 사용된다. Expo 라이브러리에서 Splash 이미지를 제어할 수 있는 라이브러리가 존재한다. ..

https://blog.naver.com/drv983/223316019428 커스텀 폰트 https://docs.expo.dev/versions/latest/sdk/font/ https://docs.expo.dev/versions/latest/sdk/splash-scr... blog.naver.com https://docs.expo.dev/versions/latest/sdk/splash-screen/ SplashScreen A library that provides access to controlling the visibility behavior of native splash screen. docs.expo.dev font와 splashScreen을 설치한다. splashScreen은 로딩 시 나타나는 ..