[사전캠프 9일차] _ 그것이 알고 싶다(기존 카드가 보이지 않는 오류)

오늘은 남은 웹개발 강의를 완강했다.
이제 사전캠프 과제는 끝이다! 
9일만에 클리어 >< 

[오늘의 학습 키워드]

#fetch #Firebase #스크래핑

[학습 내용 정리]

< Fetch >

입력받은 url 주소로 웹 통신을 요청한다.

fetch("url 주소").then(받은 데이터로 할 행동)

< Firebase >

구글에서 일정 사용량까지 무료로 지원해주는 데이터 베이스

> 설정 방법

// 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);

 

script type을 모듈로 선언해야한다.

<script type="module">

> 주의 사항

1. onclick과 같은 인라인 이벤트 핸들러의 사용이 제한된다.
2. HTML 문서가 완전히 로드된 후에 실행되기 때문에 ready함수가 필요하지 않다.

[학습하며 겪었던 문제점]

< Firebase를 연동했을 뿐인데  기존의 카드 내용이 사라지는 이유는?>

> 문제 상황

기존 코드에 Firebase를 연동하기 위해서 const firebaseConfig를 채워넣었다.

// Firebase 구성 정보 설정
const firebaseConfig = {
	본인 설정 내용
};

원본 실행 결과

firebaseConfig의 내부를 채운 후의 결과

firebaseConfig 부분만 채워넣었을 뿐인데 하와이안 피자, 크리스피 버거, 해물 라면이 적힌 기존 카드가 완전히 사라진다.
이 3개의 카드는 내 데이터 베이스에 저장되어있지 않다. HTML에 수기로 적혀있다.

Q. 그렇다면 데이터 베이스에 저장된 정보도 출력이 되지 않는가?
A. 아니다. firebaseConfig에 데이터를 입력할 경우, 해당 데이터는 정상적으로 출력된다.

데이터 베이스에 정보를 입력한 후의 결과

데이터 베이스에 들어있는 정보가 정상적으로 출력되면 문제 없는거 아닌가? 라고 생각하고 그냥 끝낼 수도 있는데
나는 저 결과가 정상적이지 않다고 생각한다.

//데이터 베이스에서 데이터를 받아오는 함수의 일부
 let tempHtml = `
            <div class="col">
                <div class="card h-100">
                    <img src="${image}"
                        class="card-img-top" alt="...">
                    <div class="card-body">
                        <h4 class="card-title">${title}</h4>
                        <p class="card-text">${comment}</p>
                        <p>${star}</p>
                        <button class="card-button">주문하기</button>
                    </div>
                </div>
            </div>`;
 $(".row-cols-3").append(tempHtml);

//카드
 <div class="mycards">
        <div class="row row-cols-3 row-cols-md-3">
            <div class="col">
                <div class="card h-100">
                    <img src="https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2162&q=80"
                        class="card-img-top" alt="...">
                    <div class="card-body">
                        <h4 class="card-title">하와이안 피자</h4>
                        <p class="card-text">이건 꼭 먹어봐야 해요</p>
                        <p>⭐⭐⭐⭐</p>
                        <button class="card-button">주문하기</button>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card h-100">
                    <img src="https://images.unsplash.com/photo-1481070555726-e2fe8357725c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2235&q=80"
                        class="card-img-top" alt="...">
                    <div class="card-body">
                        <h4 class="card-title">크리스피 버거</h4>
                        <p class="card-text">너무 달콤해요!</p>
                        <p>⭐⭐⭐</p>
                        <button class="card-button">주문하기</button>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card h-100">
                    <img src="https://images.unsplash.com/photo-1569718212165-3a8278d5f624?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2080&q=80"
                        class="card-img-top" alt="...">
                    <div class="card-body">
                        <h4 class="card-title">해물 라면</h4>
                        <p class="card-text">국물이 끝내줘요!</p>
                        <p>⭐⭐⭐⭐⭐</p>
                        <button class="card-button">주문하기</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>

위의 코드는 전체 코드의 일부를 발췌한 것이다.
데이터베이스에서 받아 온 데이터를 Html문으로 변경하여 "row-cols-3"에 append한다.
row-cols-3의 기존 카드들에 새로운 데이터를 '추가'하는 것이다.
그렇기 때문에 원래 적혀있던 3개의 카드 + 데이터 베이스 카드가 나오는게 정상적이라고 생각했다.

실제 강의 영상 실습에서 사용한 코드를 바탕으로 확인해보았다.

강의 영상 실습 코드의 실행 결과

예상과 동일하게, 기존에 있던 카드 4개 + 데이터 베이스 카드 1개가 표시되었다.
저것이 잘못된 결과라는 것에 확신을 가지게 되었다.

> 문제 해결을 위한 시도

1. 새로운 Html이 추가될 부분의 명칭 변경
   혹시나 row-cols-3가 잘못 인식이 되는 탓에 발생한 문제일 수 있을 것 같아서
   간단한 id를 사용하는 방법으로 변경해보았다.
   그대로였다.
2. 숙제 코드와 실습 코드 비교 후, 다른 점 찾기
   찾지 못했다. 

전체적으로 함수를 훑어봤지만 문제가 될 만한 부분을 찾기가 힘들었다.
애초에 firebase를 연동한 것만으로 저런 현상이 나타났기 때문이었다.
실습에서 사용한 것 역시 firebase를 연동했는데 왜 숙제로 주어진 코드에서만 이런 현상이 일어나는지 너무너무 궁금하다.

학습 질문란에서 나와 같은 질문이 있길래 찾아봤는데 내가 원하는 답변은 얻을 수 없었다.
구글에 뭐라고 검색해야지 관련된 답변을 얻어볼 수 있을까?
(내일 바로 질문해야지)

> 의문 해결! (update 2025.01.24)

튜터님께 갈 틈도 없이 팀원 분의 도움으로 문제를 해결할 수 있었다. (팀플의 순기능 ♥ )

원인은 바로$(".row-cols-3").empty였다.
기존 html문을 지워버렸으니 당연히 데이터 베이스에 있는 카드만 출력되는 것이다!

$(".row-cols-3").empty();
const querySnapshot = await getDocs(collection(db, "foods"));

querySnapshot.forEach((doc) => {
	...
}

대체 왜 저 부분을 못 봤을까? 불필요한 부분은 접어두고있어서 못 봤던걸까?
ctrl+f로 검색했을 때도 못 본 것 같은데, 귀신이 곡할 노릇이다.

[ 내일 학습 할 것 ]

Java 전공책 전체적으로 복습하기