Firebase V9 Firestore setDoc()을 사용하여 데이터 추가

Firebase 버전 9 Cloud Firestore에 문서 데이터를 추가하는 데 사용할 수 있는 두 가지 방법이 있습니다.

addDoc()

setDoc() → 현재 위치

참고: 더 진행하기 전에 세 가지 작업을 수행해야 합니다.

Create A Firebase Project from Firebase Console

Register an app for Web (JavaScript)

Add Firebase SDK to JavaScript Web app

setDoc() 메서드를 사용하여 다음을 만들어 Firestore 데이터베이스에 문서를 추가할 수 있습니다.

Auto-generated ID 또는

Custom ID

자동 ID와 함께 setDoc()을 사용하여 데이터 추가

setDoc() 메서드를 사용하려면 Firebase Firestore Import 문에서 세 가지 메서드를 가져와야 합니다.

import { getFirestore, collection, setDoc } from "firebase/firestore";

getDatabase() → 데이터를 문서로 추가하려는 Firestore 데이터베이스.

collection() → 컬렉션 이름과 데이터베이스 참조를 추가하려는 위치.

setDoc() → 컬렉션 이름 및 db 참조와 함께 데이터를 실제로 전달하는 위치.

Firestore 데이터베이스를 초기화합니다.

const db = getFirestore(app);

Collection() 메서드

setDoc() 메서드의 첫 번째 인수는 collection() 메서드입니다.

이 collection() 메서드도 두 개의 인수를 사용합니다.

데이터베이스 → DB

컬렉션 이름 → 사용자

collection() 메서드를 호출하고 데이터베이스 참조(db)와 컬렉션 이름(국가)을 따옴표로 묶어 전달합니다.

dbRef라는 상수에 할당합니다.

const dbRef = collection(db, "countries");

문서 데이터 {}

setDoc() 메서드의 두 번째 인수는 국가 컬렉션 내에 문서로 저장하려는 실제 데이터입니다.

좋은 소식은 JavaScript 객체를 Firestore 데이터베이스 내에 문서 데이터로 간단히 저장할 수 있다는 것입니다.

따라서 몇 개의 키-값 쌍(일명 속성)이 있는 JavaScript 객체를 생성해 보겠습니다.

const data = {
   name: "Ottawa",
   country: "Canada",
   province: "ON"
};

setDoc() 쿼리 만들기

이제 setDoc() 메서드를 성공적으로 사용하기 위해 필요한 두 가지 인수가 있습니다.

setDoc() 메서드를 호출하고 dbRef 및 데이터를 인수로 전달합니다.

import { getFirestore, collection, setDoc } from "firebase/firestore";

// Your Firebase SDK Initialization code here

const db = getFirestore(app);

setDoc(dbRef, data)
.then(docRef => {
    console.log("Document has been added successfully);
})
.catch(error => {
    console.log(error);
})

setDoc() 쿼리 실행…

자동으로 생성된 문서 ID를 사용하여 국가 컬렉션 내에서 완전히 새로운 문서가 생성된 것을 볼 수 있습니다.

Custom-ID와 함께 setDoc()을 사용하여 데이터 추가

setDoc() 메서드를 사용하면 Firestore 데이터베이스에 데이터를 추가할 때 고유한 사용자 지정 문서 ID를 만들 수 있습니다.

collection() 메서드를 사용하는 대신 doc() 메서드를 사용해야 합니다.

import { getFirestore, doc, setDoc } from "firebase/firestore";

getDatabase() → 데이터를 문서로 추가하려는 Firestore 데이터베이스.

doc() → 컬렉션 이름과 데이터베이스 참조 및 사용자 정의 문서 ID를 추가하려는 위치.

setDoc() → 컬렉션 이름 및 db 참조와 함께 데이터를 실제로 전달하는 위치.

Doc() 메서드

사용자 정의 문서 ID를 생성할 때 setDoc() 메서드의 첫 번째 인수는 doc() 메서드입니다.

이 doc() 메서드는 세 개의 인수를 사용합니다.

데이터베이스 → DB

컬렉션 이름 → 국가

사용자 정의 문서 ID → [email protected] (이것은 당신이 원하는 무엇이든 될 수 있습니다)

doc() 메서드를 호출하고 따옴표로 묶인 데이터베이스(db) 참조 및 컬렉션 이름(도시)과 사용자 지정 문서 ID( [email protected] )를 인수로 전달합니다.

docRef라는 상수에 할당합니다.

const docRef = doc(db, "countries", "[email protected]" );

문서 데이터 {}

setDoc() 메서드의 두 번째 인수는 국가 컬렉션 내에 문서로 저장하려는 실제 데이터입니다.

따라서 몇 개의 키-값 쌍(일명 속성)이 있는 JavaScript 객체를 생성해 보겠습니다.

const data = {
   name: "Ottawa",
   country: "Canada",
   province: "ON"
};

setDoc() 쿼리 만들기

setDoc() 메서드를 호출하고 docRef 및 데이터를 인수로 전달합니다.

import { getFirestore, collection, setDoc } from "firebase/firestore";

// Your Firebase SDK Initialization code here

const db = getFirestore(app);

const docRef = doc(db, "countries", "[email protected]" );

const data = {
   name: "Ottawa",
   country: "Canada",
   province: "ON"
};

setDoc(docRef, data)
.then(() => {
    console.log("Document has been added successfully);
})
.catch(error => {
    console.log(error);
})

setDoc() 쿼리 실행…

그리고 국가 컬렉션 내에서 완전히 새로운 문서가 생성된 것을 볼 수 있지만 이번에는 자체 사용자 지정 문서 ID를 사용합니다.

Note: One of the cases for using a custom document ID would be an email address as they’ll be unique to each user.

However, it’s often recommended to let Firestore create the Auto-generated Document ID in order to avoid accidental duplications.

setDoc() 메서드를 사용하여 기존 문서 데이터를 업데이트할 수도 있습니다.