본문 바로가기

프론트엔드 공부/firebase

[Firebase] firebase 설치

1.Firebase 사용 이유: 백엔드 서버를 대신 만들어주어 프론트엔드 개발만 하면 개발하기 용이함

단점은 AWS에 비해 사용량 많아질 수록 이용료 비쌈(db 데이터입출력 등 사용량 많을수록 비쌈)

보안 문제는 Cloud Firestore 규칙에 작성

 

2.설치방법:npm install firebase로 설치

firebase 프로젝트 만들기

-회원가입기능:authentication 시작하여 이메일 비번  사용설정 켜주기

-데이터베이스:firestore database 시작 >cloud firestore 위치 asia-northeast3으로 변경(서울과 가까울 것이므로 물리적으로 전송 빨라짐)

-사진저장소:storage

-호스팅업로드:hosting

 

3.코딩하기

create-react-app 폴더명 설치 

메인페이지에 디비와 연동되는 코드 짜고싶으면 스크립트 태그설치필요(firebase sdk) : npm i -g firebase-tools@9.12.1

설치 되면 파이어베이스 명령어를 칠수 있음

npm i firebase

firebase login

firebase init > proceed(y)> firebase cli setup (firestore, hosting, storage 체크) > use an existing project > enter

 

내파이어베이스 어떤 코드를 쓸것 인지 설정해주어야함! 

**파이어베이스홈페이지 에서 프로젝트 선택 > 프로젝트 개요 옆 설정버튼> 프로젝트 설정> 내앱 리스트에서 웹앱(</>) 클릭 후 하단 내용에 복붙 !!

index.js에 하단 내용 첨부

//index.js 첨부
import firebase from "firebase/app";
import "firebase/firestore";

var firebaseConfig = {
  apiKey: "qqq",
  authDomain: "qqq",
  projectId: "qqq",
  
};

firebase.initializeApp(firebaseConfig);
export const db = firebase.firestore();

4. 설치 완료 후 터미널에 firebase serve 명령어로 화면 띄워볼수 있음