Firestore 데이터 화면에 뿌려주기 - html 에 정보 넣기

Firestore 데이터 화면에 뿌려주기 - html 에 정보 넣기

파이어베이스 콘솔에서 파이어스토어(Firestore)에 데이터를 저장하는 방법과

자바스크립트로 불러오는 방법을 이전 글에서 공부를 했습니다.

이제는 데이터를 불러와서 콘솔창에 찍어볼 수 있습니다.

자 그렇다면... html에 데이터를 보내줘서 웹사이트에 보이도록 해야하지 않겠습니까?

어떻게 할까요?

파이어스토어 컬렉션과 문서(도큐먼트)

일단 user 컬렉션에 있는, 두명의 유저를 불러와서 html 에 삽입을 해보겠습니다.

유저의 정보는 email 과 name 으로 되어 있습니다.

1. 일단 유저의 정보를 넣을 수 있는 빈 박스를 넣어줘야 합니다.

클래스명은 myContent로 해줍니다.

< div class = "myContent" >

2. 유저 정보를 읽어와서 반복문을 돌려줍니다.

const db = firebase . firestore ();

db . collection ( 'user' )

. get ()

. then (( result ) => {

result . forEach (( userInfo ) => {

const userTemplate = `

${ userInfo . data (). name }

${ userInfo . data (). email }

` ;

document . querySelector ( '.myContent' ). insertAdjacentHTML ( 'afterbegin' , userTemplate );

});

});

userTemplate 를 선언하고 파이어스토어에서 읽어온 정보를 html과 잘 적어놓고

querySelector로 myContent를 불러와서

선언된 userTemplate 를 insertAdjacentHTML을 이용해서 넣어줍니다.

forEach를 통해서 반복문을 돌렸기 때문에

user 컬렉션의 정보가 5개가 있다면, forEach안에 작성된 정보는 5번 반복하게 됩니다.

지금은 2개의 정보밖에 없으므로, 코드를 실행시키면...

화면에 2개의 정보가 잘 뜨게 됩니다.

from http://gnews365.tistory.com/21 by ccl(A) rewrite - 2021-11-05 14:02:05