[1人 프로젝트] 트위터 클론코딩 2회차

🎉 성과

완성한 부분

소셜 로그인 기능 구현 완료

google, github, 회원가입 등 3가지 방법으로 로그인 구현 완료

 

useNavigate()를 활용하여 로그아웃 시 Home페이지로 리다이렉트

firebase 8 버전 이하는 Redirect를 사용했지만, 9 버전부터는 useNavigate()를 이용한다.

 

---

 

 

✨ 느낀 점

👍 알게 된 점

로그인 상태 유지하기

로그인을 하면 Home페이지로 가게 코드를 구현했는데 정상 작동하지 않았다. 그 이유는 firebase가 로딩되기 전에 코드가 실행되어서 이다. 따라서 firebase가 전부 로딩된 다음에 코드를 실행시켜주는 코드를 작성해야 한다. firebase에서 지원하는 onAuthStateChaged() 코드를 사용하면 된다.

import {onAuthStateChanged} from 'firebase'
.
.
.
useEffect(()=>{
	onAuthStateChanged(authService, (user)=> {
    	if(user) {
        	setLoggin(true)
        } else {
        	setLoggin(false)
        }
    })
}, [])

 

이메일로 회원 가입하기

promise를 사용한다.

promise의 async와 await를 사용한다. promise는 한마디로 강제로 순서대로 진행되게 해 준다. 위의 코드를 해석하면 만약 newAccount가 참이면 createUserWithEmailAndPassword함수를 실행하고 완료될 때까지 대기한다라는 뜻으로 해석하면 될 거 같다. 

 

소셜 로그인 기능 구현하기

firebase/auth로부터 구글과 깃허브 그리고 로그인 팝업창을 import 한다. 그리고 기존에 구현한 버튼에 name이라는 props를 지정하고, event로 해당 props를 얻어온다. 만약 name이 google이라면, provider라는 변수에 구글 인증 제공자를 생성하고, github라면 깃허브 인증 제공자를 생성한다. 그리고 provider를 이용해 팝업창을 띄워 로그인 기능을 구현한다.

 

로그아웃 기능과 로그아웃 시 Home페이지로 리다이렉트

Home페이지로 강제로 리다이렉트 하려면 react-router-dom에서 useNavigate를 import 해야 한다. 기존에 구현한 로그아웃 버튼에 onClick 이벤트 함수와 onLogOutClick함수를 연결시켜준다. 그리고 navigate변수에 useNavigate()를 넣고, 로그아웃 버튼을 클릭하면 signOut()으로 인해 로그아웃이 된다. 로그아웃이 되면 자동으로 Home페이지로 이동하지 않기 때문에 강제로 Home페이지로 이동시키기 위해 navigate('/')를 넣어주어 홈페이지로 이동시켜준다.