#1 SETUP
#1.1 Securing the Keys
- .env 파일 만들어서 환경변수 따로 설정
- 무조건 REACT_APP_'KEY' 형태
- gitignore에 .env 파일 추가 (key들을 github에 보이기 싫어서 정리한 것이라고 생각)
- 사용자들은 볼 수 있지만 그냥 github에서 key들이 보이지 않도록 정리한 것이다.
#1.2 Router SetUp
- 라우팅: 다른 주소에 따라 다른 뷰를 보여주는 것
리액트 자체에는 라우팅 기능이 내장되어있지 않기 때문에 직접 브라우저의 API를 사용하고
상태를 설정하여 다른 뷰를 보여주어야 한다.
- 인증(로그인) 여부에 따라 render시킬 routes가 달라지게 하자.
→ LogIn 되어 있으면 Home / LogIn 안되어 있으면 Auth
- Fragment: 여러 elements render하고 싶을 때 사용(부모 요소가 없을 때)
- <Switch></Switch>: 한 번에 하나의 Route만 볼 수 있게 해준다.
#2 Authentication
#2.0 Using Firebase Auth
- Router는 하나의 역할, 보여주는 역할만 하는 것이 좋기 때문에 Router에 있던 useState를
App.js로 옮긴다.
- <footer></footer>
→ HTML <footer> 태그는 특정 section의 footer를 정의할 때 사용
→ <footer> 태그 내에는 다음과 같은 정보를 기입
- 저자 정보
- 저작권 정보
- 연락처
- 사이트맵(sitemap)
- 페이지 맨 위로 돌아갈 수 있는 Top 버튼
- 연관 페이지 등
- user를 가져와서 로그인 여부를 판단하도록 하는 것이 강의에서 auth 기능을 쓰는 목적
→ currentUser() 사용
- authService.currentUser를 isLoggedIn useState의 value값으로 준다.
→ useState는 user의 로그인 여부를 알 수 있게 된다.
#2.1 Login Form part One
- 두 개의 다른 onChange function을 만들지 않고 하나의 onChage function을 만들고
name값에 따라 email과 password의 value 설정.
- input 변경 → onChange function 호출 → 입력한 input값들 state에 저장
(name값에 따라 email 또는 password 값 설정)
#2.3 Creating Account
1) createUserWithEmailAndPassword
- 이메일과 패스워드로 연결된 새로운 사용자 계정 만들기
- 사용자 계정을 성공적으로 만들면, 이 사용자는 어플리케이션에 로그인된다.
- Log In 버튼의 value값을 newAccount값이 true면 Create Account,
false면 Log In으로 설정.
- onSubmit function에서 newAccount일 경우 create Account를 수행하고
그렇지 않을 경우 Log In을 수행한다.
2) signInWithEmailAndPassword
- 이메일과 패스워드로 로그인하기
》 persistence: 사용자들을 어떻게 기억할 것인지
1) local(default값): 브라우저를 닫아도 사용자 정보 기억
2) session: 탭이 열려있는 동안 사용자 정보 기억
3) none: 사용자를 기억하지 않는다. 페이지 새로고침 시 로그아웃
#2.4 Log In
- const [init, setInit] =useState(false);
→ firebase가 프로그램을 초기화하길 기다린다.
- onAuthStateChanged(): 사용자의 로그인 상태의 변화를 관찰하는 관찰자를 추가.
즉, onAuthStateChanged()는 event listener이고 유저의 상태가 변경되면
그 변화를 알아차린다.
→ user의 상태가 변경되면 isLoggedIn값을 true로 set하고 Init값을 true로 set
- error handling
ex) 이미 존재하는 계정과 같은 이메일로 계정을 생성하려 하면 오류 발생/6자리 미만으로
비밀번호 설정하려 하면 오류 발생
→ const [error, setError] = useState('');
onSubmit의 try catch 구문 사용해 오류 발생 시 setError(error.message);
error값을 error.message로 설정.
submit 버튼 다음에 {error} 추가해 오류 발생 시 error값, 즉 오류 메시지가
화면에 출력되도록 설정.
#2.5 Social Login
- Continue with Google과 Continue with Github버튼 클릭 시 onSocialClick function 실행
→ popup창 → provider 생성, signInWithPopup() 실행
#2.6 Log Out
- 로그인했을 때 "Home으로 가기"와 "내 프로필로 가기"가 있는 navigation을 만든다.
- Navigation.js에서 <Link></Link>를 이용해 "Home"을 클릭하면 "/"으로,
"My Profile"을 클릭하면 "/profile"로 가도록 설정
- Profile.js에 LogOut 버튼 만들고 클릭 시 authService.signOut() 실행
→ 여기까지 하면 Log Out 버튼 클릭 시 로그아웃은 되지만 그대로 Profile 화면에 있게 된다.
→ 로그아웃되면 Home 화면으로 돌아가게 하자.
1) Redirection 이용
<Redirect from="*" to="/" />
→ "/"이 아닌 다른 모든 route로 가게 되면 "/", 즉 Home으로 redirect 된다.
2) Hook 이용 (useHistory)
onLogOutClick에 history.push("/");
→ 로그아웃된 후 "/", 즉 Home으로 돌아간다.
Twitter Clone Coding - Nomad Coders
https://nomadcoders.co/nwitter/lobby
Watch Now - 노마드 코더 Nomad Coders
nomadcoders.co
