🥦 React에 Firebase 연동시키는 방법

안녕하세요 오랫만입니다 오늘은 리액트와 파이어베이스 연동하는 방법에 대해서 기록해보려고 합니다. 재밌게 봐주세염 🌚

firebase 주소

https://firebase.google.com/?gclid=Cj0KCQjwjo2JBhCRARIsAFG667XosDrq2QsPwKjMqQTpA72q942GF4pB9U_nfwOXF1fuxJ4Qz6SM5QgaAskiEALw_wcB&gclsrc=aw.ds

🔥 firebase 시작하기 (구글 유저만 가능)

파이어베이스 주소 들어가면 나오는 화면인데요. 여기서 시작하기 버튼을 눌러주세요. 참고로 구글 유저만 가능하다고 합니다.

프로젝트 추가

저는 이미 만들어 놓은 프로젝트들이 있는데 프로젝트가 없는 분들은 프로젝트 추가 버튼을 눌러주세요.

프로젝트 추가 과정 (3/3단계)

이렇게까지 하시고 프로젝트 만들기 누르면 성공입니다 🙆🏻‍♀️

그리고 만들어진 해당 프로젝트를 클릭하시면 앞면에 이런게 나오는데요. ios와 안드로이드 아이콘 </> 과 옆에 유니티 아이콘 총 4가지 아이콘이 나와요. 프로젝트 형태에 맞는 걸로 선택해주시면 됩니다. 저는 참고로 웹 개발을 할 것이기 때문에 </> 를 클릭했습니다. 그리고 다음 단계에서 앱 닉네임 작성하시고 앱 등록 누르시면 돼요.

🔥 React와 firebase 연동하기

이번에는 리액트와 파이어베이스 연동하는 방법 알아볼건데요. 파이어베이스에서 클릭했던 프로젝트 화면에 옆구리 메뉴바를 보시면 상단에 톱니바퀴를 클릭해주세요. 그럼

• 프로젝트 설정
• 사용자 및 권한
• 사용량 및 결제

이렇게 세 가지 탭메뉴가 나타나는데 프로젝트 설정 클릭해주세요.

React 에서 해줘야 할 것

firebase 설치하기

npm install --save firebase

firestore.js 파일 생성하기

파일명은 하고싶은 이름으로 하셔도 됩니다. 저는 firebase 저장소라는 의미로 firestore로 지정했습니다.

App.js 파일에 불러오기

콘솔에다 제대로 연동이 됐는지 출력하여 확인해보시면 됩니다!