Vue로 PWA 개발, ChatGPT에게 프론트엔드 앱을 만들어 달라고 했습니다.

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

 

이제까지 배운 내용을 정리하기 위하여 간단한 PWA 예제를 하나 만들어 보는 것이 좋겠습니다..
대부분의 컴퓨터 소프트웨어가 가지는 기본적인 데이터 처리 기능은 Create(생성), Read(읽기), Update(갱신), Delete(삭제)입니다. 이를 보통 CRUD라고 합니다.

Firestore를 연동하여 CRUD가 있는 간단한 PWA를 만들어 봅시다.

 

ChaGPT에게 물었습니다.

vue,vuex,vuetify,firestore v2를 이용하여 글을 쓰고, 저장하고, 읽고, 수정하는 pwa를 만들어줘

ChatGPT

Firestore v2 SDK를 사용하는 경우 약간의 차이가 있으므로, 아래 가이드에서 Firebase Web SDK v9 모듈 방식으로 구현하겠습니다. Vue, Vuex, Vuetify, Firestore로 CRUD 기능을 지원하는 PWA를 만드는 과정을 안내합니다.

1. 프로젝트 설정

1. 프로젝트 생성

vue create my-pwa-app

 

PWA 플러그인도 설치하겠다는 옵션을 선택하세요.

2. Vuetify 설치

vue add vuetify

 

3. Firebase 및 Firestore 설정

Firebase 프로젝트를 생성한 후 Firestore를 활성화하고, 웹 앱 설정에서 Firebase 구성 정보를 받아옵니다. firebase 패키지를 설치합니다.

npm install firebase

 

4. Firebase 초기화

src/firebase.js 파일을 생성하여 Firebase를 초기화하고 Firestore 모듈을 불러옵니다.

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

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);
const db = getFirestore(app);

export { db };

 

2. Vuex 설정

src/store/index.js에서 Vuex를 설정하여 Firestore에 글 데이터를 저장, 수정, 삭제, 읽는 액션 및 변수를 정의합니다.

// src/store/index.js
import Vue from "vue";
import Vuex from "vuex";
import { db } from "../firebase";
import { collection, getDocs, addDoc, updateDoc, doc } from "firebase/firestore";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    posts: []
  },
  mutations: {
    setPosts(state, posts) {
      state.posts = posts;
    },
    addPost(state, post) {
      state.posts.push(post);
    },
    updatePost(state, updatedPost) {
      const index = state.posts.findIndex(post => post.id === updatedPost.id);
      if (index !== -1) {
        Vue.set(state.posts, index, updatedPost);
      }
    }
  },
  actions: {
    async fetchPosts({ commit }) {
      const querySnapshot = await getDocs(collection(db, "posts"));
      const posts = querySnapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
      commit("setPosts", posts);
    },
    async addPost({ commit }, post) {
      const docRef = await addDoc(collection(db, "posts"), post);
      commit("addPost", { id: docRef.id, ...post });
    },
    async updatePost({ commit }, { id, post }) {
      const docRef = doc(db, "posts", id);
      await updateDoc(docRef, post);
      commit("updatePost", { id, ...post });
    }
  },
  getters: {
    allPosts: state => state.posts
  }
});

 

3. Vuetify로 UI 구성

글 작성 및 수정할 수 있는 UI를 Vuetify를 이용해 구성합니다.

<!-- src/views/PostList.vue -->
<template>
  <v-container>
    <v-btn @click="openDialog">글 작성하기</v-btn>

    <v-dialog v-model="dialog" max-width="500px">
      <v-card>
        <v-card-title>새 글 작성</v-card-title>
        <v-card-text>
          <v-text-field label="제목" v-model="newPost.title"></v-text-field>
          <v-textarea label="내용" v-model="newPost.content"></v-textarea>
        </v-card-text>
        <v-card-actions>
          <v-btn color="primary" @click="savePost">저장</v-btn>
          <v-btn color="secondary" @click="closeDialog">취소</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>

    <v-list>
      <v-list-item v-for="post in posts" :key="post.id" @click="editPost(post)">
        <v-list-item-content>
          <v-list-item-title>{{ post.title }}</v-list-item-title>
          <v-list-item-subtitle>{{ post.content }}</v-list-item-subtitle>
        </v-list-item-content>
      </v-list-item>
    </v-list>
  </v-container>
</template>

<script>
import { mapActions, mapGetters } from "vuex";

export default {
  data() {
    return {
      dialog: false,
      newPost: {
        title: "",
        content: ""
      }
    };
  },
  computed: {
    ...mapGetters(["allPosts"]),
    posts() {
      return this.allPosts;
    }
  },
  methods: {
    ...mapActions(["fetchPosts", "addPost", "updatePost"]),
    openDialog() {
      this.newPost = { title: "", content: "" };
      this.dialog = true;
    },
    closeDialog() {
      this.dialog = false;
    },
    savePost() {
      if (this.newPost.id) {
        this.updatePost({ id: this.newPost.id, post: this.newPost });
      } else {
        this.addPost(this.newPost);
      }
      this.closeDialog();
    },
    editPost(post) {
      this.newPost = { ...post };
      this.dialog = true;
    }
  },
  created() {
    this.fetchPosts();
  }
};
</script>

4. PWA 빌드 및 테스트

npm run serve

 

npm run serve로 로컬 서버를 실행하여 Firestore와의 CRUD 연동이 올바르게 동작하는지 테스트합니다.
배포 전, npm run build로 PWA로 빌드합니다.

 

단순하지만 Vue로 PWA가 만들어졌습니다.

 

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