[firebase] TodoList 구현하기

원래는 로그인으로 끝나는 사이드 프로젝트 였지만
기능을 더 사용해보면 좋을 것 같아서 구현해봤다.
1편은 여기를 참고하면 된다.

우선 cloud firestore에 데이터를 보낼 준비를 해야한다.
그런 다음 js에 다음을 추가해준다.

import { collection, addDoc } from "firebase/firestore";
import { getFirestore } from "firebase/firestore";
const db = getFirestore();

클릭이벤트가 필요하니 버튼에 이벤트를 걸고

<template>
  <div>
    <v-text-field v-model="myTodo" label="할일 입력" required></v-text-field>
    <v-btn color="success" @click="addTodo" class="mt-3"> Add </v-btn>
  </div>
</template>

이런식으로 추가해주자!
자세한 설명은 공식문서를 보면 나와있다.

export default {
  methods: {
    async addTodo() {
      try {
        const docRef = await addDoc(collection(db, "todo"), {
          title: this.myTodo,
          created_at: Date.now(),
        });
        console.log("Document written with ID: ", docRef);
      } catch (e) {
        console.error("Error adding document: ", e);
      }
    },
  },
};

이렇게 모두 하면 갑자기 에러가 뜰 것이다.

내가 뭘 잘못 적었나 싶지만 검색해본 결과 규칙을 살짝 수정해주면 된다고 한다.

기본값이 false로 되어있는데 이것을 true로 바꾸고 실행해보면

정상적으로 데이터가 추가된 것을 볼 수 있다.

하지만 여기서 문제❗
내가 원하는건 배열에 오브젝트를 추가하는 것인데
이건 문서를 계속 생성하는 것이라 잘못된 것을 깨달았다...!

내가 원하는 것을 하려면
arrayUnion과 arrayRemove를 사용해야 한단다.
자세한 것은 공식문서에 잘 나와있다.

아무튼 그렇게 하다보면 이렇게 기능만 완벽한 todo list가 완성이 된다.
다음에는 로그인 토큰을 store에 가져오고 vuetify를 제거해서 ui를 다듬어야겠다!