2023.12.27 TIL(2) #Firebase에서 데이터 가져오기

나만의 추억앨범에서 Firebase에서 데이터를 가져와서 카드 붙이기를 하시오.

0. Firebase에서 데이터를 가져오는 뼈대
1. 데이터를 가져와서
2. 카드 붙이기를 하시오.
순으로 해결해 볼 것임!

 

0. Firebase에서 데이터를 가져오는 뼈대

let docs = await getDocs(collection(db, "albums"));
docs.forEach((doc) => {
    let row = doc.data();
    console.log(row);
});

 

1. 데이터 가져오기

 

(1) Firebase에서 데이터를 빼와야겠네. 뼈대를 보아하니 docs라는 리스트를 forEach문으로 doc이라는 애 하나하나를 빼서 돌린 거 같긴한데.. 그 하나하나를 row 라고 선언했네
   일단 데이터가 어떻게 저장되어있는지 보자! console.log(row) 해서 console을 봐야겠어.

엇 딕셔너리 형식이자나?

(2) 딕셔너리에서 자료를 뺄 때는 어떻게 했지? row라는 딕셔너리에서 예를 들어 image를 빼려면?
=> row['image']

 

2. 카드 붙이기

- ok. 데이터는 뺐어. 얘로 뭐한다구? 카드 만들어 붙인다구.

(1) 카드 만들기
- let temp_html = `카드 만드는 html`
  그 카드 만드는 html에 Firebase에서 뺀 데이터를 넣을 부분이 어딘데?

let temp_html = `

            <div class="col">

                <div class="card">

                    <img src="이 부분"

                        class="card-img-top" alt="...">

                    <div class="card-body">

                        <h5 class="card-title">이 부분</h5>

                        <p class="card-text">이 부분</p>

                        <p class="card-text">이 부분</p>

                    </div>

                </div>

            </div>`

빨간 색 부분이지? 오케 그럼 거기다 뺀 데이터 row['image] 얘를 넣자
아 근데 넘 기네 좀 줄이자. (let image = row['image'])  그런 다음 줄인 걔를 넣자.

l           let image = row["image"];

            let title = row["title"];

            let star = row["star"];

            let comment = row["comment"];

            let temp_html = `

            <div class="col">

                <div class="card">

                    <img src="${image}"

                        class="card-img-top" alt="...">

                    <div class="card-body">

                        <h5 class="card-title">${title}</h5>

                        <p class="card-text">${star}</p>

                        <p class="card-text">${comment}</p>

                    </div>

                </div>

            </div>`

 

- 이제 데이터도 다 넣었겠다 또 뭐해? 제일 중요한 카드를 갖다가 붙여야지!

 

(2) 카드 붙이기 함수 추가 

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

        docs.forEach((doc) => {

            let row = doc.data();

           

            let image = row["image"];

            let title = row["title"];

            let star = row["star"];

            let comment = row["comment"];

            let temp_html = `

            <div class="col">

                <div class="card">

                    <img src="${image}"

                        class="card-img-top" alt="...">

                    <div class="card-body">

                        <h5 class="card-title">${title}</h5>

                        <p class="card-text">${star}</p>

                        <p class="card-text">${comment}</p>

                    </div>

                </div>

            </div>`

            $('#card').append(temp_html);

        });