🔥 Firestore 이용하기 (팀프로젝트 2일차)

림민지·2025년 2월 19일

Firebase

Today I Learn

목록 보기

3/62

팀 페이지에 게시글을 추가하는 기능이 필요했기 때문에, firebase에서 게시글 데이터 관리와 댓글 관리를 추가하기로 했다!

🔥 Firebase 세팅

1. firebase 프로젝트 생성하기

firebase 콘솔에서 프로젝트 만들기를 클릭해 TeamIntroduction이라는 프로젝트를 생성했다.

2. 프로젝트 기초 세팅하기

오른쪽 바에 있는 firestore Database에 들어가 기초 세팅을 하자
데이터베이스 만들기 버튼을 클릭해 seoul을 선택하고 생성한다.

그리고 규칙에서 false를 true로 변경해준다

프로젝트 설정에 들어간다

sdk 설정을 구성 으로 변경해준다.
나중에 데이터를 불러올 때, 이 아래의 코드를 복사해서 넣으면 firestore Database를 사용할 수 있다!

🔮 코드 세팅하기

1. 기본 세팅

html 코드의 <script> 를 <script type="module"> 로 변경해주자
그리고 제이쿼리를 사용해야하기 때문에 아래의 코드를 필히 넣자!~~(안넣었다가 왜 안되는지 한참 고민했다..)~~

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

2. Firestore 코드 삽입하기

Firestore의 기본 세팅 코드 준비!

// 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 = {
        본인 설정 내용 채우기 
};


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

"Firebase 구성 정보 설정" 여기에다가 아까 우리의 Firestore에 있던 SDK 구성 코드(api key 들어있는)를 넣어주면 된다!

이제 준비는 끝났다! 데이터를 넣어보자

✨ 코드 적용하기

1. addDoc

addDoc을 사용하면, firestore base에 데이터를 업로드할 수 있다.
예시 코드와 함께 알아보자

$("#postingbtn").click(async function () {
        let isValid = true;

        let title = $("#title").val();
        let content = $("#content").val();
        let link = $("#link").val();
        let file = $("#file")[0].files.length;
        //Firestore 저장하기
        let doc = {
            'title': title,
            'content': content,
            'link': link,
            'file': file
        };
        await addDoc(collection(db, "postings"), doc);
        alert('저장 완료!');
        window.location.reload();
      });

아래 body 안에 있는 div의 요소의 id가 "#postingbtn"인 곳에 적용이 된다는 뜻이다.
그리고 각각 거기에서 id에 맞는 변수들을 let을 활용해 저장한다
doc이라는 Dictionary를 활용해 요소들을 저장해주고,
이를 await addDoc(collection(db, "postings"), doc); firestore의 콜랙션에서 postings라는 이름의 db에 doc을 저장한다. 라는 뜻을 가진 코드로 저장할 수 있다.

🫶 이미지 file을 url로 저장하기

그리고 이미지를 불러와야하므로

// 파일 URL 생성
                    let fileURL = "";
                    if (file) {
                        let reader = new FileReader();
                        reader.onload = function (e) {
                            fileURL = e.target.result;  // data URL 형태로 파일의 URL을 가져옴
                            console.log("파일 URL:", fileURL);

                            // Firestore에 데이터 저장
                            let doc = {
                                'title': title,
                                'content': content,
                                'link': link,
                                'fileURL': fileURL // 파일 URL을 Firestore에 저장
                            };

                            addDoc(collection(db, "postings"), doc)
                                .then(() => {
                                    alert('저장 완료!');
                                    window.location.reload();
                                })
                                .catch((error) => {
                                    console.error("에러 발생: ", error);
                                    alert("저장 중 오류 발생");
                                });
                        };
                        reader.readAsDataURL(file);  // 파일을 읽어서 data URL로 변환
                    }

fileURL = e.target.result;

요 코드를 통해 변환하여 저장한다.

그러면 아래처럼 저장된 걸 볼 수 있다.

2. getDoc

이제 저장했으니 불러오기만 하면 된다!
먼저 데이터를 불러와야한다. postings로 만들어 불렀으니 postings에 있는 db를 꺼내보자

let docs = await getDocs(collection(db, "postings"));

각각 변수에 할당해주자

docs.forEach((doc) => {
                let row = doc.data();
                console.log(row);
                let link = row['link'];
                let title = row['title'];
                let content = row['content'];
                let fileURL = row['fileURL'];

불러온 데이터를 자동으로 페이지에 추가하고 싶으니까 이 로직도 추가해봅시다

let temp_html =
                    `<div class="col">
              <div class="card h-100">
                <img src="${fileURL}">
                <div class="card-body">
                  <h5 class="card-title">${title}</h5>
                  <p class="card-text">${content}</p>
                </div>
                <div class="card-footer">
                  <small class="text-body-secondary">${link}</small>
                </div>
              </div>
            </div>
            `
            $("#card").append(temp_html);
            });