본문 바로가기

개발 일지/개발 일지

내일배움캠프 Day 16

Firebase

데이터 가지고 오기 

 

Firebase는 서버없이도 웹서비스/앱서비스를 만들 수 있게 도와주는 서비스 

백엔드 작업을 안해도 되서 프론트엔드 개발자 입장에서는 개발시간을 매우 단축시킬 수 있음

 

 

Firebase Database에서  데이터를 읽으려면

db.collection('컬렉션이름').get().then(()=>{})

 

 

컬렉션 안에 있는  모든 데이터를 출력 하려면

<script>
  const db = firebase.firestore();
  db.collection('product').get().then((결과)=>{
    결과.forEach((doc)=>{
      console.log(doc.data())
    })
  })

</script>

forEach() 반복문을 사용 

 

여기서 원하는 HTML 파일에 출력하려면 

<script>
  const db = firebase.firestore();
  db.collection('product').get().then((결과)=>{
    결과.forEach((doc)=>{
      console.log(doc)
      const 템플릿 = `<div class="title>${doc.data().제목}</div>`;
      $('.container').append(템플릿)
    })
  })

</script>

상수 지정 하는 템플릿을 만 든뒤  .append(템플릿) 

'개발 일지 > 개발 일지' 카테고리의 다른 글

내일배움캠프 Day 18  (0) 2022.11.24
내일배움캠프 Day 17  (0) 2022.11.23
내일배움캠프 Week 3  (0) 2022.11.21
내일배움캠프 Day 15  (0) 2022.11.18
내일배움캠프 Day 14  (0) 2022.11.18