[ Nomad coders ] (의식의 흐름으로 쓰는) twitter clone 타입스크립트로 다시 만들어보기 2

 

 

 

#2.3 ~ #2.6

 

 

볼품없는 진도.

 

 

원래는 ts를 사용하는 것 이외에도 새로 배운 것들을 이용해서 구현하려고 했지만

ts도 벅차다..

기본형 ts를 제대로 배우지 않고 react에 적용시키는 연습을 하고 있어서 그런지 아주 기본적인 부분에서 턱턱 막힐 때마다 ts를 제대로 배워야겠다는 의욕이 샘솟는다.

아마 다음주부터 시작하지 않을까.

 

 

💻

 

 

 

 

 

firebase로 로그인을 구현하는 부분 뿐이어서 그런지

대단한 문제는 생기지 않았다.

 

따라서 이번에 작성할 내용은 다양하게 직면한 문제들이 아니라

firebase를 이용해서 진행한 다른 강의의 내용 일부와

twitter 클론 코딩 강의 내용 중 일부를 비교하는 내용이 될 예정이다.

 

 

1. 비교하려고 생각한 이유

react 공부를 시작할 때

twitter 강의를 듣고 드림코딩 엘리님의 react 강의를 들었다.

당시에는 몰랐지만 오늘 twitter 강의를 다시 들으면서 두 강의가 firebase를 이용하는 데 미세한 차이가 있다는 것을 알게 되었다.

 

 

큰 차이를 말하자면

일단 드림코딩 강의는 로그인하는 모든 함수를 한 파일(AuthService)로 만들어 집어넣고

필요할 때 마다 (AuthService) 파일에서 꺼내오는 형식으로 이용했다.

 

노마드코더는 알다시피 로그인 하는 컴포넌트에서 로그인과 관련된 함수들을 넣어 사용했다. 

단, authStateChange는 App에서 다뤄 App안에 있는 Router을 통해 인증 상태에 따라 다른 path로 가게 만들었다.

 

 

조금 더 큰 서비스를 만들고 이용해야 할 때는 드림코딩의 방식이 더 보기 편할 것 같다는 생각이 들었다.

서비스를 제공하는 데 쓰이는 모든 함수들이 한 곳에 모여 있으니 문제가 발생하더라도 점검하기 쉬울 것 같다.

(하지만 어려웠다..)

 

 

이런 차이를 제외하고,

내가 작성하고자 한 차이는

이 부분이다

 

노마드코더

function App() {
  const [init, setInit] = useState(false);
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  useEffect(() => {
    onAuthStateChanged(authService, (user) => {
      if (user) {
        setIsLoggedIn(true);
      } else {
        setIsLoggedIn(false);
      }
      setInit(true);
    });
  }, []);

  return (
    <> {init ? <AppRouter isLoggedIn={isLoggedIn} /> : "Initializing..."}</>
  );
}

 

노마드코더에서는 init, setInit이라는 useState를 활용했다.

 

useEffect를 통해 처음 로드될 때 user의 인증 상태를 확인한다(onAuthStateChanged)

만약 user가 있으면, isLoggedIn을 true로, 없으면 isLoggedIn을 false로 설정한다.

 

그 후 init을 true로 바꾼다.

init은 true일 때 appRouter에 isLoggedIn의 boolean값을 전달하고

        false일 때 "Initializing..."을 화면에 찍어낸다.

 

여기서 init

firebase가 처음에 initializeApp을 했는지(true) 확인하는 도구로 이용된다.

누군가 createaccount를 클릭하거나, 로그인하거나, 진작 로그인되어있어서 firebase가 스스로 초기화하는 것을 끝낸지 확인하는 것이다. 

로그인을 했는지 안했는지(유저가 존재하는지 아닌지) 검사 : setIsLoggedIn

로그인을 했는지 안했는지(유저가 존재하는지 아닌지) 검사를 했는지 검사 : setInit

이 되는 것이다.

 

 

만약 init을 사용하지 않고 바로 

  return (
    <>
      <AppRouter isLoggedIn={isLoggedIn} />
    </>
  );

이렇게 진행해도 로그인 여부에 따라 이동은 가능하다

하지만

로그인 이후 home이나 profile에서 f5를 누르게 되면 Auth페이지가 잠깐 등장한다.

이유 : isLoggedIn의 기본값이 false이기 때문에, firebase에서 user을 확인하고 isLoggedIn = true를 찍기 전까지는 false.

 

const AppRouter = ({ isLoggedIn }: AppRouterProps) => {
  console.log(isLoggedIn);
  return (
    <HashRouter>
      {isLoggedIn && <Navigation />}
      <Routes>
        {isLoggedIn ? (
          <>
            <Route path="/" element={<Home />} />
            <Route path="/profile" element={<Profile />} />
          </>
        ) : (
          <Route path="/" element={<Auth />} />
        )}
      </Routes>
    </HashRouter>
  );
};

여기서 isLoggedIn이 false라면 > Auth가 나온다는 것을 확인할 수 있다.

 

그러면 이제 이해가 된다.

노마드코더에서 init을 사용한 이유는

firebase가 init하기 전 그 짧은 시간동안 auth페이지가 노출되는 상황을 막기 위함.

 

 

 

 

 

 

 

 

드림코딩

const Login = ({ authService }) => {
  const navigate = useNavigate();
  const goToMaker = (userId) => {
    navigate("/maker", { state: { id: userId } });
  };
  const onLogin = (event) => {
    authService.login(event.currentTarget.textContent).then((data) => {
      goToMaker(data.user.uid);
    });
  };

  useEffect(() => {
    authService //
      .onAuthChange((user) => {
        user && goToMaker(user.uid);
      });
  });

Login컴포넌트에서

useEffect로 authService(로그인과 관련된 함수를 모아놓은 컴포넌트)의 onAuthChange라는 함수를 가져온다.

그 후 user의 유무를 확인한 다음 (.onAuthChange 함수는 onAuthStateChanged를 판별하는 함수.)

user가 존재하면 goToMaker이라는 함수를 이용해 '/maker'로 유저를 보낸다.

당연히, user가 존재하지 않으면 보내지 않는다.

 

여기서는 user존재를 검사했는지를 또 검사할 필요가 없다.

그냥 user가 없을 경우 Login 페이지를 보여주고(현재 위치에 있고)

user가 있을 경우 /maker을 보여준다.

 

function App({ FileInput, authService, cardRepository }) {
  return (
    <div className={styles.app}>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Login authService={authService} />} />
          <Route
            path="/maker"
            element={
              <Maker
                FileInput={FileInput}
                authService={authService}
                cardRepository={cardRepository}
              />
            }
          />
        </Routes>
      </BrowserRouter>
    </div>
  );
}

 

만약 이 App 페이지에서 user유무를 검사하고

user 유무에 따라 보여지는 Route를 다르게 구성했다면

ex)

user가 false라면 path ="/"로

user가 true라면 path ="/maker"로

노마드코더처럼 firebase가 init되었는지 확인이 필요했을 것이다.

 

 

 

 

 

결론 

상황에 따라서 firebase의 initialize를 관찰해야 할 때도 있고

아닐 때도 있다.