Vue로 PWA 개발, 프론트엔드 공부 my-pwa-app의 회원 정보 로드

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

 

로그인을 하면 회원 정보를 로드하여 state 상태 변수 profile에 저장 합니다.

물론 아직 회원 정보를 저장하지 않았다면 profile에는 정보가 없습니다.
계정 설정 페이지가 열릴 때 이 profile을 사용하여 화면에 데이터를 나타냅니다.
우리는 다양한 방법으로 로그인하는 것을 가정하고 profiles 컬렉션의 profile 문서에 uids 배열 항목을 만들었습니다.

이 uids에 로그인한 uid를 포함한 회원 정보를 로드합니다.

 

ChatGPT에게 물었습니다.

uids에 uid가 포함된 문서를 로드하고 싶어

ChatGPT

Firestore에서 uids 배열에 특정 uid가 포함된 문서를 로드하려면 array-contains 쿼리를 사용할 수 있습니다.

아래는 Vue와 Firestore를 사용하여 해당 작업을 수행하는 예제를 보여드립니다.

1. Firestore 쿼리 예제

Firestore의 array-contains는 배열 필드에서 특정 값을 가진 문서를 검색할 때 사용됩니다.
예를 들어, uids 배열에 12345가 포함된 문서를 가져옵니다.

2. 코드 구현

LoadUsers.vue

<template>
  <v-container>
    <v-text-field
      label="Enter UID to Search"
      v-model="searchUid"
    ></v-text-field>

    <v-btn color="primary" class="mt-3" @click="fetchUsers">
      Search
    </v-btn>

    <v-list>
      <v-list-item
        v-for="user in users"
        :key="user.id"
      >
        <v-list-item-content>
          <v-list-item-title>{{ user.name }}</v-list-item-title>
          <v-list-item-subtitle>{{ user.email }}</v-list-item-subtitle>
        </v-list-item-content>
      </v-list-item>
    </v-list>
  </v-container>
</template>

<script>
import { db } from "../firebase";
import { collection, query, where, getDocs } from "firebase/firestore";

export default {
  data() {
    return {
      searchUid: "", // 검색할 UID
      users: [], // 로드된 사용자 데이터
    };
  },
  methods: {
    async fetchUsers() {
      if (!this.searchUid) {
        alert("Please enter a UID.");
        return;
      }

      try {
        // Firestore에서 'uids' 배열에 UID가 포함된 문서 검색
        const q = query(
          collection(db, "users"),
          where("uids", "array-contains", this.searchUid)
        );

        const querySnapshot = await getDocs(q);

        // 결과를 users 배열에 저장
        this.users = querySnapshot.docs.map((doc) => ({
          id: doc.id,
          ...doc.data(),
        }));

        if (this.users.length === 0) {
          alert("No users found for this UID.");
        }
      } catch (error) {
        console.error("Error fetching users: ", error);
        alert("Failed to fetch users. Please try again.");
      }
    },
  },
};
</script>

3. 구현 설명

1. searchUid

• 사용자가 검색할 UID를 입력합니다.

2. fetchUsers 메서드

• Firestore에서 uids 배열에 특정 UID를 포함하는 문서를 가져옵니다.
• array-contains 필터를 사용합니다.

3. Firestore 쿼리

const q = query(
  collection(db, "users"),
  where("uids", "array-contains", this.searchUid)
);

4. 검색 결과

• 쿼리 결과를 users 배열에 저장하고, 결과를 화면에 표시합니다.
• 문서의 id와 데이터를 함께 가져와 활용합니다.

5. Vuetify로 결과 표시

• 검색 결과를 Vuetify의 v-list로 깔끔하게 렌더링합니다.

Firestore 데이터 예제

users 컬렉션에 다음과 같은 문서가 있다고 가정합니다:

email	name	blogName	aboutMe	createdAt	uids
user1@test.com	Alice	Alice's Blog	Hello	2024-01-01	["12345", "67890"]
user2@test.com	Bob	Bob's Journey	Hi there	2024-01-02	["67890"]

• 검색 UID: 12345
• 결과:
  • Alice (user1@test.com)

확장 가능성

1. UID 검색 필드 개선
   • 검색 필드를 v-select로 변경하여 기존 UIDs 목록을 드롭다운에서 선택하도록 만들 수 있습니다.
2. 결과 페이지네이션
   • Firestore의 startAfter 또는 limit 쿼리를 사용해 결과를 페이지별로 나눌 수 있습니다.
3. 실시간 업데이트
   • Firestore의 onSnapshot을 사용해 실시간 데이터 업데이트를 반영할 수 있습니다.

위 코드와 설명을 참고하여 uids 배열 필드 기반의 검색 기능을 구현해 보세요. 추가 질문이 있으면 언제든 알려주세요! 😊

 

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