Vue로 PWA 개발, ChatGPT에게 프론트엔드와 연동하는 Firestore의 예제를 요청했습니다.

Vue로 PWA 개발 - 그랜파 개발자.

 

Firestore의 기본적인 사용법을 알기 위해 먼저 간단한 예제를 살펴보는 것도 좋습니다.

ChatGPT에게 물었습니다.

firestore를 연동하여 사용하는 예제 하나 보여줘.

ChatGPT

아래는 Firestore를 Vue 프로젝트에 연동하여 간단히 데이터를 추가하고 가져오는 예제입니다.

예제 목표

1. Firestore에 "할 일 목록"을 저장.
2. Firestore에서 "할 일 목록"을 가져와 화면에 표시.

Firestore 데이터 구조

Firestore의 컬렉션 이름은 todos입니다. 각 문서는 다음과 같은 구조를 가집니다:

{
  "title": "예제 할 일",
  "completed": false
}

예제 코드

1. Firebase 초기화 (firebase.js)

먼저 Firebase 프로젝트의 설정 정보를 추가하고 Firestore를 초기화합니다.

// src/firebase.js
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

// Firebase 프로젝트 설정 정보
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID",
};

// Firebase 초기화
const app = initializeApp(firebaseConfig);

// Firestore 초기화
const db = getFirestore(app);

export { db };

2. Vue 컴포넌트 (TodoApp.vue)

Firestore와 연동하여 데이터를 추가하고 가져오는 Vue 컴포넌트입니다.

<template>
  <v-container>
    <h1>Firestore와 연동한 할 일 관리</h1>

    <!-- 새로운 할 일 추가 -->
    <v-text-field
      label="새로운 할 일을 입력하세요"
      v-model="newTodo"
      @keyup.enter="addTodo"
      outlined
    ></v-text-field>
    <v-btn color="primary" @click="addTodo">추가</v-btn>

    <!-- 할 일 목록 -->
    <v-list>
      <v-list-item
        v-for="todo in todos"
        :key="todo.id"
      >
        <v-list-item-content>
          <v-list-item-title :class="{ completed: todo.completed }">
            {{ todo.title }}
          </v-list-item-title>
        </v-list-item-content>
        <v-list-item-action>
          <v-btn
            icon
            @click="toggleComplete(todo)"
          >
            <v-icon>{{ todo.completed ? 'mdi-check-circle' : 'mdi-circle-outline' }}</v-icon>
          </v-btn>
          <v-btn
            icon
            @click="deleteTodo(todo.id)"
          >
            <v-icon color="red">mdi-delete</v-icon>
          </v-btn>
        </v-list-item-action>
      </v-list-item>
    </v-list>
  </v-container>
</template>

<script>
import { db } from "@/firebase";
import {
  collection,
  addDoc,
  getDocs,
  updateDoc,
  deleteDoc,
  doc,
} from "firebase/firestore";

export default {
  data() {
    return {
      todos: [], // 할 일 목록
      newTodo: "", // 새로운 할 일 제목
    };
  },
  methods: {
    async fetchTodos() {
      try {
        const querySnapshot = await getDocs(collection(db, "todos"));
        this.todos = querySnapshot.docs.map((doc) => ({
          id: doc.id,
          ...doc.data(),
        }));
      } catch (error) {
        console.error("Error fetching todos:", error);
      }
    },
    async addTodo() {
      if (!this.newTodo.trim()) return;
      try {
        const docRef = await addDoc(collection(db, "todos"), {
          title: this.newTodo.trim(),
          completed: false,
        });
        this.todos.push({
          id: docRef.id,
          title: this.newTodo.trim(),
          completed: false,
        });
        this.newTodo = ""; // 입력 필드 초기화
      } catch (error) {
        console.error("Error adding todo:", error);
      }
    },
    async toggleComplete(todo) {
      try {
        await updateDoc(doc(db, "todos", todo.id), {
          completed: !todo.completed,
        });
        todo.completed = !todo.completed; // 로컬 상태 업데이트
      } catch (error) {
        console.error("Error updating todo:", error);
      }
    },
    async deleteTodo(id) {
      try {
        await deleteDoc(doc(db, "todos", id));
        this.todos = this.todos.filter((todo) => todo.id !== id);
      } catch (error) {
        console.error("Error deleting todo:", error);
      }
    },
  },
  mounted() {
    this.fetchTodos(); // Firestore에서 할 일 목록 가져오기
  },
};
</script>

<style scoped>
h1 {
  margin-bottom: 16px;
}
.completed {
  text-decoration: line-through;
  color: gray;
}
</style>

코드 설명

1. Firestore 초기화:

• firebase.js에서 Firestore를 초기화하고 Vue 컴포넌트에서 db 객체를 사용.

2. Firestore 컬렉션 접근:

• collection(db, "todos")를 통해 todos 컬렉션에 접근.

3. 할 일 추가:

• addDoc를 사용해 Firestore에 새 문서를 추가.

4. 할 일 가져오기:

• getDocs로 Firestore에서 모든 문서를 가져오고, Vue의 todos 배열에 저장.

5. 할 일 상태 업데이트:

• updateDoc를 통해 completed 필드를 토글.

6. 할 일 삭제:

• deleteDoc으로 Firestore 문서를 삭제하고 Vue 상태에서도 제거.

실행 흐름

1. 컴포넌트가 마운트되면 fetchTodos()를 호출하여 Firestore에서 데이터를 가져옵니다.
2. 사용자가 할 일을 추가하면 Firestore에 저장되고, 화면에 즉시 업데이트됩니다.
3. 할 일의 완료 상태를 변경하거나 삭제할 때 Firestore와 Vue 상태가 동기화됩니다.

결과

1. Firestore와 Vue를 사용해 할 일 목록을 CRUD(생성, 읽기, 업데이트, 삭제)할 수 있습니다.
2. 실시간 동기화 기능이 필요하다면 Firestore의 실시간 리스너(onSnapshot)을 추가할 수 있습니다. 이를 적용하고 싶다면 알려주세요!

Vue 프로젝트 Beta Test : mylog, 일상의 기록