Firebase/Firestore 설정하기리액트 기초/Firebase2021. 8. 22. 14:26
Table of Contents
Firebase?
- Firebase는 서버리스 서비스 중에 하나이다. Baas 중에 하나라고 표현할 수 있다.
- Baas는 는 Backend as a Service의 약자이다. → 우리가 흔히 백엔드 하면 떠올리는 것들을 빌려오는 것이다.
- Firebase는 realtime-database인 firestore와 Hosting(서버 없이 웹 서비스를 배포할 수 있도록 도와주는 서비스)을 제공하는데 이 둘을 사용해보자.
- 또한, 데이터 베이스, 소셜 서비스 연동(소셜 로그인 등), 파일 시스템 등을 API 형태로 제공해준다!
- 여기를 클릭해서 Firebase 사이트를 구경해보자!
Firebase 설정하기
- 여기를 클릭해서 firebase 홈페이지에 접속 후 시작하기 버튼을 클릭한다.
- 프로젝트 만들기 클릭.
- 프로젝트의 이름을 정하고 약관에 동의
- 프로젝트 애널리틱스 설정하고 계속 버튼 클릭
- 원하는 나라를 선택한 후에 애널리틱스 약관에 동의 후 프로젝트 만들기 버튼 클릭.
Firestore
- Firebase에 포함되어 있는 서비스 중 하나로 유연하고 확장 가능한 NoSQL 클라우드 데이터베이스이다!
- 구조는 아래와 같다.
Collection | 데이터를 담고 있는 문서(Document)의 집합 |
Document | JSON 형식으로 데이터를 저장할 수 있음 |
Field | Document를 이루는 요소 하나하나. key & value 쌍으로 이루어져있다. |
Firestore 설정하기
- 위에서 만든 Firebase 프로젝트 클릭.
- Cloud Firestore 클릭.
- 데이터 베이스 만들기 클릭
- 보안규칙 설정하기.
- 테스트 모드에서 시작을 지정해야 localhost에서 Firestore로 데이터 요청이 가능하다!
- Cloud Firestore 위치 설정. DB를 어디에 둘 것인지 물어보는 부분이다.
- asia-northeast2로 설정하자.
- 위치 설정은 한번 하면 바꾸지 못하기 때문에 다시 설정하고 싶으면 DB를 지우고 다시 만들면 된다.
대시보드에서 firestore 데이터 넣기
- Firestore 설정을 끝냈으면 Cloud Firestore에 아래와 같은 화면이 보일 것이다.
- 이 화면을 대시보드라고 부른다.
- 컬렉션 시작 버튼을 클릭하자.
- 컬렉션의 이름을 지정해주자.
- 컬렉션은 데이터를 담고 있는 문서의 집합이다.
- 컬렉션에는 최소한 하나 이상의 문서가 필요하다.
- 문서 ID가 필요한 이유는 데이터를 수정할 때, 수정할 문서의 정확한 고유값이 있어야 수정할 수 있다. 수정하거나 삭제하거나 할 때 필요한 ID를 넣어주는 것이다.
- 지정해주지 않으면 자동으로 생기지만 직접 ID를 지정해보자.
- 데이터가 생성된 것을 확인할 수 있다.
'리액트 기초 > Firebase' 카테고리의 다른 글
React & Firebase 데이터 추가/수정/삭제 (0) | 2021.08.23 |
---|---|
React & Firebase 연동하기/데이터 가져오기 (0) | 2021.08.22 |
@덕구공 :: Duck9s'
주니어 개발자에욤
포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!