[Next 고캠핑] 로컬 데이터 파이어베이스로 변경하기

 

 

 

 

 

 

 

 

캠핑장 좋아요 기능을 추가하기 위해서 로컬로 데이터를 불러왔던것을 firebase로 바꿨다.

오른쪽 상단 더보기를 눌러서 json 가져오기를 누르면 내 데이터가 잘 들어와진 것을 확인할 수 있다.

 

 

로컬로 불러오기

  // 데이터 불러오기
  useEffect(() => {
    async function fetchData(): Promise<void> {
      if (!query.region) return; // 지역 값이 유효할 때만

      setLoading(true);
      try {
        const response = await axios.get<IApiResponse>(
          `${API_URL}/basedList?serviceKey=${SERVICE_KEY}&numOfRows=3000&pageNo=1&MobileOS=AND&MobileApp=dayCamping&_type=json`,
        );
        const items = response.data.response?.body?.items.item || []; // 데이터 없을 경우 추가 수정
        // 지역 필터
        const filteredItems = items.filter((item) => {
          // 전체 지역일 경우
          if (query.region === "전체") {
            return true;
          }
          // 도는 선택 시는 전체
          if (query.region !== "전체" && query.subRegion === "전체") {
            return item.doNm === query.region;
          }
          // 도 선택 && 시 선택
          if (query.region !== "전체" && query.subRegion !== "전체") {
            return (
              item.doNm === query.region && item.sigunguNm === query.subRegion
            );
          }
          return false;
        });
        setTotalCount(filteredItems.length);
        const paginatedItems = filteredItems.slice(
          (currentPage - 1) * PER_PAGE,
          currentPage * PER_PAGE,
        );

        // 데이터 없을 때
        if (paginatedItems.length === 0) {
          setList([]);
        } else {
          setList(paginatedItems);
        }
      } catch (e) {
        console.error(e);
      }
      setLoading(false);
    }
    void fetchData();
  }, [query.region, SERVICE_KEY, currentPage]);

 

 

firebase로 불러오기

  const [campingData, loading] = useCampingData();

  // 데이터 불러오기
  useEffect(() => {
    if (!query.region || !campingData) return; // 지역 값이 유효할 때만

    // 로컬 api 삭제
    // 지역 필터
    const filteredItems = campingData.filter((item) => {
      // 전체 지역일 경우
      if (query.region === "전체") {
        return true;
      }
      // 도는 선택 시는 전체
      if (query.region !== "전체" && query.subRegion === "전체") {
        return item.doNm === query.region;
      }
      // 도 선택 && 시 선택
      if (query.region !== "전체" && query.subRegion !== "전체") {
        return item.doNm === query.region && item.sigunguNm === query.subRegion;
      }
      return false;
    });
    setTotalCount(filteredItems.length);
    const paginatedItems = filteredItems.slice(
      (currentPage - 1) * PER_PAGE,
      currentPage * PER_PAGE,
    );

    // 데이터 없을 때
    setList(paginatedItems.length > 0 ? paginatedItems : []);
  }, [query.region, campingData, currentPage]);

 

- 기존에 로컬로 불러올때는 api 주소를 가져와서 items를 선언하고 필터링 했다면

 useCampingData훅을 만들어서 파이어베이스에 있는 데이터를 가져와서 필터링을 한다.

 

 

 

useCampingData

import { type ICampingData } from "@/commons/type/commonType";
import { realtimeDb } from "@/firebase/firebase";
import { get, ref } from "firebase/database";
import { useEffect, useState } from "react";




export const useCampingData = (): [ICampingData[] | null, boolean] => {//캠핑 데이터, 로딩 을 반환해야하므로 타입을 명시해줬다.
  const [data, setData] = useState<ICampingData[] | null>(null);
  const [loading, setLoading] = useState<boolean>(true); //기본값이 로딩
  useEffect(() => {
    const fetchData = async () => {
      try {
        const dataRef = ref(realtimeDb, "response/body/items/item"); //내 realtimeDatabase 경로로 접근을 제공한다.
        const snapshot = await get(dataRef); // 참조된 경로의 데이터를 읽어오는 함수

        if (snapshot.exists()) { //snapshot이 존재하는지 확인하는 메서드
          const campingData = snapshot.val() as ICampingData[]; //데이터의 실제 값을 가져오는 메서드
          setData(campingData);
        } else {
          setData(null);
          console.log("no data");
        }
      } catch (error) {
        console.log(error);
      } finally {
        setLoading(false);//로딩 끝
      }
    };

    fetchData();
  }, []);

  return [data, loading];
};

realtimeDb는 getDatabase(app)으로 선언해준 것을 가져왔다.

 

firebase 공식문서나 다른 블로그들을 찾아봤지만 그것만으로 진행하기엔 어려움이 있어서 지피티의 도움을 받았다..

firebase 관련 노마드코더 강의가 있어서 참고를 많이 했다.

 

 

https://firebase.google.com/docs/database/web/read-and-write?hl=ko

https://nomadcoders.co/nwitter/lectures/4530