Vue PWA myLog - mylog 리스트

그랜파 개발자·2024년 8월 28일
firestorepwavuevuetify

Vue PWA - myLog 개발

목록 보기
15/61

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

15. 홈페이지 - mylog 리스트

firestore DB에 저장된 마이로그들의 리스트를 보여주는 홈 페이지입니다.
화면에 마이로그들이 리스트로 나타나고 이들 리스트 중 하나를 선택하면 마이로그 상세 보기 페이지로 이동하게 됩니다. 먼저 마이로그 리스트를 나타내는 홈페이지를 간단하게 만들고, 마이로그를 쓰는 페이지를 만들어 마이로그를 등록하면서 필요한 것들을 더 보완하는 방향으로 개발을 진행합니다.

ChatGPT에게 물었습니다.

Using vuetify, create a page that displays the saved articles as a list and moves to a detailed view of the article when you select the list.

vuetify를 이용하여 저장된 글들을 리스트로 나타내고 리스트를 선택하면 글의 상세보기로 페이지를 이동하는 페이지를 만들어 줘.

ChatGPT

To create a page using Vuetify that displays saved articles as a list and navigates to a detailed view when an article is selected, follow these steps:
저장된 기사를 목록으로 표시하고 기사가 선택되면 세부 보기로 이동하는 Vuetify를 사용하여 페이지를 만들려면 다음 단계를 따르세요.

Steps to Create the Articles List and Detailed View

기사 목록 및 상세 보기를 만드는 단계

  1. Set Up Firebase Firestore in Your Vue Project: Ensure Firebase and Firestore are configured.
    Vue 프로젝트에서 Firebase Firestore 설정: Firebase와 Firestore가 구성되어 있는지 확인하세요.

  2. Create a Vue Component to Display Articles as a List: Use Vuetify components to display a list of articles.
    기사를 목록으로 표시하기 위한 Vue 구성 요소 만들기: Vuetify 구성 요소를 사용하여 기사 목록을 표시합니다.

  3. Create a Vue Component for the Article Detail View: Show detailed information of a selected article.
    기사 세부 정보 보기를 위한 Vue 구성 요소 만들기: 선택한 기사의 세부 정보를 표시합니다.

  4. Set Up Vue Router to Handle Navigation: Enable navigation between the list and detail view.
    탐색을 처리하도록 Vue 라우터 설정: 목록 보기와 세부 정보 보기 사이의 탐색을 활성화합니다.

1. Set Up Firebase Firestore in Your Vue Project

1. Vue 프로젝트에 Firebase Firestore 설정

If you haven't set up Firebase Firestore yet, follow these steps:
아직 Firebase Firestore를 설정하지 않았다면 다음 단계를 따르세요.

  1. Install Firebase:
    Firebase를 설치합니다.

npm install firebase

  1. Set up Firebase and Firestore in a firebase.js file:
    'firebase.js' 파일에 Firebase와 Firestore를 설정합니다.
// src/firebase.js
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

