게시판 목록 화면

파이어베이스 데이터 경로

컬렉션 > 도큐멘트 > 필드

ui 화면

Form.tsx

import React, { useEffect, useState } from "react";

//파이어베이스 파일 연동
import { firestore } from "./firebase";

//파이어베이스 문법을 사용 하여 데이터 관리 위해 연동
import { collection, getDocs, query, orderBy } from "firebase/firestore";

Board Component

데이터 가져오기

const Board = () => {
  //게시판에 입력되는 타입
  interface UserdataType {
    index: string;
    title: string;
    content: string;
    timedata: Date;
  }

  //게시판 목록 데이터 가져오기 위해 설정한 state
  const [boardData, setBoardData] = useState<UserdataType[]>([]);

 
  //데이터 가져오기
  const dbData = async () => {
    try {
      
      //파이어베이스에서 컬렉션 불러오기
      const userCollectionRef = collection(firestore, "users");

      //불러온 컬렉션의 timedata로 정렬
      const queryOrder = await query(
        userCollectionRef,
        orderBy("timedata", "asc")
      );

      //파이어베이스 컬렉션에서 모든 문서 데이터 가져오기
      const querySnapshot = await getDocs(userCollectionRef);

      //새로운 배열을 생성해야 하는 상황이었기 때문에 map 메서드를 사용
      //forEach를 사용하면 변형된 데이터를 새로운 배열로 만들지 않고, 각 요소에 대해 어떤 작업을 수행할 수는 있지만 그 결과를 활용하기 어렵습니다.
      const newData = querySnapshot.docs.map((doc) => {
        const data = doc.data();
        return {
          index: data.index,
          title: data.title,
          content: data.content,

          //javaScript의 Date 객체로 변환합니다. 사용자 친화적인 형태로 날짜와 시간을 표시
          timedata: data.timedata.toDate(),
        };
      });
      
      //불러온 데이터 업데이트
      setBoardData(newData);
    } catch (error) {
      console.log("데이터를 가져오지 못했습니다.");
      console.log(error);
    }
  };

  //dbData함수 실행 하고 의존성이 빈배열로 한번 실행
  useEffect(() => {
    dbData();
  }, []);

  //게시물에서 보여지는 타입
  interface BoardItemi {
    index: number;
    title: string;
    timedata: Date;
  }

  //게시물 타입을 props로 받는 컴포넌트
  const BoardItem = (props: BoardItemi) => {
    // console.log(props.title);
    return (
      //받은 props를 연결
      <li>
        <div>{props.index}</div>
        <div>{props.title}</div>
        {/* Type 'Date' is not assignable to type 'ReactNode' 에러와 만남 */}
        <div>{props.timedata.toString()}</div>
      </li>
    );
  };

	return(...아래로);
}
export default Board;

에러
Type 'Date' is not assignable to type 'ReactNode'
'Date' 타입은 'ReactNode' 타입에 할당할 수 없습니다.

이렇게 작성하여 난 에러 글자타입으로 수정

return

 <>
      <div className="container">
        <div className="board_box">
          <div className="board_top">
            <ul>
              <li>
                <div>No.</div>
                <div>제목</div>
                <div>작성일</div>
              </li>
            </ul>
          </div>
          <div className="board_body">
            <ul>
               {/* 위에 선언했던 리스트 변수에 map 사용 */}
              {boardData.map((item, index) => (
                //map를 사용 하면 key는 필수인것 같다 없으면 에러 난다
                <BoardItem
                  key={index}
                  index={index}
                  title={item.title}
                  timedata={item.timedata}
                />
              ))}
            </ul>
          </div>
          //페이지 네이션은 아직 구현 안됨
          <div className="pagenation_box">
            <div className="pagenation">
              <ul>
                <li>이전</li>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>다음</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </>

추가로🦒

우선 작업 하면서 힘들었던 점은 기존에 만들었던 투두와 같은 파베 경로로 작업 하면서
컬렉션>도큐멘트>하위 컬렉션>필드 였고 모든 하위 컬렉션을 가져와서 데이터를 출력 하고 싶었는데 정말 다양하게 검색을 해봤는데 원하는걸 못찾았다
왜냐하면 하위 컬렉션은 유저의 uid로 랜덤하게 생성 되는 거기 때문에 찾아본것 중에 나온건

• collectionGroup()는 이름이 같은 하위 컬렉션의 데이터를 가져 오는 것
• listCollections() 사용한 예시를 못찾았다..
• Promise.all()

못찾고 나서 데이터를 어떻게 해야하나 고민 했는데 경로를 수정 했다
컬렉션>도큐멘트(유저별 uid가 도큐멘트 id가 됨)>필드 로 경로를 수정했다.

추가로2🦒

파이어베이스 문법 다른걸 사용 해야한다
확인해보니....ㅎㅎ후ㅜㅜㅜㅜㅜㅜ계속 하나의 도큐멘트의 값만 수정 한다
데이터가 여러개가 안쌓임 경로도 다시 지정 해야할거같다
유저별로 데이터가 다 출력 되게 만들고 싶은데 아직 거기까지 역량이 안된다 경로를 어떻게 지정해야할지 계속 찾아보는데 ㅜㅜ한 사람의 유저의 데이터만 나오록 수정 해야할 듯 하다

로그인 후 새로고침 하면 데이터가 사라지네..