리액트 기초 강의 4주차 정리 -2

서버와 서버리스

 

-웹의 동작 방식

 

-서버가 하는 일

서버가 하는 일은 엄청 많아요. 우리가 알고 있는 것처럼 데이터도 관리하고,

분산처리도 하고, 웹 어플리케이션도 돌려야 하고...

서버가 할 일이 많다는 건, 서버가 하는 일을 우리가 전부 관리해줘야한다는 이야기이기도 해요. 😢

 

-서버리스가 뭔데?

서버리스는 서버가 없다가 아니라, 서버를 신경쓸 필요 없다입니다. 이미 누군가가 구축해둔 서버의 일부분을 빌려서 쓸 수 있어요. 우리가 인프라를 구축하고, 서버 스펙을 고민할 필요 없다는 소리죠! 우린 그냥, 우리한테 필요한 서버를 필요한만큼만 빌려 쓰면 되니까요.

 

Firebase란?

 

-BaaS

BaaS는 Backend as a Service의 약자입니다.

→ 우리가 흔히 백엔드 하면 떠올리는 것들을 빌려오는거예요.

우리가 쓸 파이어베이스를 예로 들면, 데이터 베이스, 소셜 서비스 연동(일종의 소셜 로그인), 파일시스템 등을 API 형태로 제공해줍니다!

 

-Firebase 간단 소개

우리는 이중에서 Firestore를 사용할거예요!

Hosting(서버 없이 웹 서비스를 배포할 수 있도록 도와 주는 서비스)도 한번 써볼거예요

 

firestore는 일명 realtime-database를 제공하는 서비스입니다.

• 실시간으로 데이터가 추가되고, 삭제되는 걸 우리 클라이언트에 알려줘요.
• 리액트와는 react-firebase라는 패키지를 통해 편리하게 연결할 수 있어요!
• 주의! 우리는 spark 요금제를 쓸거예요!(무료입니다!)

FireStore 설정하기

 

-파이어스토어란?

Firebase에 포함되어 있는 서비스 중 하나로 유연하고 확장 가능한 NoSQL 클라우드 데이터베이스입니다!

근데 데이터베이스가 뭐야?

데이터베이스는 크게 두가지가 있음. 하나는 SQL 방식, 다른 하나는 NoSQL 방식.

SQL 방식으로는 우리가 한번쯤 들어봤을 MySQL이라든가 오라클 db라든가 이런 친구들이 SQL 방식임.

데이터 저장을 엑셀에다 하는 것 처럼 어떤 테이블이 있고 어떤 테이블에 어떤 셀들이 있고 그 셀에 데이터를 예를 들어서 사람이라는 테이블이 있다고 치면 거기 데이터 하나에 <이름: 지니>  있고 <나이: 28살> <성별: 여> 등등 이런 식으로 엑셀에 쓰듯이 데이터가 쭉쭉 들어가는 것. 이런게 SQL 방식!

 

그리고 우리가 지금 쓰는 NoSQL 방식이 있는데, 얘는 어떻게 생긴 거냐면 우리 많이 봤던 딕셔너리처럼 생김.

딕셔너리처럼 생겨서 유연한 편.

예를 들어 우리가 엑셀에다 뭔가를 관리할 때 원래는 사람이라는 테이블에 이름, 나이, 성별밖에 없었어.

그런데 여기에 키라는 정보를 하나 더 담고 싶어. 몇 cm인지. 그런데 키라는 정보를 하나 담고 싶으면 키라는 셀을 더 추가할 것임. 이거 하나 추가하면 어떻게 됨? 

이미 저장되어 있던 다른 데이터들도 전부 다 키라는게 생김!

반면 NoSQL, 즉 딕셔너리 같은 경우에는 이 한 딕셔너리에 키값 하나 더 생긴다고, 키라는 Key값 하나 더 생긴다고 다른 딕셔너리 건드릴 필요 없음. 그래서 유연하고 확장 가능하다고 표현!!!

 

 

- 파이어스토어 구조:

1) Collection: 문서(다큐먼트)의 집합 (딕셔너리들이 모여있는 형태)

2) Document: JSON 형식으로 데이터를 저장할 수 있음

 

-파이어 스토어 설정하기(이 외에도 파이어스토어 설치부터 보고싶으면 강의자료 gogo)

 

-리액트에 Firebase 연동하기

 

1) 설치부터!

yarn add firebase

2) config 가져오기

(1) src 폴더 하위에 firebase.js 파일을 만들기

//firebase.js
import firebase from "firebase/app";
import "firebase/firestore";

const firebaseConfig = {
    // firebase 설정과 관련된 개인 정보
};

// firebaseConfig 정보로 firebase 시작
firebase.initializeApp(firebaseConfig);

// firebase의 firestore 인스턴스를 변수에 저장
const firestore = firebase.firestore();

// 필요한 곳에서 사용할 수 있도록 내보내기
export { firestore };

 

(4) App.js 에서 firebase.js에서 내보낸 firestore가져오기

import { firestore } from "./firebase";

(5) componentDidMount에서 데이터 불러와보기

(6) 실제로 값 가져오기.

 

-데이터 여러개 가져오고 싶을 땐?

 

array 형태로 담아주면?

FireStore 데이터 가지고 놀기

 

Firestore에서 우측 상단에 <문서로 이동> 클릭

then은 요청이 끝나고 나면 내가 뭐를 할거야 인데 뒤에 아이디를 볼 수 있음.

처음에 추가할 땐 (add) 우리가 id를 저장하지 않고 collection에다 바로 add를 해서 추가를 하고 있는데 

추가가 되고 난 다음엔(then) 자동으로 아이디가 하나 생겼을 것임.

 

-app.js에서 firestore 데이터 가지고 놀기

1) 데이터 추가하기

콜렉션을 찾고 → add! 대시보드에서 잘 추가되었는 지 확인해봅시다!

bucket.add({ text: "수영 배우기", compeleted: false });

2) 데이터 수정하기

콜렉션을 찾고 → 도큐먼트 id로 set!

bucket.doc("bucket_item").update({ text: "수영 배우기", compeleted: false });

3) 데이터 삭제하기

콜렉션을 찾고 → 도큐먼트 id로 delete!

bucket.doc("bucket_item").delete([도큐먼트 ID]);

 

콜렉션 이름을 바꿔주면 어떻게 될까?

-에러 안뜨고 새로운 콜렉션이 생김!!!

없는 콜렉션에 이름을 지정하면 어떻게 된다?

어떤 콜렉션이 하나 더 생기고 그 안에 문서 추가까지 잘 된다.

=>파이어스토어 가서 콜렉션 추가해줄 필요 없이 코드상에서 추가 하면 되겠구나.

 

다음시간엔 리덕스에 옮겨봐서 리덕스에서 관리해볼 것임!