firebase + react 나의 setting

TOC

1. environment
   잡설
2. setting

1. environment 🏔

node@16.x.x
firebase@9.12.0
macbook air m1

처음에 node 버전이 firebase와 맞지 않아 정체불명의 에러로 고생했었다.

node@14.x.x를 사용하신다면 업데이트를 해주셔야 정상적인 사용이 가능합니다.

1-2. 잡설

firebase는 프론트엔드 입장에서 놓고 보면 정말 놀라운 도구입니다.

1. Oauth가 놀랍도록 쉽다.

2. user의 생성과 삭제 관리등을 모두 해결해준다.

3. API document 설명이 너무나 잘 되어있다. ( 이렇게 잘 된것은 본 적이 없음 )

4. 빠르고 부분 무료이다.

5. DB를 잘 몰라도 아무튼 잘 돌아간다

6. snapshot을 지원해 실시간으로 DB와 sync 가능

7. 등등

이렇게나 좋은 firebase의 장점들을 한번에 아..이건 좀..을 외치게 하는 것은
유료라는 것이다.

무료 API들을 사용하면 위의 것들이 어느정도 해결되지 않을까?
돈을 쓰기 싫으니 말이다.

1. Oauth, passport js 를 사용하기 위한 배경지식들, node와 express 등의 이해, 기타 여러 API의 이해를 요구함

2. user의 생성과 삭제 관리 등등 backend가 처리해주는 일을 너무 쉽게 처리해준다. 무려 email로 비밀번호 변경도 한번에 해결된다.

3. API 설명 정말 정말 친절하다.

4. 제작하는 서버보다는 느리겠지만 아무튼 쓸만하다.

5 & 6. 이건 backend를 배워보고 싶은 욕망을 들끓게 하는 기술이다. 알아야만 사용 가능

위의 여러 문제들 중 가장 문제는 비용이다. 비용 때문에 firebase를 버리고 무료 서비스를 통해 서버를 만들고
관리 유지보수 하는 회사가 많다고 어딘가에서 들었다.

2. setting

1. firebase로 이동해 로그인한다.

2. console에서 원하는 형태의 project를 생성한다.
   

3. 필자는 react + firebase를 사용할 것이다.
   CRA기반이 아니므로 세팅에 약간의 차이가 있을 수 있다.

4. 터미널에서 npm i firebase-tools -g를 통해 firebase를 설치

설치가 이상 없이 완료된다면 위의 login option을 통해 로그인한다.

$ firebase login

로그인상태라면 id를 반환한다.

$ firebase init

init 설정을 통해 firebase.json 파일을 설정한다.

에뮬레이팅과 배포 서브등의 기능도 한번에 제공한다.

deploy의 경우 public 폴더에 deploy 할 파일들을 넣고 deploy를 해주자

react 세팅은 딱히 건드린게 없다.

import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';

const firebaseConfig = {
  apiKey: 'your apiKey',
  authDomain: 'your domain,
  projectId: 'your projectId',
  storageBucket: 'your storageBuket',
  messagingSenderId: 'your messagingSenderId',
  appId: 'your appId',
  measurementId: 'your measurementId',
};
firebase.initializeApp(firebaseConfig);

google에서 제공하는 firebase 콘솔에서 프로젝트를 추가해주면 위와 같이 firebaseConfig를 생성해준다.
CDN을 html에 붙여놓는것도 방법이지만 위와 같은 방법을 적극 추천한다.

version 9에선 webpack의 treeshaking이 적용되게끔 바뀌었다는데 아직 beta라 잘 모르겠다.

나머지는 firebase doc을 뒤져가며 필요한 기능에 따라 firebase/auth => authentication 관련
firebase/firestore => firestore 관련 api들을 제공해준다.

정말 천재 백엔드 개발자가 원하는걸 다 들어주는 기분으로 개발이 진행된다. 😎 단 유료!💸