[Firebase] 파이어베이스 firestore 데이터 저장하기

firebase 공식문서

https://firebase.google.com/docs/firestore?hl=ko 

Firestore  |  Firebase

 

 

firebase 패키지를 설치한다.

npm i firebase --save

 

데이터 저장에 필요한 요소를 import 한다.

import { initializeApp } from 'firebase/app';
import { getFirestore, collection, addDoc } from 'firebase/firestore';

 

프로젝트를 생성하면 나오는 config 정보를 이용해서 firebaseConfig를 선언한다. 설정에서 다시 확인할 수 있다.

    const firebaseConfig = {
      apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
      authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
      projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
      storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
      messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
      appId: import.meta.env.VITE_FIREBASE_APP_ID,
      measurementId: import.meta.env.VITE_FIREBASE_MEASUREMENT_ID,
    };

 

firebaseConfig를 이용해서 파이어베이스에 접근하고 데이터베이스를 불러온다.

    initializeApp(firebaseConfig);
    const db = getFirestore();

 

저장할 데이터를 선언하고 addDoc 메소드를 이용해서 데이터를 넣는다. 컬렉션은 프로젝트를 생성하면서 사이트에서 미리 만들어뒀다.

    const data = { name, email, attend, dinner, memo, createdAt: new Date() };
    
    // await addDoc(collection(db, 내가 정한 컬렉션 이름), 데이터);
    await addDoc(collection(db, 'attend-survey'), data);

 

 

 

전체코드

import { initializeApp } from 'firebase/app';
import { getFirestore, collection, addDoc } from 'firebase/firestore';

...


const writeData = async () => {
    const firebaseConfig = {
      apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
      authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
      projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
      storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
      messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
      appId: import.meta.env.VITE_FIREBASE_APP_ID,
      measurementId: import.meta.env.VITE_FIREBASE_MEASUREMENT_ID,
    };

    initializeApp(firebaseConfig);
    const db = getFirestore();
    const data = { name, email, attend, dinner, memo, createdAt: new Date() };

    await addDoc(collection(db, 'attend-survey'), data);
  };
  
  
 ...
 
 
<Link to='/complete' onClick={() => writeData()}>
  <button className='btn'>제출하기</button>
</Link>

 

---

collection에 저장되는 Doc이름을 지정해서 넣고 싶었는데 그건 찾아봐도 안나와서 자동으로 생성되는 해시에 몸을 맡겼다...⭐️ 고유한 아이디가 필요한건지 딱히 이름 지정은 안되는 것 같다.

 

데이터를 작성할 때 merge 옵션을 주는게 있는데 같은 이름인 Doc의 필드 데이터를 덮어씌우거나 추가하는 옵션이다.