firestore 관련해서 혹시 가르쳐주실분 계실까요...?

Question

리액트 프로젝트 영상보면서 공부하는 비전공코린이입니다. 어찌저찌 다 해결해갔는데 Firestore v8 일 때 db 코드를 v9 버전 공식문서를 보면서 고쳐보려고 했는데 기본 코드부터 이해가 잘 안돼서요 import React, {useEffect, useState} from 'react'; import './Orders.css' import {useStateValue} from "./StateProvider"; import {collection, addDoc} from "./firebase"; import Order from "./Order"; import { doc, setDoc } from "firebase/firestore"; function Orders() { const [{ basket, user}, dispatch] = useStateValue(); const [orders, setOrders] = useState([]); useEffect(() => { if (user){ await setDoc(doc(db,'user'),{ }); db .collection('users') .doc(user?.uid) .collection('orders') .orderBy('created', 'desc') .onSnapshot(snapshot => ( setOrders(snapshot.docs.map(doc => ({ id:doc.id, data:doc.data() }))) )) } else { setOrders([]) } }, [user]) return (

주문내역

{orders?.map(order => ( ))}

); } export default Orders;useEffect(() => { if (user){ await setDoc(doc(db,'user'),{ }); db .collection('users') .doc(user?.uid) .collection('orders') .orderBy('created', 'desc') .onSnapshot(snapshot => ( setOrders(snapshot.docs.map(doc => ({ id:doc.id, data:doc.data() }))) )) } else { setOrders([]) }이부분에서 db 아래를 수정하고 싶은데 공식문서를 봐도 이해가 잘 가지 않아서 어떻게 고치는지 여쭤봐도 될까요? await setDoc(doc(db,'user'). -> 이부분은 공식문서에서 데이터 추가하는 코드라길래 쓰긴했는데아래 db 에 있는 코드를 어떻게 바꿔야할지 잘 모르겠습니다 설명이 부족하다면 죄송합니다... 처음 firebase를 다루는 거라 어떻게 더 설명을 해드리거나 코드가 필요하다면 말씀해주시면 올리겠습니다!

검둥오리 · Accepted Answer

저도 잘 모르는데 참고하시라고 제가 아는 선에서 답변드리면 ...firestore 는 collection이라는 서류 가방에 doc이라는 서류가 담겨있는 구조로collection (홀) -> doc (짝) -> collection (홀) -> doc (짝) -> collection (홀) -> doc (짝) ... 이런 식으로 타고 들어갑니다. 즉 collection이라면 주소가 홀수, doc이라면 주소가 짝수입니다.따라서 작성자님께서 쓴 doc(db, &#34;user&#34;)는 작동 안할 것 같습니다. 주소가 홀수라 collection에서 끝나기 때문에 doc(db, &#34;user&#34;)보다는 collection(db, &#34;user&#34;)가 맞고, doc으로 쓴다면 doc(db, &#34;user&#34;, doc ID)가 맞을 것 같습니다.그리고 새로운 데이터를 추가하는 방법은 setDoc과 addDoc 이 있는데 setDoc은 id를 본인이 직접 지정해주는 것이고 addDoc은 id를 firestore가 자동으로 지정해주는 것입니다.그래서 만약 id를 직접 지정해주고 싶다면(uuid 같은 랜덤 id를 이용하던가 유의미한 고유한 값을 집어넣던가) setDoc을 사용하되 setDoc(doc(db, &#34;user&#34;, 새로운 id), { 새로 추가할 객체 } ) 로 하던가 , addDoc(collection(db, &#34;user&#34;), {새로 추가할 객체} ) 로 해야합니다.이것도 보시면 doc으로 들어가면 주소가 짝수, collection으로 들어가면 주소가 홀수죠 ㅎㅎ다음으로 onSnapshot은 실시간으로 업데이트를 받아올 doc이나 collection에 리스너를 붙여 업데이트된 값을 받아와 무언가를 하는 것으로, onSnapshot ( doc 이나 collection 또는 query의 주소 , 가져온 값으로 무언가를 할지 ) 와 같이 작동합니다.작성하신 것을 보니 collection(db, &#34;users&#34;, uid, &#34;orders&#34;) 을 생성순으로 받아오려는 query인듯한데,const q1 &#61; query( collection(db, &#34;users&#34;, uid, &#34;orders&#34;), orderBy(&#34;created&#34;, &#34;desc&#34;) ) 라는 query를 onSnapshot에 넣어 업데이트 값을 받아와 useState 값을 변경해 어플에 반영해주면 되겠습니다.const q1 &#61; query( collection(db, &#34;users&#34;, uid, &#34;orders&#34;), orderBy(&#34;created&#34;, &#34;desc&#34;) ) onSnapshot( q1 , (snapshot) &#61;> { ... } )

firestore 관련해서 혹시 가르쳐주실분 계실까요...?

1개의 답변

#firestore 목록