21.10.19 공부기록🧑‍💻

FireBase, React를 활용한 트위터 클론코딩🧑‍💻

---

오늘 완료한 목록
1. 로그인 구현기능
2. 소셜로그인 (Github, Google)
3. 로그아웃 기능

---

백엔드 파트를 파이어베이스를 활용했기 때문에 파이어베이스 사이트를 참고했다.
https://firebase.google.com/docs/auth/web/firebaseui?hl=ko

1. 로그인 기능

상태 업데이트를 위해 useState 함수를 이용했다.

    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");
    const [newAccount, setnewAccount] = useState(true);
    const [error, setError] = useState("");

로그인을 지속해주는 방법

파이어베이스에서 로그인을 지속하기 위해서는 setPersistence를 사용한다.
setPersistence는 local, session, none옵션을 갖고 있다.

• local : 웹 브라우저를 종료해도 로그인 유지
  Local 옵션은 웹 브라우저를 종료해도 로그인한 사용자의 정보를 기억하게 해준다.

• session : 웹 브라우저의 탭을 종료하면 로그아웃

• none : 새로고침하면 로그아웃

  하지만 기본값은 local로 되어 있으므로 따로 설정할 필요없이 진행했다.

2. 소셜 로그인

<div>
    <button name="Google" onClick ={onSocialClick} >Continue with Google</button>
    <button name="Github" onClick ={onSocialClick} >Continue with Github</button>
</div>

const onSocialClick =  async (event) =>{
     const {target:{name},
    } = event;
    let provider;
    if(name === "Google"){
        provider = new GoogleAuthProvider();
    }else if(name === "Github"){
        provider = new GoogleAuthProvider();
    }
    await signInWithPopup(auth, provider);
 };

먼저 구글과 깃허브 계정으로 로그인하기 위해 파이어베이스에서는

GoogleAuthProvider와 GithubAuthProvider를 이용한다.
또한 signInWithPopup함수가 비동기 작업이기 때문에 async-await문을 사용했다.
provider을 signInWithPopup 함수 인자로 넘겨 로그인을 사용했다.

결과

3. 로그아웃

로그아웃 기능을 버튼을 이용하여 하기 위해 네비게이션 컴포넌트를 만들었다.

const Navigation = () => 
<nav>
    <ul>
    <li>
        <Link to ="/">Home</Link>
    </li>
    <li>
        <Link to ="/profile">Profile</Link>
    </li>
    </ul>
 </nav>

Profile을 클릭하면 /profile로 이동하게 라우터에 추가했다.

const Profile = () => <span>Profile</span>

export default () => {
    const onLogOutClick = () => auth.signOut();
    return (
    <>
    <button onClick ={onLogOutClick}>Log out</button>
    </>
    );
};

import { auth } from 'fbase';

const Profile = () => <span>Profile</span>

export default () => {
    const onLogOutClick = () => auth.signOut();
    return (
    <>
    <button onClick ={onLogOutClick}>Log out</button>
    </>
    );
};

파이어베이스에서 로그아웃 기능을 사용하기 위해서는 signOut()함수를 사용해야한다.
그렇기 때문에 onLogoutClick 함수를 만들고, 버튼을 클릭하면 signOut함수가 발동되게 코드를 짰다.

하지만 로그아웃을 해도 여전히 Profile 사이트에 위치 했기 때문에,
Redirect를 배치했다.

const AppRouter = ({isLoggedIn}) =>{ //Router을 이미 정의했기 때문에 다른 이름으로 정의
    //상위 컴포넌트에서 받은 프롭스는 구조분해 할당으로 사용
   
    return( // switch를 이용하면 여러가지 라우트 중 하나만 렌더링하게 해줌.
        <Router>
            {isLoggedIn &&<Navigation />} 
            {/* && -> 로그인이 맞다면 Navigation => true*/}
            <Switch>  
                {isLoggedIn ?( // 로그인 상태 시
                <>
                    <Route exact path ="/">  
                        <Home />
                    </Route>  
                    <Route exact path ="/profile">  
                    <Profile />
                </Route>
                <Redirect from="*" to="/" />
                </> 
                ) : ( // 비로그인 상태 시
                    <>
                    <Route exact path ="/"> 
                        <Auth />
                    </Route>   
                    <Redirect from="*" to="/" />
                    </>
                )}
            </Switch>
        </Router>
    )
}

자세히 설명하자면 switch를 이용하여 한 가지 라우트만 렌더링하게 해주는데,
isLoggedIn의 상태를 보고 로그인이 유무를 판단하고 그 결과에 따른 라우트를 렌더링하게 해줬다.
그런데 로그아웃이 되면 isLoggedIn이 false로 바뀌기 때문에
false로 분기하는 라우트가 동작해야하지만, exact path ="/"는 정확히 주소가 "/"인 경우에만 해당되기 때문에, 로그아웃 버튼을 사용한 후인 주소가 "/profile"이기 때문에, Route가 동작하지 않고
Redirect가 동작하여 메인화면으로 이동하게 해준다.

참고링크
https://reactrouter.com/web/api/Redirect

느낀 점

사실은 이번 연초부터 블로그 활동을 하면서 공부 기록을 작성하려고 했지만, 사람이라는게 귀찮아져서..미루게 되었다..ㅎㅎ.. 그렇기때문에 늦었지만 지금부터라도 꾸준하게 작성하려고 한다!