ChatGPT와 함께 PWA Blog 개발 - 글쓴이

55. 글쓴이 추가

ChatGPT에게 물었습니다.

post를 user 별로 저장하고 싶어.

I want to save posts by user.

To save posts by user, you need to associate each post with a specific user. This can be achieved by storing the user ID in the post document in Firestore. Here’s a complete example showing how to save posts by a user, including handling authentication and displaying the posts for each user.

사용자별로 게시물을 저장하려면 각 게시물을 특정 사용자와 연결해야 합니다. 이는 Firestore의 게시물 문서에 사용자 ID를 저장하여 달성할 수 있습니다. 다음은 인증 처리 및 각 사용자의 게시물 표시를 포함하여 사용자의 게시물을 저장하는 방법을 보여주는 전체 예입니다.

Steps to Implement Saving Posts by User

사용자별 게시물 저장 구현 단계

1. Set up Firebase Authentication and Firestore.
   Firebase 인증 및 Firestore를 설정합니다.
2. Create a form for writing posts.
   게시물 작성을 위한 양식을 만듭니다.
3. Associate each post with the authenticated user.
   각 게시물을 인증된 사용자와 연결합니다.
4. Display posts by the authenticated user.
   인증된 사용자의 게시물을 표시합니다.
5. Configure Vue Router for navigation.
   탐색을 위해 Vue 라우터를 구성합니다.

1. Set up Firebase Authentication and Firestore

1. Firebase 인증 및 Firestore 설정

Ensure Firebase Authentication and Firestore are correctly set up in your project.
프로젝트에 Firebase 인증과 Firestore가 올바르게 설정되어 있는지 확인하세요.

2. Create a Form for Writing Posts

2. 게시물 작성을 위한 양식 만들기

Create a component with a form for writing posts. When the form is submitted, save the post along with the user ID to Firestore.
게시물 작성을 위한 양식이 포함된 구성 요소를 만듭니다. 양식이 제출되면 사용자 ID와 함께 게시물을 Firestore에 저장합니다.

views/WritePost.vue

<template>
  <v-container>
    <v-form @submit.prevent="submitPost">
      <v-text-field v-model="title" label="Title" required></v-text-field>
      <v-textarea v-model="content" label="Content" rows="10" required></v-textarea>
      <v-btn type="submit" color="primary">Submit</v-btn>
    </v-form>
  </v-container>
</template>

<script>
import { db, auth } from '../firebase';

export default {
  data() {
    return {
      title: '',
      content: '',
    };
  },
  methods: {
    async submitPost() {
      const user = auth.currentUser;
      if (user) {
        try {
          await db.collection('posts').add({
            title: this.title,
            content: this.content,
            userId: user.uid,
            createdAt: new Date(),
          });
          this.$router.push('/post-list');
        } catch (error) {
          console.error("Error writing document: ", error);
        }
      } else {
        console.error("User not authenticated");
      }
    },
  },
};
</script>

3. Display Posts by the Authenticated User

3. 인증된 사용자의 게시물 표시

Create a component to display posts by the currently authenticated user. Fetch the posts from Firestore where the userId matches the authenticated user's ID.
현재 인증된 사용자의 게시물을 표시하는 구성 요소를 만듭니다. 'userId'가 인증된 사용자 ID와 일치하는 Firestore에서 게시물을 가져옵니다.

views/UserPosts.vue

<template>
  <v-container>
    <v-alert v-if="error" type="error" dismissible>{{ error.message }}</v-alert>
    <v-progress-circular v-if="loading" indeterminate></v-progress-circular>
    <v-list v-if="!loading">
      <v-list-item v-for="post in posts" :key="post.id" @click="goToPostDetail(post.id)">
        <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 { db, auth } from '../firebase';

export default {
  data() {
    return {
      posts: [],
      loading: false,
      error: null
    };
  },
  async created() {
    this.loading = true;
    const user = auth.currentUser;
    if (user) {
      try {
        const querySnapshot = await db.collection('posts').where('userId', '==', user.uid).get();
        this.posts = querySnapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
      } catch (error) {
        this.error = error;
      } finally {
        this.loading = false;
      }
    } else {
      this.error = { message: 'User not authenticated' };
      this.loading = false;
    }
  },
  methods: {
    goToPostDetail(postId) {
      this.$router.push({ name: 'PostDetailView', params: { id: postId } });
    }
  }
};
</script>

