💎[Noitter]💎
2. 로그인 파일/컴포넌트 설계 및 구현

📂로그인 파일 구성

1. App.js

: 메인페이지 (로그인 유무 및 초기 계정인지 확인)
: state - isLoggedIn, init, useEffect()

2. Router.js

: 로그인 유무에 따른 페이지 라우팅
: component - <AppRouter />, <Routes>

3. Home.js

: 로그인이 확인되면 메인페이지(App.js)에 띄울 컴포넌트

4. Auth.js

: 로그인이 안된 상태에서 메인페이지(App.js)에 띄울 컴포넌트 (제일 처음 마주칠 페이지)
: state, function - email, password, newAccount, error, onChange(), onSubmit()
: firebase - createUserWithEmailAndPassword, signInWithEmailAndPassword

5. fbase.js

: firebase의 auth기능을 사용하기 위한 파일
: authService = firebase.auth()
→ authService로 다른 파일에서 firebase auth기능 호출 가능
: Auth.js에서 createUserWithEmailAndPassword, signInWithEmailAndPassword 을 사용하게 해줌

📝로그인 기능 구현

💻Source Code

💗소스코드 자세한 내용은 Github 참고💗

📚정리

1. Router.js 파일을 따로 만들어서 라우팅 관리하면 편함 ❗
2. firebase는 프론트엔드 필수 ❕ (백엔드 없이 서버 구현? 가능)
3. useEffect()사용함으로써, 메인페이지 접속 시 <AppRouter />로 접속 가능

👍🏻노마드 코더 무료강의 참고

https://nomadcoders.co/nwitter/lobby