[ 리팩토링 ] firebase upload / download 로직 분리하기

 

 

0. 현재 상태

firebase 로직이 모든 페이지에 따로따로 존재하는 상태.
ToDo를 관리하는 페이지에서도 firebase에서 로직을 받고 / 업로드하고
Calendar... Project 컴포넌트에서도 동일하다.

이 로직을 AuthService처럼 하나로 묶게 되면 유지보수하기 쉽지 않을까?

 

 

✍ FireStore.ts로 로직 관리하기

 

📌 FireStore.ts

  downloadData(progressRef: any) {
    onSnapshot(progressRef, (querySnapshot: any) => {
      querySnapshot.forEach(async (doc: any) => {
        if (doc.data().goals) {
          console.log(doc.data().goals);
          return await doc.data().goals;
        }
      });
    });
  }

다운로드 시 작동되는 함수를 이렇게 작성했는데 promise가 return된다.
비동기에 대한 얕은 이해가 문제인 것 같다.

 

ToDo.tsx

downloadData를

  downloadData(progressRef: any, getData: any) {
    onSnapshot(progressRef, (querySnapshot: any) => {
      querySnapshot.forEach(async (doc: any) => {
        if (doc.data().goals) {
          getData(doc.data().goals);
        }
      });
    });
  }

이렇게 바꾸고,
ToDo.tsx에서

    fireStore.downloadData(progressRef, getData);

getData 함수

  const getData = (datas: any) => {
    if (datas) {
      setAtomGoals((prev) => [...datas]);
    }
  };

이렇게 함수를 전달해주었더니 원하는 결과를 만들 수 있었다.
하지만 아직 고민중인 것은
fireStore.ts에서 받아온 로직을 return문을 통해 가져온 후 처리를 하는 것이 좋은지,
아니면 내가 한 방법처럼 함수를 전달해서 결과를 받아와 바로 이용하는 것이 좋은지,
혹은 더 좋은 다른 방법이 있는지가 고민이다.
하지만 일단 축하~😣💖

 

Calendar.tsx

Calendar 부분도 download 로직을 변경해주었다.
일단, fireStore.tsx에서

 downloadData(progressRef: any, getData: any, positionName: string) {
    onSnapshot(progressRef, (querySnapshot: any) => {
      querySnapshot.forEach(async (doc: any) => {
        if (positionName === "calendarEvent" && doc.data().calendarEvent) {
          getData(doc.data().calendarEvent);
        }

        if (positionName === "goals" && doc.data().goals) {
          getData(doc.data().goals);
        }
      });
    });
  }

두 로직을 처리할 수 있게 하기 위해 positionName이 변경될 때에 따라서 calendarEvent, goals의 data를 각각 가져오게 했다.

원래 Calendar.tsx에 짜놓은 다운로드 로직은

  // download firestore
  const downloadFStore = async () => { // ✨ 1. fireBase에서 사용해야 하는 로직
    onSnapshot(query(progressRef), (querySnapshot) => {
      const afterData: any = []; // 📌 afterData 
      querySnapshot.forEach((doc) => { // ✨ 2. forEach로 data 계산하기
        if (doc.data().calendarEvent !== undefined) {
          doc.data().calendarEvent.forEach((bF: any) => {
            afterData.push({ // ✨ 3. afterData라는 배열에 계산한 값 넣기
              allDay: bF.allDay!,
              end: moment(bF.end?.seconds * 1000 - 1).format(
                "MMMM DD YYYY hh:mm:ss"
              ),
              start: moment(bF.start?.seconds * 1000).format(
                "MMMM DD YYYY hh:mm:ss"
              ),
              title: bF.title!,
            });
          });
        }
        setCalendarEvents([...afterData]); // ✨ 4. 배열을 useState 안에 넣기
      });
    });
  };

다음과 같다.

1. fireBase에서 요구하는 대로 로직을 짠 다음,
2. forEach를 통해 시간 관련 계산을 마친 객체로 만든다,
3. 이를 afterData라는 빈 배열에 넣고
4. 마지막으로 afterData라는 배열을 setCalendarEvents라는 useState 안에 넣어준다.
   한 함수에서 네 가지의 일을 하고 있다
5. fireBase와 직접 소통해야 하는 로직을 fireStore.ts로 옮긴다
6. 시간 관련 계산을 하는 함수를 따로 만들어서 이용한다

      fireStore.downloadData(progressRef, getData, "calendarEvent");

Calendar.tsx의 useEffect 안에 넣어 마운트 시 바로 시행되게 한다.

전체적으로 바뀐 코드

  const getData = (datas: any) => { // ✨ 1.datas를 받아서 결과 반환(setCalendarEvents)
    const afterData: any = [];
    if (datas) {
      datas.forEach((bF: any) => {
        calcDataToObj(afterData, bF);
      });
    }
    setCalendarEvents((prev) => [...afterData]);
  };

  const calcDataToObj = (afterData: any, bF: any) => { // ✨ 2.data를 넘겨받아 시간 계산하고 afterData에 결과 배열로 넣기
    afterData.push({
      allDay: bF.allDay!,
      end: moment(bF.end?.seconds * 1000 - 1).format("MMMM DD YYYY hh:mm:ss"),
      start: moment(bF.start?.seconds * 1000).format("MMMM DD YYYY hh:mm:ss"),
      title: bF.title!,
    });
  };

    useEffect(() => { // 📌 useEffect
    console.log(uid);
    if (uid !== "") {
      fireStore.downloadData(progressRef, getData, "calendarEvent"); // ✨ 1.fireStore.downloadData에 인자 보내기
    }
    return () => {
      console.log("언마운트");
    };
  }, [uid]);

이렇게 쪼개주었다.

 

 

아직 미완성이지만 언제까지나 임시저장에 둘 수 없어서 올린다

임시저장된 글을 하나하나 마저 써야겠다

임시저장에만 38개의 글이 있다😅