14. 서버연결하기(firebase)

1. 서버와 서버리스

서버

---

웹의 동작방식

• 웹은 요청과 응답으로 굴러간다.
• 클라이언트가 서버에게 요청, 서버가 클라이언트에게 응답한다.

서버가 하는일

• 엄청 많음
• 데이터관리, 분산처리, 웹어플릭케이션 돌리기...
  
  
  

서버리스

---

• 서버를 신경 쓸 필요 없음
• 우리한테 필요한 서버를 필요한만큼 빌려 쓰면됨

2. Firebase

Firebase

---

Firebase 사이트 바로가기

• 제품에 들어가서 둘러보면 다양한 서비스를 이용할 수 있다.
• 공식문서 살펴보기
• firestore로 실시간으로 데이터가 추가되고, 삭제되는 걸 우리 클라이언트에 알려준다.
• 리액트와 react-firebase라는 패키지를 통해 편리하게 연결할 수 있음
  
  

BaaS는 뭘 빌려오는 걸까?

• Backend as a Service의 약자로, 우리가 흔히 백엔드 하면 떠올리는 것들을 빌려오는 거임
• 데이터 베이스, 소셜 서비스연동, 파일시스템 등을 API 형태로 제공함

Firebase에서 Firestore이용하기

---

Firestore

• firebase에 포함되어있는 서비스 중 하나로, 유연하고 확장 가능한 NoSQL 클라우드 데이터베이스임

• 구조
  - Collection: 문서(다큐먼트)의 집합
  - Document: JSON형식으로 데이터를 저장할 수 있음
  

데이터베이스

• 두가지가 있다.
• SQL (MySQL, 오라클...) : 엑셀에 저장하는 것처럼 테이블 형식으로 데이터를 저장함.
• NoSQL : 딕셔너리 형태로 저장함. 상대적으로 유연함.

리액트에서 Firebase 연동하기

---

• yarn add firebase 설치
• config 가져오기
  1. src 폴더 하위에서 firebase.js 파일을 만들어주기
  2. firebase 대시보드에서 웹버튼을 눌러주기
  3. 앱 이름을 적고, 잠시 기다리면 sdk추가영역에 텍스트가 뜸
  4. App.js 에서 firebase.js에서 내보낸 firebase 가져오기
  5. componentDidMount에서 데이터 불러와보기

FireStore 데이터 가지고 놀기

---

• app.js 에서 firestore 데이터 가지고 놀기
• 콜렉션 이름을 바꾸면 어떻게 될까?