Firestore 실습 addDoc & getDoc

Firestore 데이터베이스를 활용하기 앞서 firbaseConfig에 본인의 데이터값을 입력해준뒤 초기화를진행하여야한다.

// Firebase SDK 라이브러리 가져오기
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-app.js";
import { getFirestore } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
import { collection, addDoc } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
import { getDocs } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";


// Firebase 구성 정보 설정
const firebaseConfig = {
  apiKey: "your-api-key",
  authDomain: "your-auth-domain",
  projectId: "your-project-id",
  storageBucket: "your-storage-bucket",
  messagingSenderId: "your-messaging-sender-id",
  appId: "your-app-id"
};



// Firebase 인스턴스 초기화
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

addDoc :함수는 지정된 컬렉션에 새 문서를 추가합니다. 문서의 ID는 자동으로 생성되며, 데이터는 지정된 필드와 값으로 저장됩니다.\

 

*주의 버튼의 onClick함수들은 id 값을 주어서 다시 정의해야한다.

 // id = postingbtn 인 버튼을 클릭할시
 
 $("#postingbtn").click(async function () {
 			//할당된 id의 입력된값을 .val()받아와 변수에저장한다
            let image = $('#image').val();
            let title = $('#title').val();
            let content = $('#content').val();
            let date = $('#date').val();
			
            //doc 이라는 dictionary 안에 '키값' : value의형태로 넣기위해 structure를 정의해준다. 
            let doc = {
                'image':image,
                'title':title,
                'content':content,
                'date':date
            };
            
            //위처럼 설정된 doc이라는 dictionary형태를 Firebase Database 에 "albums"라는 컬렉션으로 추가한다.
            await addDoc(collection(db, "albums"), doc);
        })

 

---

getDoc:함수는 지정된 문서를 가져옵니다. 문서의 ID를 알고 있을 때 사용되며, 해당 문서의 데이터를 읽을 수 있습니다.

// docs를 getDoc함수를이용해 firebase 데이터베이스 album collection을 불러옴
let docs = await getDocs(collection(db, "albums"));
		//for loop을사용해 docs의 있는데이터들을 분리
        docs.forEach((doc) => {
            let row = doc.data();
			//key값의 있는 벨류들을 지정된 변수들의 대입
            let image = row['image'];
            let title = row['title'];
            let content = row['content'];
            let date = row['date'];
			// 바디태그의 skeleton중 원하는곳에 데이터를 삽입하여 temp_html을 생성
            let temp_html = `
            <div class="col">
                <div class="card h-100">
                    <img src="${image}"
                        class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">${title}</h5>
                        <p class="card-text">${content}</p>
                    </div>
                    <div class="card-footer">
                        <small class="text-muted">${date}</small>
                    </div>
                </div>
            </div>`;
            //값이 들어간 temp_html을 card id값의 바디에삽입
            $('#card').append(temp_html);
            //forloop이므로 다음값을 똑같이적용
        });

위와같이 addDoc을사용하여 사용자가 입력한 값들을 Firebase에 collection을생성해 저장한뒤 getDoc로 불러온뒤 해당 데이터값으로 html의 원하는 id값을 가진곳에 추가가 가능해진다.

 

---

 

이를적용하여 등록한 데이터값들은 HTML파일 새로고침되어도 Firebase의 값이저장되어있어 불러올수있다.