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

TIL

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

inz1234 2023. 12. 27. 21:21

나만의 추억앨범에서 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 = `

<img src="이 부분"

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

</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 = `

<img src="${image}"

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

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

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

</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 = `

<img src="${image}"

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

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

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

</div>

</div>`

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

});