4. Configure Vue Router for Navigation

4. 탐색을 위해 Vue 라우터 구성

Add the necessary routes for writing and viewing posts.
게시물 작성 및 조회에 필요한 경로를 추가합니다.

router/index.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../views/Home.vue';
import UserPosts from '../views/UserPosts.vue';
import WritePost from '../views/WritePost.vue';
import PostDetailView from '../views/PostDetailView.vue';
import Login from '../views/Login.vue';
import store from '../store';

Vue.use(VueRouter);

const routes = [
  { path: '/', name: 'Home', component: Home },
  { path: '/login', name: 'Login', component: Login },
  { 
    path: '/user-posts', 
    name: 'UserPosts', 
    component: UserPosts, 
    meta: { requiresAuth: true } 
  },
  { 
    path: '/write-post', 
    name: 'WritePost', 
    component: WritePost, 
    meta: { requiresAuth: true } 
  },
  { 
    path: '/post/:id', 
    name: 'PostDetailView', 
    component: PostDetailView, 
    meta: { requiresAuth: true } 
  }
];

const router = new VueRouter({
  routes
});

router.beforeEach((to, from, next) => {
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth);
  const user = store.state.auth.user;

  if (requiresAuth && !user) {
    next('/login');
  } else {
    next();
  }
});

export default router;

5. Add Authentication to Store

5. Store에 인증 추가

Ensure you have authentication state managed in your Vuex store.
Vuex Store에서 인증 상태가 관리되는지 확인하세요.

store/index.js

import Vue from 'vue';
import Vuex from 'vuex';
import { auth } from '../firebase';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    user: null
  },
  mutations: {
    setUser(state, user) {
      state.user = user;
    }
  },
  actions: {
    async login({ commit }, { email, password }) {
      try {
        const { user } = await auth.signInWithEmailAndPassword(email, password);
        commit('setUser', user);
      } catch (error) {
        console.error("Error logging in: ", error);
      }
    },
    async logout({ commit }) {
      try {
        await auth.signOut();
        commit('setUser', null);
      } catch (error) {
        console.error("Error logging out: ", error);
      }
    },
    fetchUser({ commit }) {
      auth.onAuthStateChanged(user => {
        if (user) {
          commit('setUser', user);
        } else {
          commit('setUser', null);
        }
      });
    }
  },
  getters: {
    isAuthenticated: state => !!state.user,
    user: state => state.user
  }
});

Summary 요약

• Write Post Form: Create a form to capture post content and associate it with the authenticated user.
  게시물 양식 작성: 게시물 콘텐츠를 캡처하고 이를 인증된 사용자와 연결하는 양식을 만듭니다.
• Save Post: Save the post with the user ID to Firestore.
  게시물 저장: 사용자 ID가 포함된 게시물을 Firestore에 저장합니다.
• Display User Posts: Fetch and display posts for the authenticated user.
  사용자 게시물 표시: 인증된 사용자의 게시물을 가져와 표시합니다.
• Router Configuration: Set up routes to handle navigation.
  라우터 구성: 탐색을 처리할 경로를 설정합니다.
• Authentication: Manage authentication state in Vuex.
  인증: Vuex에서 인증 상태를 관리합니다.

By following these steps, you can implement functionality to save posts by a user, ensuring that each post is associated with the user who created it.

다음 단계에 따라 사용자의 게시물을 저장하는 기능을 구현하여 각 게시물이 해당 게시물을 작성한 사용자와 연결되도록 할 수 있습니다.

ChatGPT가 시키는 대로 했습니다.

1. 페이지 링크 정리

각 컴포넌트의 이름, 그리고 각 링크 항목들에 대해 정리 하기 위해 router을 현재의 예제를 중심으로 개편합니다. 

2. WritePost.vue

‘글쓰기’를 위하여 현 예제의 WritePost.vue를 사용합니다. 

3. UserPosts.vue

사용자별로 쓴 글을 모아 보여주는 UserPosts.vue를 추가합니다. 

4. 실행

1. 글쓰기

2. Home

3. 나의 글