팀 프로젝트를 진행하면서 Firebase로 html구현하는 과정이 힘들어서 복습하는 느낌으로 적어볼려고 합니다.

Firebase 초기설정

import { initializeApp } from "firebase/app"; Firebase 초기화: initializeApp 함수를 사용하여 Firebase 애플리케이션을 설정합니다.
import { getFirestore } from "firebase/firestore";

import: ES6 모듈 시스템에서 다른 모듈이나 라이브러리의 기능을 현재 파일로 가져옵니다.

initializeApp 함수: Firebase 애플리케이션을 초기화합니다. Firebase의 설정 객체를 받아서 Firebase 서비스를 사용할 수 있게 설정합니다. 초기화 과정에서 제공된 설정을 바탕으로 Firebase와 애플리케이션 간의 연결이 설정됩니다.

getFirestore 함수: Firestore 데이터베이스 인스턴스를 가져옵니다. 이 함수는 Firestore 서비스를 사용하기 위해 필요하며, 데이터베이스와의 상호작용을 위한 객체를 반환합니다.

firebaseConfig 값은 사용자마다 다르기때문에 그때 그때 확인해주어야 한다.

문서 설정

doc(db, "콜렉션이름", "콜렉션으로 설정할 ID")
collection(db, '콜렉션 이름')

CREATE

const submit = document
.getElementById('comment-form')
.addEventListener('submit', async (e) => {
e.preventDefault();
const info = {
userName: userName.value,
userPwd: userPwd.value,
comment: comment.value,
};
//setDoc(doc(db, "comments", cnt), info);
await addDoc(collection(db, 'comments'), info).then((d) =>
console.log(d.id)
);
window.location.reload(); });
위 코드는 파이어베이스에 데이터를 추가하는 코드입니다
데이터를 추가하는 메서드는 addDoc, setDoc, updateDoc 이 있습니다.

addDoc 메서드는 콜렉션 문서의 id를 자동생성합니다.

await addDoc(collection(db, collection(db, "cities"), {
name: "Tokyo",
country: "Japan"
});

setDoc 메서드는 문서가 존재할경우 덮어쓰고 아니면 생성합니다.

await setDoc(doc(db, "cities", "LA"), {
name: "Los Angeles",
state: "CA",
country: "USA"
});

updateDoc 메서드는 일부 필드만 업데이트합니다.

await updateDoc(washingtonRef, {
capital: true
});

Read

let docs = await getDocs(collection(db, 'comments'));
docs.forEach((doc) => {
	let row = doc.data();
	data.push(row);
	//console.log(data);

	const userName = row.userName;
	const userPwd = row.userPwd;
	const comment = row.comment;

	const commentDiv = document.querySelector('#comment').insertAdjacentHTML(
		'beforeend',
		`<div id="comments" class="comments">
            <h2 class="comment-name" id="comment-name">${userName}</h2>
            <div class="comment-content">${comment}</div>
            
            <form class="btn-wrapper-form" id="btn-form">
                <button class="delete-btn" id="delete-btn" type="button">삭제</button>
                <button class="modify-btn" id="modify-btn" type="button">수정</button>
            </form>
        </div>`
	);
});

위 코드는 데이터를 가져와 새로운 HTML 요소를 렌더링하는 코드입니다.
데이터를 불러오는 메서드는 getDoc, getDocs 가 있습니다.

getDoc메서드는 단일 문서 데이터만 불러옵니다.

const docRef = doc(db, "cities", "SF");
const docSnap = await getDoc(docRef);
if (docSnap.exists()) {
  console.log("Document data:", docSnap.data());
} else {
  console.log("No such document!");
}

getDocs는 컬렉션에서 모든 문서를 불러옵니다.

Update

import db from "./firebaseConfig.js";
/ db를 내보낸 경로에서 db도 import 해주어야 한다 /
import { doc, updateDoc } from "firebase/firestore";

const washingtonRef = doc(db, "cities", "DC");

// "DC" 문서의 capital 필드(키) 값 수정하기
await updateDoc(washingtonRef, {
capital: true
});

Delete

import db from "./firebaseConfig.js";
/ db를 내보낸 경로에서 db도 import 해주어야 한다 /
import { doc, updateDoc, deleteField } from "firebase/firestore";

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

// 문서에서 'capital'이라는 필드(키)를 삭제한다
await updateDoc(cityRef, {
capital: deleteField()
});