// Your Firebase configuration
const firebaseConfig = {
  apiKey: process.env.VUE_APP_FIREBASE_API_KEY,
  authDomain: process.env.VUE_APP_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.VUE_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.VUE_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.VUE_APP_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.VUE_APP_FIREBASE_APP_ID,
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const db = getFirestore(app); // Initialize Firestore

export { db };

2. Create a Vue Component to Display Articles as a List

2. 기사를 목록으로 표시하는 Vue 구성 요소 만들기

Create a component named ArticleList.vue to display the list of saved articles.
저장된 기사 목록을 표시하려면 'ArticleList.vue'라는 구성 요소를 만듭니다.

<!-- src/components/ArticleList.vue -->
<template>
  <v-container>
    <v-row justify="center">
      <v-col cols="12" md="8">
        <v-list>
          <v-list-item
            v-for="article in articles"
            :key="article.id"
            @click="viewArticle(article.id)"
          >
            <v-list-item-content>
              <v-list-item-title>{{ article.title }}</v-list-item-title>
              <v-list-item-subtitle>{{ article.createdAt.toDate().toLocaleString() }}</v-list-item-subtitle>
            </v-list-item-content>
          </v-list-item>
        </v-list>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
import { db } from "../firebase"; // Import Firestore instance
import { collection, query, getDocs, orderBy } from "firebase/firestore"; // Firestore functions

export default {
  data() {
    return {
      articles: [],
    };
  },
  async created() {
    const q = query(collection(db, "posts"), orderBy("createdAt", "desc"));
    const querySnapshot = await getDocs(q);
    this.articles = querySnapshot.docs.map((doc) => ({
      id: doc.id,
      ...doc.data(),
    }));
  },
  methods: {
    viewArticle(articleId) {
      this.$router.push({ name: "ArticleDetail", params: { id: articleId } });
    },
  },
};
</script>

3. Create a Vue Component for the Article Detail View

3. 기사 세부 정보 보기를 위한 Vue 구성 요소 만들기

Create a component named ArticleDetail.vue to display detailed information about a selected article.
선택한 기사에 대한 자세한 정보를 표시하려면 'ArticleDetail.vue'라는 구성 요소를 만듭니다.

<!-- src/components/ArticleDetail.vue -->
<template>
  <v-container>
    <v-row justify="center">
      <v-col cols="12" md="8">
        <v-card>
          <v-card-title>{{ article.title }}</v-card-title>
          <v-card-text>
            <p>{{ article.content }}</p>
            <small>Posted on: {{ article.createdAt.toDate().toLocaleString() }}</small>
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
import { db } from "../firebase"; // Import Firestore instance
import { doc, getDoc } from "firebase/firestore"; // Firestore functions

export default {
  data() {
    return {
      article: null,
    };
  },
  async created() {
    const docRef = doc(db, "posts", this.$route.params.id);
    const docSnap = await getDoc(docRef);

    if (docSnap.exists()) {
      this.article = docSnap.data();
    } else {
      console.error("No such document!");
    }
  },
};
</script>

4. Set Up Vue Router to Handle Navigation

4. 탐색을 처리하도록 Vue 라우터 설정

Set up the router to handle navigation between the article list and the detail view.
기사 목록과 세부정보 보기 간의 탐색을 처리하도록 라우터를 설정합니다.

Update your router/index.js file to include routes for ArticleList and ArticleDetail.
ArticleList 및 ArticleDetail에 대한 경로를 포함하도록 router/index.js 파일을 업데이트하세요.

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import ArticleList from '../components/ArticleList.vue';
import ArticleDetail from '../components/ArticleDetail.vue';

const routes = [
  {
    path: '/',
    name: 'ArticleList',
    component: ArticleList,
  },
  {
    path: '/article/:id',
    name: 'ArticleDetail',
    component: ArticleDetail,
    props: true,
  },
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

export default router;

5. Include Components in the Main App

5. 기본 앱에 구성요소 포함

Ensure the components are included in your main application file App.vue.
기본 애플리케이션 파일 App.vue에 구성 요소가 포함되어 있는지 확인하세요.

<!-- src/App.vue -->
<template>
  <v-app>
    <router-view />
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

6. Install and Set Up Vuetify

6. Vuetify 설치 및 설정

If Vuetify is not set up in your project, install it:
프로젝트에 Vuetify가 설정되어 있지 않으면 설치하십시오.

npm install vuetify

Set up Vuetify in your main.js file:
main.js 파일에 Vuetify를 설정하세요.

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import { createVuetify } from 'vuetify';
import 'vuetify/dist/vuetify.min.css';

const vuetify = createVuetify();

createApp(App).use(router).use(vuetify).mount('#app');

Summary 요약

In this guide, we created a Vue.js application using Vuetify to display saved articles from Firestore in a list format. When a user selects an article, the application navigates to a detailed view of that article. This setup involves setting up Vue Router for navigation, using Firestore for data storage and retrieval, and Vuetify for UI components.

이 가이드에서는 Vuetify를 사용하여 Firestore에서 저장된 기사를 목록 형식으로 표시하는 Vue.js 애플리케이션을 만들었습니다. 사용자가 기사를 선택하면 애플리케이션은 해당 기사의 상세 보기로 이동합니다. 이 설정에는 탐색을 위한 Vue 라우터 설정, 데이터 저장 및 검색을 위한 Firestore 사용, UI 구성요소용 Vuetify가 포함됩니다.

profile
그랜파 개발자
ChatGPT와 함께 Vue PWA을 공부합니다.
이전 포스트

Vue PWA myLog - 페이지 접근 제한

다음 포스트

Vue PWA myLog - mylog 쓰기

0개의 댓글