firebase 라이브러리 설치 및 연결 👏프로젝트 생성이 참 쉽죠? 프로젝트가 생성되었으면, 파이어베이스에 iOS를 개발하고 있는지 안드로이드를 개발하고 있는지 웹을 개발하고 있는지 알려줘야 개발 중인 앱에 파이어베이스를 코드단에서 연결할 수 있는 연결 정보를 줍니다.
일단 우린 안드로이드, iOS 앱 전용 개발을 Expo에서 따로 하고 있지 않고 자바스크립트로만 개발을 하고 있기 때문에 웹 SDK를 이용하면 쉽게 파이어베이스 사용이 가능합니다.
[실습 ✍️] 파이어베이스 프로젝트 내에서 앱 생성하기 **호스팅 설정은 체크 하지말고 진행! 이렇게 파이어베이스 프로젝트 내에서 앱을 생성하면, 최종적으로 연결 정보를 줍니다.
[실습 ✍️] 설치 1) 파이어베이스 연결 정보 확인 >> 앱이 완성되면, 콘솔로 이동한다음 설정 버튼을 눌러주세요 >> 드래그해서 밑을 보면, 우리가 사용할 접속 정보가 코드로 존재합니다 2) 앱에 파이어베이스 도구 설치 및 연결 >> 파이어베이스를 이용할 수 있게 도와주는 expo 도구를 설치합니다설치가 완료됐으면, firebaseConfig.js 파일을 하나 생성해주세요. 그리고 다음 코드를 입력해주세요! 접속 정보엔 여러분들 접속 정보 코드를 넣어야 합니다!
expo install firebase
설치하다 오류가 났다..!!! [해결방법👀] 최근 Node.js의 LTS 버전이 v12에서 v14로 업데이트가 되었습니다. 그래서 v14 버전을 많이 설치하셨는데요, 윈도우 PC에서 Node.js v14 버전과 firebase 라이브러리의 호환성이 맞지 않는 이슈가 확인이 되었습니다. v12에서는 정상적으로 설치가 되는 것을 확인했습니다. v12로 버전을 다운그레이드 하는 방법을 가이드 드리겠습니다.
제어판의 프로그램 추가/제거로 이동하셔서 현재 설치되어 있는 Node.js 버전을 제거합니다.
탐색기로 프로젝트 폴더로 이동해, yarn.lock 파일과 node_modules 폴더를 삭제합니다
터미널로 프로젝트 폴더로 이동 후 yarn을 입력합니다. VS Code로 여셔도 상관 없습니다.
설치가 완료되었다면, 이제 다시 한 번 expo install firebase를 입력합니다.
[🤯firebaseConfig.js 코드 설정시 유의사항!!!] 최근 파이어베이스에서 프로젝트를 만들면 원래는 설정 코드에 넣어줬던 databaseUrl을 안넣어주고 있습니다. 따라서 다음과 같이 리얼타임 데이터베이스 탭으로 들어가신다음, 데이터베이스 주소를 설정코드에 넣어주세요!
[🤯파이어베이스 버전업에 따른 코드 유의사항!!!] Firebase 패키지의 버전이 올라가면서 API 사용법이 변경되어서 config파일에 오류가 날 수도 있습니다. 이 오류는 파이어베이스 패키지 버전을 낮춰서 해결할 수도 있구요, 아래와 같이 소스 코드를 일부 변경해서 해결할 수도 있어요! firebaseConfig.js 의 import * as firebase from 'firebase/app'; 이거를 import firebase from 'firebase/app'; 이렇게 바꿔주시면 문제가 해결됩니다!
[파이어베이스] 파일 스토리지(storage)
파일 저장소 스토리지(storage) 가장먼저 사용하게 되는 파이어베이스 서비스는 파일 스토리지입니다. 간단히 파일 저장소라고 여기면 충분합니다. 멀리 있는 파일 저장소에 이미지 및 사용 할 파일을 올려두고, 필요할 때마다 꺼내 쓰는 용도로 사용하면 됩니다.
[실습 ✍️] 이미지 스토리지에 올려보기
스토리지 시작하기 스토리지 시작하기 > 설정에서 그냥 다음 클릭 > 서버 위치 asia선택 후 완료!
폴더만들고 파일 업로드하기
[실습 ✍️]이미지 확인하기 이렇게 파일을 올리기만 해도, 이미지가 저장된 주소를 제공해줍니다!
[파이어베이스] 리얼타임 데이터베이스 - 설정
리얼타임 데이터베이스 소개 우리가 배운 리스트, 딕셔너리 구조, 즉 JSON 형태로 저장/관리되는 데이터베이스 서비스 입니다.
이 서비스를 사용 할 땐, 파이어베이스에서 제공해주는 함수들을 이용하기만 하면 데이터 저장/수정/삭제가 가능합니다.
이름이 리얼타임 데이터베이스인 이유는, 플랫폼과 실시간 데이터 주고 받는 것에 특화되어 있어서 그런데요! 우린 그런 기능까진 필요없으니 이름이 가진 의미정도만 알고 가자구요!
그럼 언제 파일 저장소 스토리지를 쓰고, 언제 리얼타임 데이터베이스를 사용하나요?
**이미지 저장 → 파일 저장소 스토리지 JSON 데이터 → 리얼 타임 데이터베이스**
[실습 ✍️] 리얼타임 데이터베이스 생성 다음 순서로 데이터베이스를 생성하고, 권한을 모두 공개로 바꿔주세요 ** 만약에 Realtime Database 탭이 왼쪽에서 보이지 않는다면, Cloud Firestore를 선택한다음 진행하세요
1) 앱에 firebaseConfig.js를 설정하여 파이어베이스에 접속 할 수 있게 되었습니다. 2) 리얼타임 데이터베이스를 생성했습니다. 3) 데이터베이스에 꿀팁을 업로드 했습니다.
그럼 이제 앱에서 사용할 일만 남았습니다!
현재 MainPage.js 코드 리뷰
파이어베이스를 이용해 전체 데이터를 조회 하는 방법은 전체 데이터를 가져오게끔 해주는 파이어베이스 제공 함수 사용 방법과 가져올 데이터가 어떠한 이름으로 리얼타임 데이터베이스에 저장되어 있는지를 알아야 합니다. 👌나만의 꿀팁 저장 위치 ✅전체 데이터 가져오기 함수 데이터의 저장 위치를 알았다면, 파이어베이스의 리얼타임 데이터베이스 전용 함수에 데이터 저장 위치를 알려주면서 데이터를 가져올 수 있습니다. 👀파이어베이스 API 함수는 그럼 어딨는가?
firebase_db.ref('/tip').once('value').then((snapshot) => {
let tip = snapshot.val();
})
🤦♀️ref('/tip') 이 부분에서 /tip 영역에 가지고 오고 싶은 데이터의 주소를 넣어주면 됩니다. 이 주소 앞부분에는 https://sparta.firebaseio.com/ 과 같은 기본 주소가 생략되어 있습니다.
firebaseConfig.js에서 이미 파이어베이스 계정을 세팅했기 때문에, 기본 주소와 정보들은 앱 내에서 사용하는 파이어베이스 함수들이 알고 있는 상태입니다
이 코드는 서버리스를 이용하여 데이터베이스를 조회하기 위해, 파이어베이스 측에서 정해놓은 API 사용방법입니다. 따라서 우린 공식 문서 그대로 사용 방법을 적용해야 합니다.
조회한 데이터는 snapshot 부분에 담겨서 {} 내부에서 사용할 수 있는데, 그 중 실제 우리에게 필요한 데이터는 snapshot.val()로 가져와 변수에 담아 사용할 수 있습니다.
🙌그럼 사용방법을 알았으니 MainPage.js에 적용해보겠습니다
우리가 사용했던 data.json과 구조가 완전히 동일한 데이터를 리얼타임 데이터베이스에 업로드했고, 그대로 가져와 사용하고 있으므로
기존에 관리하던 상태에 파이어베이스 데이터를 넣으면 앱이 정상적으로 동작합니다. 한 가지 달라진 점이 있다면, useEffect에서 setTimeout 함수를 더이상 사용하지 않는 다는 것입니다.
사용자들 마다 네트워크 상태가 모두 다를 것이기 때문에, 무조건 몇초 뒤에 실행 시키는 setTimeout 함수 기능보다, 파이어베이스 API의 실행 완료 시간에 맡겨두는 편히 더 나아보입니다. 이러한 이유로 setTimeout 함수를 사용하지 더이상 사용하지 않습니다.
따라서 파이어베이스로부터 즉, 서버로부터 데이터를 가져와 준비할 때까지 로딩 화면을 보여줬다가, 데이터가 준비가되면 실제 본 화면을 보여주는 자연스러운 서비스 환경을 사용자들에게 제공해줄 수 있습니다 🤢🤢🤢undefined is not an object (evaluating 'firebaseConfing.firebase_db_rdf')오류가 나서 나머지는 차후에 쓸게요 > firebaseConfig.js파일 삭제 후 다시 만들어서 해결했는데,,
지금은 undefined is not an object (evaluating '_app.default.apps) <이 오류가 났어요...슬랙즉문즉답에 올려도 답이 없네요 현재..
[파이어베이스] 리얼타임 데이터베이스 - 특정 데이터 읽기
특정 데이터 조회하기 현재 나의 꿀팁앱은, 이렇습니다. 메인 화면에서 꿀팁을(Card) 누르면 상세 화면으로 이동하죠! 이 부분을, 이제 전체 데이터를 상세 페이지로 넘겨주는 것이 아닌, 팁 `idx` 번호만 넘겨준다음 `DetailPage.js` 에서 `idx`로 상세 꿀팁 정보를 서버로부터 조회해서 뿌려주려 합니다.
[실습 ✍️] 적용 1. card.js 에서 detailpage.js 전달 데이터로 idx넘겨주기 card.js detailpage.js에서 넘겨받은 idx팁상세데이터조회
//MainPage로 부터 navigation 속성을 전달받아 Card 컴포넌트 안에서 사용 export default function Card({content,navigation}){ return( //카드 자체가 버튼역할로써 누르게되면 상세페이지로 넘어가게끔 TouchableOpacity를 사용 <TouchableOpacitystyle={styles.card}onPress={()=>{navigation.navigate('DetailPage',content)}}> <Imagestyle={styles.cardImage}source={{uri:content.image}}/><Viewstyle={styles.cardText}><Textstyle={styles.cardTitle}numberOfLines={1}>{content.title}</Text><Textstyle={styles.cardDesc}numberOfLines={3}>{content.desc}</Text><Textstyle={styles.cardDate}>{content.date}</Text></View></TouchableOpacity> ) }
[파이어베이스] 리얼타임 데이터베이스 - 쓰기
나만의 꿀팁 앱에서 데이터를 저장해야하는 상황 나만의 꿀팁 앱에서 파이어베이스로 데이터를 보내 저장하는 상황이 언제일까요? 바로 꿀팁 찜! 하기 버튼을 눌렀을 때입니다.
'특정' 사용자가 여러분이 만든 앱을 이용하다 꿀팁 찜! 버튼을 눌렀다면 파이어베이스에 어떤 식으로 저장을 해야 할가요?
이를 유념해서 한번 파이어베이스에 '어떤 구조'로 데이터를 보내 저장(쓰기) 해야 할지 생각해봅시다.
