[ 리팩토링 ] Auth_service 관련 동작 분리하기 + 컴포넌트 결합하기

0. 현재 상태

유저를 로그인하거나 로그아웃하거나, 유저의 존재를 확인하는 모든 함수들이 각 컴포넌트마다 뿔뿔이 흩어져있다.
중복되는 코드도 많아지고 비효율적이라 리팩토링을 다짐
하지만 어렵다...
알려줘...

아무튼 시작

✍ AuthService.tsx으로 로직 관리하기

AuthService.js
유저의 존재를 확인할 수 있는 class를 만들어 유저 관련 함수를 집어넣었다.

logout할 때마다 Calendar.tsx파일에서 에러가 발생했다

Uncaught FirebaseError: Function collection() cannot be called with an empty path.

firebase에 저장된 일정 정보를 가져올 때 사용하는 collection함수는 empty path에서 사용할 수 없다는 내용이다.

❓ 왜 empty path인가

  // firebase
  const progressRef = collection(fStore, `${uid}`); // ✨ progressRef


  // download firestore
  const downloadFStore = async () => {
    onSnapshot(query(progressRef), (querySnapshot) => { //✨ progressRef
      const afterData: any = [];
      querySnapshot.forEach((doc) => {
        if (doc.data().calendarEvent !== undefined) {
          doc.data().calendarEvent.forEach((bF: any) => {
            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!,
            });
          });
        }
        setCalendarEvents([...afterData]);
      });
    });
  };

  useEffect(() => {
    if (uid !== "") {
      downloadFStore();
    }
  }, []);

더러운 코드를 보여주지 않을 수 없다.
이 progressRef에서 문제가 발생한다.

내가 생각한 해결 방법은 두 가지다

유저가 로그아웃한 동시에 == uid가 비는 동시에 progressRef가 쓰이기 전 Login페이지로 탈출한다
유저가 로그아웃했다면 progressRef를 작동하지 않게 만들고 Login 페이지로 탈출한다.

console을 찍어보면서 문제를 조금 더 분석해보려고 하는데 생각지도 못한 점이 드러났다
Calendar.tsx에는 로그아웃을 했을 때 Login.tsx로 이동하는 로직이 없다.
그러면 이 로직은 어디 있을까?
바로 AppHeader.tsx이다.
그냥 Header역할만 하는 것이 아니라 로그아웃을 하면 로그인 메뉴로 이동하는 로직이 여기 들어있었던 것

따라서, 내가 확인한 결과 순서는 다음과 같다.

AppHeader.tsx의 버튼을 눌러서 로그아웃을 진행하면
App.tsx에서 AuthService의 로직을 받아서 유저의 존재를 판단한다 => 유저가 없다는것이 드러남
Calendar.tsx에서 유저의 존재를 확인하면 아무것도 나오지 않는다 => 오류 발생!😣
AppHeader.tsx에서 로그아웃이 완료된다

이런 어이없는 일이 발생하고 있었다.
구조에 대해 아무 고민 없이 코딩을 하면 이렇게 된다는 사실을 다시 뼈저리게 깨달았다.

1. 새로운 문제

위 문제를 해결하기 위해서 열심히 코드를 뒤지다가 새로운 문제를 발견했다.
Calendar.tsx에서 문제가 발생하는 이유는 MyPage에서 해결할 수 있는 내용이 아니었다.

현재 모습을 보면
routes 폴더 안에 들어있는 MyPage.tsx라는 파일 안에서
AppNavbar.tsx를 import해서 사용하는데
또 이 AppNavbar.tsx는 Navbar의 버튼을 누르면 각각 Calendar, Project, ToDo화면이MYPage 하단 60%정도 바뀌며 그려지는..

이런 코드다

일단 코드를 조금 정리하고 이 Mypage라는 파트를 관장하는 페이지에 각각의 컴포넌트를 집어넣는식으로 다시 만들어야 할 것 같다.

💦 고민

ToDo와 Calendar, Project 각각의 컴포넌트는 <Route path="/mypage/*" element={<MyPage />} />에 의해 라우팅되는 것들인데.. 이걸 component에 넣는 것이 맞을까?
현재 가지고 있는 지식으로는 routes 안에 새로운 폴더를 만들어서 다루는 것이 낫다는 생각이 들었다.

일단 MainPage.tsx를 만들었다.
여기에 기존에 MyPage를 구성하던 것들을 넣어서
MainPage.tsx 안에 들어가는 것들은 컴포넌트로 만들고, MainPage 자체에서 로직을 관리하도록 만들 것이다
컴포넌트 간 의존성도 적어지고 로직들을 한번에 관리할 수 있어 이 방법을 선택했다.

🏃‍♀️ 컴포넌트 결합하기

MainPage.tsx에

 return (
    <>
      <MyPage />
      <AppNavbar />
    </>
  );

MyPage 컴포넌트와 AppNavbar 컴포넌트를 넣어주었다.
AppNavbar.tsx는 안에

      <Routes>
        <Route path="calendar" element={<Calendar uid={userI.uid} />} />
        <Route path="todo" element={<ToDo uid={userI.uid} />} />
        <Route path="project" element={<Project />} />
      </Routes>

이런 Routes를 가지고 AppNavbar 내부의 버튼에 따라 다른 경로의 컴포넌트를 보여준다,
이 로직을 밖으로 빼는 것이 좋을 것 같다.
하지만 지금은 MainPage 컴포넌트에 MyPage 컴포넌트와 AppNavbar 컴포넌트를 넣는 것에 집중할 것

🏃‍♀️ MainPage에 MyPage와 AppNavbar component 넣기

1
날씨를 관리하는 로직 MyPage => MainPage로 옮기기

2
MainPage 안에 MainTop / MainBottom / MainNavbar 넣고 MainBottom 안에는 세 component를 routes를 활용해 보여주게 만들었다.

  return (
    <>
      <AppHeader />
      <MyPage isLoading={isLoading} data={data} />
      <AppNavbar />
    </>
  );

MainPage 컴포넌트 return문의 모습

'🤸‍♀️ 내 프로젝트 > pilzagenda' 카테고리의 다른 글

[ 리팩토링 ] firebase upload / download 로직 분리하기 (0)	2022.06.24