[firebase] Vue.js + Element UI + Firebase : firestore에서 sub-collection로 데이터 계층화하기

 

firebase.firestore()
	.collection("firstCollection").doc("firstDoc")
    .collection("secondCollection").add(dataToAdd);

// firebase.js

// ..
export const dbService = firebase.firestore();
export const bookRecordRef = dbService.collection("bookRecord");

이전 포스트에서 Vue.js 프로젝트에서 firebase를 연결해 간단한 데이터를 저장하는 방법을 다뤘는데, 오늘은 거기에 이어 계층적 구조화를 조금 더 다뤄보려고 한다. 간단한 book tracker web app을 만드는 중인데, 아래 이미지처럼 bookRecord라는 컬렉션 내에 유저의 고유한 uid를 이름으로 하는 doc(컬렉션의 하위 단위)이 있고, 그 안에 bookInfo라는 collection을 갖도록 하고 싶었다. app이 커지면 정리하기가 힘들 것 같아 이렇게 미리 나누어봤는데, 공식 문서를 제대로 읽지 않고 collection 아래에 또 다른 collection으로 추가하는 방식으로 하니까 당연히 안 됐다 (..^^)

 

bookRecord(collection) > user의 UID를 이름으로 하는 doc > 그 하위의 bookInfo라는 sub-collection

해당 컬렉션에는 유저가 직접 등록한 book review 정보가 들어가 있다. 이름은 자동생성되도록 했다.

 

공식 문서는 firestore>data-model 항목에 잘 나와있다. 아까 컬렉션 안에 컬렉션을 넣으려고 시도했던 것은 공식 문서에서도 "컬렉션은 오로지 문서(doc)만 포함한다"고 잘 설명되어 있어서, 왜 틀렸는지 명확하게 알 수 있었다.

또한, 값이 있는 원시 필드를 포함하거나, 다른 컬렉션을 포함할 수 없다.

 

 

 

문서의 예제를 따라서, 나는 아래처럼 코드를 작성했다.

 

import { bookRecordRef } from "@/firebase";
import { parseTime } from "@/utils/index";

export default {
	props: ["userUID"],
    data() {
    	return {
        	cardForm: {
            	title: "",
        		writer: "",
        		genre: "",
        		quote: "",
        		review: "",
        		created: ""
            }
        }
    },
    //...
    methods: {
    	async onSubmit() {
      	try {
        	this.cardForm.created = parseTime(new Date(Date.now()));
        	await bookRecordRef
          	.doc(`${this.userUID}`)
          	.collection("bookInfo")
          	.add(this.cardForm);
      	} catch (err) {
        	// 에러 처리
      	}
    },
    }
}

이때, bookRecordRef는 firebase로부터 바로 import해주는데, 코드를 깔끔하게 해주기 위해서 firebase.js에 미리 collection을 등록해두었다.

 

// firebase.js

export const dbService = firebase.firestore();
export const bookRecordRef = dbService.collection("bookRecord");

 

풀어쓰면 아래와 같다.

firebase.firestore().collection("firstCollection").doc("firstDoc")
					.collection("secondCollection").add(dataToAdd);

간단한 입력 폼에 적당한 메세지를 적어주고, submit을 누르면,

데이터도 잘 가지고 오도록 했다.

 

컬렉션의 상태.

 

데이터를 가지고 올 때는,아까와 비슷한 문법을 쓴다. 가지고 오고자 하는 collection 째로 데이터를 들고 올 때 아래처럼 작성해주면 된다. bookRecord를 돌며 미리 data()에 선언해둔 빈 객체인 bookList에 push해준다.

async getBookRecord(userUID) {
      const bookRecord = await bookRecordRef
        .doc(`${userUID}`)
        .collection("bookInfo")
        .get();
      bookRecord.forEach(doc => {
        const records = { ...doc.data() };
        this.bookList.push(records);
      });
    },