Using FireBase Auth // 20210308

nomadcoder 보고 공부하기

2.0 Using Firebase Auth

1. Router에서 state 지우는 이유

• Router에 있던 state를 지우자

  const [isLoggedIn, setIsLoggedIn ] = useState(true);

• 왜 지우느냐?
• Router는 라우터로서의 역할만을 해야 함. 페이지에서 state를 정의하지 않고 다른 페이지로 라우팅 하는 역할
• App.js에서 상태값을 props로 전달받아야 함.
• App.js에서 state값 재정의

function App() {
  const [isLoggedIn, setIsLoggedIn ] = useState(true); // router에서 가져온 state
  return(
  <>
    <AppRouter isLoggedIn={isLoggedIn} /> //props로 router에 state값 전달
    <footer>&copy; {new Date().getFullYear()} testie</footer>
  </>  
  );
};

2. 상대경로, 절대경로

• 보통 파일을 import 하기 위해서 상대 경로를 사용하는 경우가 많음.

import SomeComponent from '../../../../someDirectory/component'

• 이런 경우가 자주 있진 않겠지만 이거 뭐 어디 폴더에서 가져온건지도 모르겠고 저 폴더 찾는데만 드는 소요를 생각하면 치가 떨린다.
• 그리고 파일을 옮길 경우 상대경로이기 때문에 path가 달라져서 import 오류가 반드시 발생함.
• 절대경로로 설정을 바꾸어주면 아래와 같이 간결하게 코드작성 가능

import SomeComponent from '@/components/some/what/someDirectory/component'

• 바꾸는 방법은?
• jsconfig.json 또는 tsconfig.json (없으면 새로 생성)에 속성 추가하기

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "includes": ["src"]
}

3. firebase auth 이용하기

• auth 기능 이용 전 import는 필수

  ///myBase.js
  import "firebase.auth";
  
  const firebaseConfig //키값
  
  firebase.initializeApp(firebaseConfig);
  export const authService = firebase.auth(); // auth 호출

  이후 공식문서 참고 또는 authService. 뒤에 나오는 추가기능 호출해서 사용하면 된다.
  https://firebase.google.com/docs/reference/js/firebase.auth.Auth?authuser=0 아래는 auth currentUser 사용 예. 회원의 로그인 여부를 확인해야하기 때문에 currentUser를 사용.

  function App() {
   const [isLoggedIn, setIsLoggedIn ] = useState(authService.currentUser);
   return(
   <>
     <AppRouter isLoggedIn={isLoggedIn} />
     <footer>&copy; {new Date().getFullYear()} testie</footer>
   </>  
   );
  }; 

  authService.currentUser 를 통해 useState는 사용자의 로그인 여부를 user 또는 null로 반환받게 되었음!