1. 아래 코드는 Firebase 기반으로 user 정보 가져오고 Promise로 리턴해주는 함수인데


//auth_service.js

getUserInfo() {
  const auth = this.getAuthObj();

 
  return new Promise((resolve, reject) => {
    onAuthStateChanged(auth, (user) => {
      console.log(user)
      if(user) {
        console.log('state : definitely signed in')
        resolve(user);
      }else {
        console.log('state : definitely signed out')
        // reject();
        resolve(null)
      }
    })
  })

}



2. [ auth_service.js에서 리턴받은 Promise ]를 router.js에서 컴포넌트 Auth 체크하는데 사용할거임.


 
//router.js

const router = createBrowserRouter([
    {
      path: "/",
      element: Auth(<Main />), // <------------여기다 App을 하면 안 됨. ..  ★ App 컴포넌트(최상위) 내에서★ 렌더링 하는것이므로.
      children: [
        {
          path: "maker",
          element: <Maker />
        },
      ]
    },
    {
      path:"login",
      element: <Login authService={authService}/>
    }

  ]
  );
  const routerProvider= <RouterProvider router={router}/>

//------------------------------------------------------------------------------------------

   function Auth(Component, authCheck=false, ...rest) {

       
          getUserInfo().then(
            res => {
              return ( (res !== null) ? Component : <Navigate to="/login" /> )
            }
          )
   }
     
 




생략된게 좀 있긴한데 대충 이런식임.

Promise 안에 들어가는 then이 일단 콜백 구조라서 구조상 여기서 Component 리턴해주는게 바깥의 Auth 함수의 리턴으로 되지는 않는 것 같은데.

그럼 이 auth를 어떻게 써야할지 모르겠음.. ㅠㅠ

물론 Promise 굳이 안 쓰고 Context API 사용하고 안에 useState 사용하는 방법으로 구현하긴 했는데 좀 더 확실히 공부하고 싶어서 

Promise 사용하는 방법도 알고 싶음..



빡대갈이라서 죄송합니다.. ㅜㅜ

빡대갈이라서 죄송합니다.. ㅜㅜ