<div id="readability-page-1" class="page"><div>
 <a href="/m/category/DevOps%2C%20Infra/%F0%9F%94%A5%20Firebase">DevOps, Infra/🔥 Firebase</a><h2>firebase ver 8 with React (3) Firestore</h2>
 <cite>
 DarrenKwonDev
 </cite>
 </div><time>2021. 6. 23. 03:19</time>
 
 
 <a href="#comment" onclick="Utils.smoothScroll(this);return false">
 
 </a>
 
 
 
 
 
 
 
 <div>
 no sql이고, mongoDB랑 비슷합니다.
MongoDB가 DB - 컬렉션 - 도큐먼트의 구조로 이루어져있듯, firestore도 컬렉션-도큐먼트의 구조를 가지고 있습니다.

doc: <a href="https://firebase.google.com/docs/reference/js/firebase.firestore" target="_blank" rel="noopener">https://firebase.google.com/docs/reference/js/firebase.firestore</a>
firebase.firestore() 관련 :&nbsp;<a href="https://firebase.google.com/docs/reference/js/firebase.firestore.Firestore">https://firebase.google.com/docs/reference/js/firebase.firestore.Firestore</a>


<h4 data-ke-size="size20">Type들</h4>
문서를 보면 아래 타입들이 자주 등장합니다.(이후에 다른 기능을 써보면서 더 추가해보겠음)

CollectionReference
<a href="https://firebase.google.com/docs/reference/js/firebase.firestore.CollectionReference">https://firebase.google.com/docs/reference/js/firebase.firestore.CollectionReference</a>
collection를 wrapping한 것입니다. 특정 document를 가져오라고 쿼리를 날릴 대상입니다. 단순히 add, get 같은 메서드를 사용하여 document를 넣고 읽고 할 수도 있습니다. onSnapshot으로 Observer를 붙여 event-driven으로 만들 수도 있습니다.

DocumentReference&nbsp;
<a href="https://firebase.google.com/docs/reference/js/firebase.firestore.DocumentReference" target="_blank" rel="noopener">https://firebase.google.com/docs/reference/js/firebase.firestore.DocumentReference</a>
document를 wrapping한 것입니다. 특정 document를 조작할 수 있습니다. delete, set, update ...
가장 쉽게는 firebase.firestore().doc(`path`) 꼴로 가져올 수 있습니다.
onSnapshot으로 Observer를 붙여 event-driven으로 만들 수도 있습니다.

QuerySnapshot =&gt; 여러 개의&nbsp;DocumentSnapshot를 감싸고 있습니다. docs() 메서드를 통해서 여러 개의 QueryDocumentSnapshot를 가져올 수 있습니다. 그 외에 empty()를 통해서 문서 쿼리 결과가 빈 값인지 등 여러 조작을 할 수 있습니다. firebase의 document를 담은 배열로 생각하면 편할 듯.

QueryDocumentSnapshot =&gt; 쿼리의 결과로 받은 도큐먼트입니다. 쿼리의 실직적인 firestore의 도큐먼트를 감싸고 있는 녀석입니다. data() 메서드로 도큐먼트를 직접 출력할수도 있고 여러 메서드를 통해 도큐먼트의 여러 속성들을 살펴볼 수도 있습니다.&nbsp;


<h4 data-ke-size="size20">CRUD 해볼까?</h4>

create

CollectionReference&nbsp;<a href="https://firebase.google.com/docs/reference/js/firebase.firestore.CollectionReference" target="_blank" rel="noopener">https://firebase.google.com/docs/reference/js/firebase.firestore.CollectionReference</a>
<pre id="code_1624375515057" data-ke-language="javascript" data-ke-type="codeblock"><code>// CollectionReference 반환
firebase.firestore().collection("books");

// books라는 컬렉션에 {...} 도큐먼트를 넣어라
firebase.firestore().collection("books").add({name: "uly", pages: 235});</code></pre>

