[React] firebase 연결

[1] firebase 접속 후 프로젝트 추가

: 프로젝트 추가 : 프로젝트 이름입력 : '계속' 누르기 : '애널리틱스 계정' 선택하고 '프로젝트 만들기' 누르기

[2] Database 만들기

: 좌측 메뉴의 'Firestore Database' 클릭 : '데이터베이스 만들기' 누르기 : '다음' 누르기 : '만들기' 누르기

[3] 웹 추가하기

: '< / >' 모양의 버튼 누르기 : 앱 닉네임 등록하기 : npm install firebase 명령어를 입력하기
: vscode 프로젝트에서 firebase.js 파일 생성 후 코드 복사해서 붙여넣기
: firebaseConfig의 경우 env 파일을 만들어서 환경변수화 시키는 것이 보안적으로 좋다. : npm install -g firebase-tools 명령어를 입력하기
: 터미널 창에서 firebase를 사용하기 위한 패키지 : 호스팅하여 배포 시에 사용할 부분이니 참고 정도만!

[4] firebase에 등록한 데이터 get하는 방법

: firestore에 위치한 '규칙'을 위와 같이 'true'로 수정해준다. : 또한, src와 .env 파일의 동일한 위치해야 한다. : get의 경우 사진과 같이 api를 만들어서 사용하는 것을 추천한다.
: collection을 통해서 db의 컬렉션을 찾고, query 구문을 통해 q라는 변수에 저장하고, getDocs를 통해 해당 값을 Snapshot으로 가져온다.
: forEach 구문을 통해서 각 데이터를 배열에 추가하고, 반환한다.