💭 API 로직에 대한 고민

마이그레이션을 하면서 고민했던 사항 중 하나는 API 로직의 재사용 및 코드량 줄이기였다.

아래는 마이그레이션 전의 useEffect를 통해서 API 로직을 구현했던 코드이다.

useEffect(() => {
  const getUserTravelLists = async () => {
    const clearModalState = () => {
      return setModalState({
        state: false,
        title: "",
        context: "",
        buttonText: "",
        closeFunc: () => {},
      });
    };

    try {
      const listsArray: TravelListType[] = [];
      const user = firebaseAuth.currentUser;

      const getTravelListsByUsers = async (userUid: string) => {
        const docsState = await getDocs(
          collection(firestore, `travels`, userUid, "docs")
        );

        docsState.forEach((doc) => {
          const {
            travelType,
            title,
            departureAt,
            travelPeriod,
            destination,
            id,
          } = doc.data();
          listsArray.push({
            travelType,
            title,
            departureAt,
            travelPeriod,
            destination,
            id,
          });
        });

        return setTraveLists([...listsArray]);
      };

      if (user !== null) {
        return getTravelListsByUsers(user.uid);
      } else {
        return onAuthStateChanged(firebaseAuth, (user) => {
          if (user) {
            getTravelListsByUsers(user.uid);
          } else {
            return setModalState({
              state: true,
              title: "로그인 세션 만료",
              context: `장시간 사이트 내에 활동이 없어\\n로그인 상태가 해제되었습니다.`,
              buttonText: "로그인 화면으로 돌아가기",
              closeFunc: () => {
                clearModalState();
                return navigate("/users/signin");
              },
            });
          }
        });
      }
    } catch (error) {
      return setModalState({
        state: true,
        title: "데이터 받기 오류",
        context: `죄송합니다, 데이터를 받아오지 못했습니다.\\n새로고침을 시도하시거나 다시 로그인해주세요.`,
        buttonText: "알겠습니다.",
        closeFunc: () => {
          return clearModalState();
        },
      });
    }
  };

  getUserTravelLists();
}, [navigate]);

위의 코드를 보고 이 글을 읽는 사람은 어떤 생각이 들었는지 모르겠지만, 마이그레이션과 리팩토링을 진행하는 내 입장에서는 다음과 같은 생각이 들었다.

이 두 가지의 관점에서 보고 스스로에게 자문했을 때, 이 코드가 좋은 코드라고 생각되진 않았다.

언젠가 저 두 가지 관점을 가지고 리팩토링을 해야겠다고 생각했고, 때마침 이번에 마이그레이션을 진행하다보니, 다른 것들도 고치게 된 거 아예 이 부분도 전부 고쳐야겠다고 마음을 굳혔다.

❗ 그래서, 전회사에서 썼던 방식을 활용해보기로 했다.

월급 체불 중인 그 회사에서 일했을 당시, 웹 개발 코드를 보다가 놀랐던 몇 가지가 있었다. 그 중에서는 API와 관련한 로직을 class에서 관리하고, 이를 로직에 사용하는 방식이었다.

처음 보는 방식이라 신기하면서도, 쓰면 쓸수록 이 부분이 참 마음에 들었는데 그 이유는 다음과 같다.