[Next.js] Next.js + 파이어베이스(FireBase) + React 활용한 CRUD 완벽 정리 (Next.js와 FireBase 연동하는 방법) 2탄

 

 

Next.j에서 FireBase를 사용하는 방법을 아주 친절하게 설명해보겠다.

 

 

---

 

* 세팅 및 연동 방법은 1탄을 참고해주세요!

https://dev-ini.tistory.com/278

 

 

 1. FireStore 설정하기 

 

 1. 파이어베이스 홈페이지에 생성된 프로젝트에 들어가서 "Cloud FireStore" 버튼을 누른다. 

 

 

 

 

 2. "데이터 베이스 만들기"를 클릭하고 항목을 입력한다. 필자는 위치를 Seoul로 세팅하고 프로덕션 모드로 시작함. 

 

 

 

 

 3. 설정이 완료되면, 규칙으로 들어가서 읽기/쓰기 설정을 true로 바꾸고 게시 버튼을 누른다. 

 

 

 

 

 4. 다 했으면 "데이터" 항목에 들어가서 데이터를 추가해본다. 

 

 

 

---

 

 

 2. CRUD 구현하기 

 

 1. READ 

 

데이터를 Read 하기 위해서는 "getDoc" 함수를 써서 불러와야한다. 아래의 코드는 버튼을 누르면 데이터를 가져오게 만드는 코드이다.

 

import Image from "next/image";
import { doc, getDoc } from "firebase/firestore";
import fireStore from './../../../firebase/firestore';

export default function Page() {
  const onClickButton = async () => {
    try {
      const userDocRef = doc(fireStore, "사용자", 'X65FWJNYs1RbiL84exJk');
      const docSnapshot = await getDoc(userDocRef);

      if (docSnapshot.exists()) {
        console.log(docSnapshot.data());
      } else {
        console.log("문서가 존재하지 않습니다.");
      }
    } catch (error) {
      console.error("데이터 불러오기 실패:", error);
    }
  };
  return (
    <div>
       <button 
          onClick={onClickButton} 
       >
       버튼
       </button>
    </div>
  )

 

 

데이터를 가져오는 버튼을 누르면 데이터가 콘솔에 잘 찍힌다!

 

 

 

 2. UPDATE 

 

데이터를 Update 하기 위해서는 "updateDoc" 함수를 써서 불러와야한다. 아래의 코드는 버튼을 누르면 데이터를 수정하는 코드이다.

 

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

export default function Page() {
  const onClickUpdate = async () => {
    try {
      const userDocRef = doc(fireStore, "사용자", 'X65FWJNYs1RbiL84exJk');

      // 문서를 업데이트할 데이터
      const updatedData = {
        name: "Updated Name", // 업데이트할 필드와 값
      };

      await updateDoc(userDocRef, updatedData);
      console.log("데이터가 성공적으로 업데이트되었습니다.");
    } catch (error) {
      console.error("데이터 업데이트 실패:", error);
    }
  };

  return (
    <div>
      <button 
        onClick={onClickUpdate} 
      >
        데이터 업데이트
      </button>
    </div>
  );
}

 

 

바뀌기 전

 

 

업데이트 하는 버튼을 누른다. 

 

 

데이터가 잘 바뀌었다!

 

 

 

 

 3. CREATE 

 

데이터를 Create 하기 위해서는 setDoc 또는 addDoc 함수를 써서 불러와야한다. 

 

 1) setDoc 

 

- 직접적으로 문서 ID를 지정해야 한다.
- 지정한 경로에 문서를 생성하거나, (기존의 문서 ID를 이미 알고있어서, 이미 존재하는 문서를 덮어쓰는 경우)
- 특정한 ID를 사용해야 할 때 유용하다. (새로운 ID를 개발자가 직접 이름 지어서 생성)
- 문서 참조 (특정 문서를 가리킬 때 사용)가 필요하므로, doc(fireStore, ...) 함수를 써야한다.

 

import { doc, getDoc, updateDoc, setDoc } from "firebase/firestore";
import fireStore from './../../../firebase/firestore';

export default function Page() {
  const onClickCreate = async () => {
    try {
      const userDocRef = doc(fireStore, "1번", '1번_ID');
      await setDoc(userDocRef, { name: "영희", age: 25 });
      console.log("데이터가 성공적으로 추가되었습니다.");
    } catch (error) {
      console.error("데이터 추가 실패:", error);
    }
  };

  return (
    <div>
      <button 
        onClick={onClickCreate} 
      >
        setDoc
      </button>
    </div>
  );
}

setDoc으로 데이터 생성하기 전

 

 

버튼을 눌러서 데이터 생성하기

 

 

 

데이터가 성공적으로 덮어쓰여졌다!

 

 

 

 

2) addDoc

 

- 자동으로 문서 ID를 생성한다.
- 문서 ID를 신경 쓰지 않아도 될 때, 특히 자동으로 유니크한 ID를 생성할 때 유용하다.
- 컬렉션 참조 (컬렉션 전체를 가리킬 때 사용)가 필요하므로, collection(fireStore, ...) 함수를 써야한다.

 

import { collection, addDoc } from "firebase/firestore";
import fireStore from './../../../firebase/firestore';

export default function Page() {
  const onClickCreate = async () => {
    try {

      const userCollectionRef = collection(fireStore, '1번'); // 컬렉션 경로만 필요
      await addDoc(userCollectionRef, { name: "짱구", age: 7 });
      console.log("데이터가 성공적으로 추가되었습니다.");
    } catch (error) {
      console.error("데이터 추가 실패:", error);
    }
  };

  return (
    <div>
      <button 
        onClick={onClickCreate} 
      >
        addDoc
      </button>
    </div>
  );
}

 

 

addDoc으로 데이터 생성하기 전

 

 

 

버튼을 눌러서 데이터 생성하기

 

 

 

데이터가 성공적으로 생성되었다!

 

 

 

 

 4. DELETE 

 

데이터를 Delete 하기 위해서는 deleteDoc 함수를 써서 불러와야한다. 아래의 코드는 버튼을 누르면 데이터를 삭제하는 코드이다. 

 

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

export default function Page() {
  const onClickDelete = async () => {
    try {
      const userDocRef = doc(fireStore, "사용자", '새로운_사용자_ID'); // 삭제하고 싶은 항목
      await deleteDoc(userDocRef);
      console.log("데이터가 성공적으로 삭제되었습니다.");
    } catch (error) {
      console.error("데이터 삭제 실패:", error);
    }
  };

  return (
    <div>
      <button 
        onClick={onClickDelete} 
      >
        데이터 삭제
      </button>
    </div>
  );
}

 

 

바뀌기 전

 

 

 

삭제 하는 버튼을 누른다.

 

 

 

데이터가 잘 삭제 되었다!