read
QuerySnapshot <a href="https://firebase.google.com/docs/reference/js/firebase.firestore.QuerySnapshot" target="_blank" rel="noopener">https://firebase.google.com/docs/reference/js/firebase.firestore.QuerySnapshot</a>
QueryDocumentSnapshot <a href="https://firebase.google.com/docs/reference/js/firebase.firestore.QueryDocumentSnapshot" target="_blank" rel="noopener">https://firebase.google.com/docs/reference/js/firebase.firestore.QueryDocumentSnapshot</a>

아니 depth가 뭐 이렇게 깊어 어휴;;
사실, QuerySnapshot에서 QueryDocumentSnapshot을 get으로 뽑아내는 것은 생각보다 깊네요.
<pre id="code_1624377016658" data-ke-language="javascript" data-ke-type="codeblock"><code>// CollectionReference의 get 메서드는 QuerySnapshot 반환
const bookQuerySnapShot = firebase.firestore().collection("books").get();

// QueryDocumentSnapshot의 data 메서드로 도큐먼트 출력
bookQuerySnapShot.forEach(QueryDocumentSnapshot =&gt; console.log(QueryDocumentSnapshot.data());
</code></pre>

delete, update

firebase에는 '경로'가 있습니다. '[collection]/[documentId]' 꼴입니다. 해당 경로를 전달해주고, 조작하면 됩니다.
<pre id="code_1624384807079" data-ke-language="javascript" data-ke-type="codeblock"><code>firebase.firestore().doc(`books/${book.id}`).delete();
firebase.firestore().doc(`books/${book.id}`).update({ name: newName });</code></pre>

<h4 data-ke-size="size20">Observe with snapshot</h4>

CollectionReference의 onSnapshot
<a href="https://firebase.google.com/docs/reference/js/firebase.firestore.CollectionReference#onsnapshot" target="_blank" rel="noopener">https://firebase.google.com/docs/reference/js/firebase.firestore.CollectionReference#onsnapshot</a>

CollectionReference의 onSnapshot 메서드는 Observer를 통해 reactive하게 구현하는데 좋습니다.
<pre id="code_1624379115519" data-ke-language="javascript" data-ke-type="codeblock"><code>onSnapshot(
 onNext: (snapshot: QuerySnapshot&lt;T&gt;) =&gt; void,
 onError?: (error: FirestoreError) =&gt; void,
 onCompletion?: () =&gt; void
): () =&gt; void;</code></pre>

컬렉션을 Observe하다가 바뀌면, 해당 스냅샷을 가지고 도큐먼트를 출력하는 함수입니다.
<pre id="code_1624379977759" data-ke-language="javascript" data-ke-type="codeblock"><code>firebase.firestore().collection("books").onSnapshot((QuerySnapshot) =&gt; {
 QuerySnapshot?.docs.map(doc =&gt; console.log(doc));
}</code></pre>


<h4 data-ke-size="size20">보안 정책에 대해서</h4>
ref)
<a href="https://firebase.google.com/docs/rules/get-started?authuser=0">https://firebase.google.com/docs/rules/get-started?authuser=0</a>&nbsp;

이후에 보안 정책을 별도의 파트에서 다루겠습니다.
 
 
					
 
 
 </div></div>

HotHandCoding

DarrenKwon

no sql이고, mongoDB랑 비슷합니다.
MongoDB가 DB - 컬렉션 - 도큐먼트의 구조로 이루어져있듯, firestore도 컬렉션-도큐먼트의 구조를 가지고 있습니다.
 
doc: https://firebase.google.com/docs/reference/js/firebase.firestore
firebase.firestore() 관련 : https://firebase.google.com/docs/reference/js/firebase.firestore.Firestore
 
 
Type들
문서를 보면 아래 타입들이 자주 등장합니다.(이후에 다른 기능을 써보면서 더 추가해보겠음)
 
CollectionReference
https://firebase.google.com/docs/reference/js/firebase.firestore.CollectionReference
collection를 wrapping한 것입니다. 특정 document를 가져오라고 쿼리를 날릴 대상입니다. 단순히 add, get 같은 메서드를 사용하여 document를 넣고 읽고 할 수도 있습니다. onSnapshot으로 Observer를 붙여 event-driven으로 만들 수도 있습니다.
 
DocumentReference 
https://firebase.google.com/docs/reference/js/firebase.firestore.DocumentReference
document를 wrapping한 것입니다. 특정 document를 조작할 수 있습니다. delete, set, update ...
가장 쉽게는 firebase.firestore().doc(`path`) 꼴로 가져올 수 있습니다.
onSnapshot으로 Observer를 붙여 event-driven으로 만들 수도 있습니다.
 
QuerySnapshot => 여러 개의 DocumentSnapshot를 감싸고 있습니다. docs() 메서드를 통해서 여러 개의 QueryDocumentSnapshot를 가져올 수 있습니다. 그 외에 empty()를 통해서 문서 쿼리 결과가 빈 값인지 등 여러 조작을 할 수 있습니다. firebase의 document를 담은 배열로 생각하면 편할 듯.
 
QueryDocumentSnapshot => 쿼리의 결과로 받은 도큐먼트입니다. 쿼리의 실직적인 firestore의 도큐먼트를 감싸고 있는 녀석입니다. data() 메서드로 도큐먼트를 직접 출력할수도 있고 여러 메서드를 통해 도큐먼트의 여러 속성들을 살펴볼 수도 있습니다. 
 
 
CRUD 해볼까?
 
create
 
CollectionReference https://firebase.google.com/docs/reference/js/firebase.firestore.CollectionReference
// CollectionReference 반환
firebase.firestore().collection("books");
// books라는 컬렉션에 {...} 도큐먼트를 넣어라
firebase.firestore().collection("books").add({name: "uly", pages: 235});
 
read
QuerySnapshot https://firebase.google.com/docs/reference/js/firebase.firestore.QuerySnapshot
QueryDocumentSnapshot https://firebase.google.com/docs/reference/js/firebase.firestore.QueryDocumentSnapshot
 
아니 depth가 뭐 이렇게 깊어 어휴;;
사실, QuerySnapshot에서 QueryDocumentSnapshot을 get으로 뽑아내는 것은 생각보다 깊네요.
// CollectionReference의 get 메서드는 QuerySnapshot 반환
const bookQuerySnapShot = firebase.firestore().collection("books").get();
// QueryDocumentSnapshot의 data 메서드로 도큐먼트 출력
bookQuerySnapShot.forEach(QueryDocumentSnapshot => console.log(QueryDocumentSnapshot.data());
 
delete, update
 
firebase에는 '경로'가 있습니다. '[collection]/[documentId]' 꼴입니다. 해당 경로를 전달해주고, 조작하면 됩니다.
firebase.firestore().doc(`books/${book.id}`).delete();
firebase.firestore().doc(`books/${book.id}`).update({ name: newName });
 
Observe with snapshot
 
CollectionReference의 onSnapshot
https://firebase.google.com/docs/reference/js/firebase.firestore.CollectionReference#onsnapshot
 
CollectionReference의 onSnapshot 메서드는 Observer를 통해 reactive하게 구현하는데 좋습니다.
onSnapshot(
 onNext: (snapshot: QuerySnapshot<T>) => void,
 onError?: (error: FirestoreError) => void,
 onCompletion?: () => void
): () => void;
 
컬렉션을 Observe하다가 바뀌면, 해당 스냅샷을 가지고 도큐먼트를 출력하는 함수입니다.
firebase.firestore().collection("books").onSnapshot((QuerySnapshot) => {
 QuerySnapshot?.docs.map(doc => console.log(doc));
}
 
 
보안 정책에 대해서
ref)
https://firebase.google.com/docs/rules/get-started?authuser=0 
 
이후에 보안 정책을 별도의 파트에서 다루겠습니다.

firebase ver 8 with React (3) Firestore

댓글