Firebase 배우기 5 - Firestore Database 자료 가져오기 (Read)

앞선 글에서 Firestore DB에 자료(사진 파일 포함)을 업로드하는 이론적인 방법과, Copilot AI를 활용하여 쉽게 코드를 만든 세부 과정을 소개한 바 있었다.

https://blog.naver.com/mythee1/223493076303

Firebase 배우기 4 – Firestore DB에 자료 올리기 – 기본방법과, MS Copilot을 사용해서 아주 쉽게 개발한 과정 소개

1. Prerequisite – 준비 앞선 2개의 글을 통해 Firebase에 처음 가입하고, 초기설정하는 방법과, Visual…

blog.naver.com

이번 글에서는 이렇게 Firestore에 저장한 자료를 읽어 화면에 표시하는 코드를 역시 Copilot을 이용하여 쉽게 만든 세부 과정을 소개하려 한다.

Firestore DB 데이터를 읽는 기본적인 방법

아무리 AI를 이용하여 코드를 손쉽게 날로 만든다고 하더라도, 적어도 어떤 방법으로 읽에 되는지, 그리고 이런 기본적인 정보가 어디에 있는지 알고 있기는 해야 할 것 같다. 이러한 정보들은 다음과 같이 Firebase 공식 사이트의 “문서” 탭에서 찾을 수가 있는데,

먼저 특정 문서(=레코드) 1개를 읽어오는 방법으로

db.collection(컬렉션이름).doc(문서이름).get( ).then( ).catch( ) 문법을 소개하고 있으며

여러 개의 자료를 한 번에 가져와야 하는 경우에 대해 doc()부분 없이 다음과 같이 읽어 snapshot에 넣고,

db.collection(컬렉션이름).get( ).then(snapshot).catch( )

이것을 forEach()구문을 이용해 반복해 표시하는 방법을 소개하고 있다.

또한, 특정 조건을 충족하는 경우의 자료만을 읽어야 하는 경우를 위해

db.collection(컬렉션이름).where( 특정 조건 )get( ).then( ).catch( ) 사용 예를 소개하고 있다.

Copilot을 이용하여 Firestore DB 데이터를 읽는 코드 만들기

위와 같이 기본적인 읽는 방법을 이해한 후, 실제 코드는 앞에서와 동일하게 Copilot의 도움을 받아 만들기로 했다. 이 세부 과정을 소개한다.

먼저, 앞의 글에서 데이터 업로드를 위해 만들었던 코드를 그대로 넣어주고, 동일한 변수명들을 이용하여 데이터를 읽어오는 코드를 요청했다. 굳이 코드를 넣어준 것은 변수명이나, DB에서 사용된 필드명 등의 정보를 그대로 사용하기 위함이었다.

그 결과 다음과 같은 코드를 반환해서, 이 중에서 필요한 부분들을 복사해 미리 만들어둔 index.html 템플리트 파일에 붙여 넣어주었다.

일단, 필요한 부분들을 발췌해 붙여 넣고 브라우저를 실행해 보니, 브라우저 화면에 아무것도 나타나지 않고 콘솔의 오류메시지에는 27번 행에 오류가 있다고 한다.

이 행을 찾아보니 다음과 같았다.

이를 토대로 다시 Copilot에게 문의했더니 해당 코드의 붙여놓은 위치를 확인해 보라고 한다.

그러면서 다음과 같이 되어야 한다고 알려준다. 다음 표시한 부분을 살펴보니, 정말 이 부분을 잘못 붙여 넣었던 게 확인이 되어 위치를 옮겨주었다.

그러자 브라우저 화면에서 오류 메시지는 사라지고, 사진과, DB에 저장되었던 정보들이 나열되기 시작한다.

다만, 사진의 크기가 너무 크다. 그리고 DB에 등록된 날짜는 표시되지를 않고 있다.

이런 사항들을 다시 다음과 같이 Copilot에게 고쳐달라고 요청하니,

다음과 같이 수정된 코드를 제공해 준다.

이를 코드에 반영한 결과, 브라우저에 표시된 결과는 다음과 같이 사진들이 작게 바뀌었고, DB에 등록된 시간도 표시된다. 그런데, 사진이 기대했던 것보다 너무 작다. 그리고, 글자로 된 정보들이 사진 아랫부분에 위치해 하나의 화면에서 낭비되는 부분들이 많았다.

때문에 이것도 다음과 같이 수정해달라는 요청을 했다.

그 결과 다음과 같이 사진 사이즈를 변경하는 코드를 반환해 주었고, 기존에는 이미지와 text 정보를 화면에 단순히 순차적으로 표시하던 것을, 이미지 부분에 grid 형태를 적용해 화면을 분할 사용하는 방식으로 변경된 코드를 돌려주었다.

이제 이 코드를 적용해 보니, DB에 등록된 항목들이 브라우저에 다음과 같이 의도한 대로 잘 나타난다.

참고로, 이 단계까지 완성된 최종 코드는 다음과 같다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>데이타 불러오기</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
<script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-storage.js"></script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<div class="container">
<div id="productList" class="m-3"></div>
</div>
<script>
const firebaseConfig = { 사용자와 프로젝트에 따라 Firebase에서 주어지는 정보
    };
// Initialize Firebase
          firebase.initializeApp(firebaseConfig);
var db = firebase.firestore();
var storage = firebase.storage();
$(document).ready(function() {
// Firestore에서 데이터를 읽어와 화면에 표시합니다.
      db.collection("products").get().then((querySnapshot) => {
        querySnapshot.forEach((doc) => {
var data = doc.data();
var date = new Date(data.날짜.seconds * 1000).toLocaleString(); // 날짜를 YYYY/MM/DD hh:mm:ss 형식으로 변환합니다.
var html = `
            <div class="card mb-3" style="max-width: 540px;">
              <div class="row g-0">
                <div class="col-md-4">
                  <img src="${data.사진}" alt="${data.상품명}" style="width: 150px; height: 150px;"> <!-- 이미지 크기를 조절합니다. -->
                </div>
                <div class="col-md-8">
                  <div class="card-body">
                    <h5 class="card-title">${data.상품명}</h5>
                    <p class="card-text">${data.상품설명}</p>
                    <p class="card-text"><small class="text-muted">${data.가격}</small></p> <!-- "원" 부분을 제거합니다. -->
                    <p class="card-text"><small class="text-muted">${date}</small></p> <!-- 등록 날짜를 표시합니다. -->
                  </div>
                </div>
              </div>
            </div>
          `;
$('#productList').append(html);
});
});
});
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>

Firebase 배우기 5 – Firestore Database 자료 가져오기 (Read)