CRUD

팀 멤버 소개를 하는 홈페이지를 만들기 위해 firebase를 사용하기로 했다.

DB도입을 위해 빠르고 간편하게 접근할 수 있는 firebase로 정했다.

 

Firebase를 설명해주는 공식 사이트가 있으니 모르는 것이 있을때는 참고하도록 하자.

 Firebase 사이트 공식 도큐

Firestore  |  Firebase

 

우선 CRUD의 각 정의부터 짚고 넘어가자.

 

파이어베이스를 사용하기위해선 아래 코드를 적어주어야 한다.

여기서 import{ // 사용할 함수 이름들 } 이 부분이 중요한데 인터넷에서 찾아낸 함수가 있더라도

여기에서 추가해주지 않으면 사용할 수 없다.

(deleteDoc 함수를 추가하지 않은 상태로 deleteDoc를 호출하다가 왜 안돼! 하면서 오래 시간을 버렸따.) 

    <script type="module">
        import { initializeApp } from "https://www.gstatic.com/firebasejs/9.6.0/firebase-app.js";
        import { getFirestore, collection, getDocs, addDoc, updateDoc, doc, getDoc, deleteDoc } from "https://www.gstatic.com/firebasejs/9.6.0/firebase-firestore.js";
        import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.6.0/firebase-analytics.js";

        const firebaseConfig = {
				// 사용할 파이어스토어 SDK설정 및 구성에서 가져온다

        };

        const app = initializeApp(firebaseConfig);
        const db = getFirestore(app);
        const analytics = getAnalytics(app);

 

1. Create (생성)

• 작성. 닉네임, 비밀번호, 댓글을 입력하여 사용자가 입력한 데이터를 새로 생성하여 추가하는 행위로 주로 addDoc함수를 사용한다.

// Create에는 2가지 방법이 있다. 

//  1. set : 만들Doc의 ID를 직접 지정해서 넣어주어야 한다.

await setDoc(doc(db, "콜렉션", "아이디"), data);

//  2. add : ID를 직접 지정하지 않고 Firestrore에서 자동으로 생성한 ID를 사용할 때 쓰인다.

const docRef = await addDoc(collection(db, "콜렉션")), data);

// docRef.id 어떤 ID가 부여되었는지 확인할 수 있다.
console.log("부여된 ID", docRef.id)

// 3. 위의 두가지 방식을 같이 사용할 수 있다.
// 먼저 newCityRef에 ID를 생성해주고
// 이후에 setDoc에 newCityRef에 data를 담아 create할 수 있다.

// Add a new document with a generated id
const newCityRef = doc(collection(db, "cities"));

// 이후에 
await setDoc(newCityRef, data);

 

 

2. Read (읽기)

• 생성되어 저장된 데이터를 읽어서, 사용자의 눈앞에 볼 수 있게 해준다거나 데이터를 읽는 행위 그자체

// get()을 사용하여 단일 문서의 내용을 검색하는 방법을 보여줍니다.

import { doc, getDoc } from "firebase/firestore";

// cities 콜렉션에 SF doc 조회
const docRef = doc(db, "cities", "SF");
const docSnap = await getDoc(docRef);

// docSnap.exists() 문서가 비어있는지 아닌지 확인
if (docSnap.exists()) {
  console.log("Document data:", docSnap.data());
} else {
  // docSnap.data() will be undefined in this case
  console.log("No such document!");
}

//  where를 사용해 특정 조건을 충족하는 데이터만을 조회 할 수 있다.
const q = query(collection(db, "cities"), where("capital", "==", true));

// forEach를 사용하여 콜렉션 내의 모든 doc를 가져올 수 있다.
const querySnapshot = await getDocs(collection(db, "cities"));
querySnapshot.forEach((doc) => {
  // doc.data() is never undefined for query doc snapshots
  console.log(doc.id, " => ", doc.data());
});

3. Update (업데이트) 

• 생성되어 저장된 기존 데이터를 수정하여 값을 변경하는 행위

// 전체 문서를 덮어쓰지 않고 문서의 일부 필드를 업데이트 하려면 다음과 같은 언어별
// update() 메서드를 사용한다.


import { doc, updateDoc } from "firebase/firestore";

// update할 doc를 가져온다.
const washingtonRef = doc(db, "cities", "DC");

// Set the "capital" field of the city 'DC'
await updateDoc(washingtonRef, {
  capital: true
});

4. Delete (삭제)

• 생성되어 저장된 기존 데이터를 삭제하여 데이터베이스에서 지우는 행위.

// 주의)))) 문서를 삭제해도 하위 컬랙션은 삭제되지 않습니다.
// 문서를 삭제하는 경우 firestore 하위 컬렉션 내 문서를 자동으로 삭제하지 않습니다.
// 따라서 참조를 통해 하위 컬렉션 문서에 액세스 할 수 있습니다.
// 예를 들어 /mycoll/mydoc 에서 상위 문서를 삭제했더라도 /mycoll/mydoc/mysubcoll/mysubdoc
// 경로에 있는 문서에 액세스 할 수 있습니다.
// 존재하지 않는 상위 문서는 콘솔에 표시 되지만 쿼리나 스냅샷에는 표시되지 않습니다.

// 1. 필드 삭제 deleteField() 메서드 사용

import { doc, updateDoc, deleteField } from "firebase/firestore";

const cityRef = doc(db, 'cities', 'BJ');

// Remove the 'capital' field from the document
await updateDoc(cityRef, {
    capital: deleteField()
});

// 2. 컬렉션 삭제
// 웹 클라이언트에서 컬렉션 삭제하는 것은 권장하는 방법이 아니다.

// 3. 문서 삭제 : 가장 많이 사용하게 될 메서드 deleteDoc() 사용

import { doc, deleteDoc } from "firebase/firestore";

await deleteDoc(doc(db, "cities", "DC"));

 

 

이상으로 firebase의 CRUD를 알아 보았다.

공식 문서에 정리가 잘 되어 있으니 잘 모르겠을땐 열심히 찾아보자.