[자기소개3]Firebase 에서 방명록 데이터 불러오기

입력한 데이터를 Firebase 에 저장했다면 불러와서 출력하는 기능도 있어야 할 것이다.

우선 불러온 데이터를 출력할 수 있는 테이블 먼저 구현하였다.

 

 

방명록테이블

<div class="bottom">
        <h2>방명록</h2>
        <div class="guest_box">
            <button type="button" class="btn btn-outline-info" style="float:right;" id="openGuestbook">글쓰기</button>
            <table>
                <thead>
                    <tr>
                        <th>이름</th>
                        <th>내용</th>
                    </tr>
                </thead>
                <tbody id="guestbookTableBody">
                </tbody>
            </table>
        </div>
    </div>

 

css를 제외한 코드는 이와 같다.

 

이제 Firebase에 있는 컬렉션 필드의 값들을 불러올 차례다.

 

방명록 가져오기(firebase)

https://firebase.google.com/docs/firestore/query-data/get-data?hl=ko

Cloud Firestore로 데이터 가져오기  |  Firebase

 

위 링크에는 Firebase 문서이고 데이터를 가져올 수 있는 코드를 참고할 수 있다.

 

1.함수정의

함수를 fetchGuestbook() 으로 정의하였다.

function fetchGuestbook() {

 

 

2.Firestore 컬렉션 참조

db는 인스턴스를 의미하고 guestbook은 firebase 의 컬렉션ID 이름이다.

const guestbookRef = collection(db, 'guestbook');

 

 

3.쿼리 생성

기본 쿼리 문법

const q = query(
    collection(db, '컬렉션이름'),
    조건1,
    조건2,
    ...
);

 

쿼리 함수를 사용하여 guestbookRef에서  입력할때 시간을 기록한 createdAt  순으로 내림차순한다.

 

3-1 NoSQL 

const q = query(guestbookRef, orderBy('createdAt', 'desc'));

 

 

3-2 MySQL

해당 쿼리는 Firebase 기반의 NoSql의 형태로 만약 MySQL로 작성하면  이런식으로 작성할수 있다.

SELECT * FROM guestbook WHERE status = 'active' ORDER BY createdAt DESC LIMIT 10;

 

 

4.실시간 업데이트

위에서 생성한 쿼리q 가 변경될 떄 마다 콜백함수를 호출하는 함수이다.

onSnapshot(q, (snapshot) => {

 

5.스냅샷 데이터처리

const guestbookData = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));

snapshot은 Firestore 에서 쿼리 결과로 반환한 것이고 docs 는 그에 대한 배열이다.

map함수는 배열의 각 요소에 대한 값을 호출하는 것이다.

 

doc => ({ id: doc.id, ...doc.data() }): 이부분을 이해하는데 꽤 시간이 걸렸다.

 

id:doc.id :고유 ID를 id라는 키로 추가

..doc.data():doc을 객체형태로 반환하는 것이다

위의 ...은 스프레드 연산자로,이 데이터를 새로운 객체에 복사하여 추가하는것이다.

 

요약하자면  { id: '문서ID', 필드1: '값1', 필드2: '값2', ... } 형태로 ID와 데이터를 하나의 객체로 결합하는 것이다.

 

6.테이블 참조

테이블을 만드는 코드를 작성할때 사용한 <tbody> 요소를 ID로 참조하는 코드이고 이게 데이터가 표시될 위치이다.

const tableBody = document.getElementById('guestbookTableBody');

 

.

 

7.데이터 추가

배열을 forEach 를 사용하여 순회하면서 데이터가 들어오게 되면 <tr> 을 생성하고 작성자의 이름과 메시지를 표시하는 <td>를 생성하고 본문에 추가하는 코드이다.

guestbookData.forEach(entry => {
    const row = document.createElement('tr');
    row.innerHTML = `<td>${entry.name}</td><td>${entry.message}</td>`;
    tableBody.appendChild(row);
});

 

8.코드 병합

모든 코드를 병합하면 데이터를 가져오고 테이블을 실시간으로 생성하는 기능이 만들어진다.

// 방명록 데이터 가져오기 및 실시간 업데이트
function fetchGuestbook() {
const guestbookRef = collection(db, 'guestbook');
const q = query(guestbookRef, orderBy('createdAt', 'desc'));
onSnapshot(q, (snapshot) => {
const guestbookData = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));


            const tableBody = document.getElementById('guestbookTableBody');
            tableBody.innerHTML = ''; // 기존 데이터 초기화
            guestbookData.forEach(entry => {
                const row = document.createElement('tr');
                row.innerHTML = `<td>${entry.name}</td><td>${entry.message}</td>`;
                tableBody.appendChild(row);
            });
        });
    }

9.실제로 데이터 불러오기

Firebase 에 값을 넣으면 저장이 되고 

 

 

짜잔!   이렇게 작성한 데이터를 불러와 출력하게 된다!

 

✒️ 회고

- Javascript 는 데이터베이스 관리를 NoSQL 로 관리하는 경향이 있는거 같아서 MySQL과 문법이 많이 달라 공부를 해야할 것 같다.

 

- 현재까지 github 로 병합을 진행했는데 동시에 같은 branch 에서 하다보니 충돌이 발생하는 경우가 많았다.

  추후에, forks 를 이용한 방법도 공부해서 적용해보고 싶다.