[TIL 0405] firebase

💡 Firebase란?

프론트엔드 개발자가 백엔드 없이 데이터를 직접 넣을 수 있는 프로그램

• 설치명령어 : (sudo) yarn add firebase
• GA: 접속할 때마다 어떤아이피에서 접속했는지 통계적으로 분석해주는 서비스!

1. firebase 홈페이지 이동
2. 시작하기
3. 프로젝트 만들기
4. 프로젝트 이름 지정
5. google 애널리틱스 해제(사용x)
6. FireBase를 웹에 추가
7.  npm 사용으로 체크 확인하고, 아래코드 복사
   src폴더 -> commons -> libraries -> firebase.ts

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: "AIzaSyDIVB-mTIkJSwsEyCctGLFUfQSF8Xc5vBs",
  authDomain: "frontend12-ddfb0.firebaseapp.com",
  projectId: "frontend12-ddfb0",
  storageBucket: "frontend12-ddfb0.appspot.com",
  messagingSenderId: "1053880820523",
  appId: "1:1053880820523:web:dbb27d81afd0bcce371b6e",
};
// Initialize Firebase
export const firebaseApp = initializeApp(firebaseConfig);

8. 빌드 > Firestore Database 로 접속
9. 테스트 모드 시작
10. Cloud Firestore의 위치 : asia-northeast3 으로 설정
11. 기능 만들기
    
    

import { collection, getFirestore, addDoc, getDocs } from "firebase/firestore";
import { firebaseApp } from "../../../src/commons/libraries/firebase";
export default function FirebasePage(): JSX.Element {
  const onClickSubmit = (): void => {
    const board = collection(getFirestore(firebaseApp), "board");
    void addDoc(board, {
      writer: "writer",
      title: "title",
      contents: "contents",
    });
  };
  const onClickFetch = async (): Promise<void> => {
    const board = collection(getFirestore(firebaseApp), "board");
    const result = await getDocs(board);
    const datas = result.docs.map((el) => el.data());
    console.log(datas); //el.data를 해야 뽑힘
  };
  return (
    <>
      <button onClick={onClickSubmit}>등록하기</button>
      <button onClick={onClickFetch}>조회하기</button>
    </>
  );
}

-> datas = [data,data,data,data]

data가 서류!
객체하나가 서류한장이라고 생각하면 됨!