저번글에 이어 로그인끝내기
로그인 시작
로그인은 회원가입보다 훨씬 간단하다.
확인해야할게 유저의 이메일과 패스워드만 확인하고 넘겨버리면 끝이니까.
로그인을 만들기위해 로그인페이지를 만들어주고시작했다.
회원가입과 동일하게 input으로 유저의 이메일 패스워드를 받아올것이고 그 값을 관리해줄 state를 만들어줄것이다.
회원가입과 별 다를건 없어서 설명은 생략.
파이어베이스의 로그인기능은 간단하다.
auth를 사용하는데 그중 signInWithEmailAndPassword라는 굉장히 긴 함수에 이메일과 비밀번호를 넣어주면된다
signInWithEmailAndPassword(이메일,비밀번호)
이게끝이다. 로그인은 성공했을때 결과값또한 가져올 수 있다.
위 함수는 로그인을 시도하고 성공했을 때 결과값으로 유저의 정보를 가져온다 콘솔창에
이제 로그인을 시도해보면
성공했다고 표시가 잘 나온다. 콘솔창에도
이러한 유저의 정보들이 막 담겨있다.
이 유저의 정보는 꽤나 쓸모가많다. 유저의 이름도 저장이되어있고 프로필사진도 저장을 해서 사용할거기때문이다.
로그인한 유저의 정보를가지고 헤더에 띄워보기
콘솔창에 유저의 정보가 잘 출력이되니까
그곳에서 유저의 이름과 프로필사진으로 헤더에 유저정보를 띄워줄것이다. 근데 현재 로그인한 저 아이디는 회원가입 테스트용으로 만들어서 이름과 프로필사진이 저장되어있지않기때문에 삭제하고 새로만들것이다.
유저의 정보를 나는 리덕스툴킷을 사용해서 store에 저장해준 뒤
헤더에서 꺼내쓰는 방법으로 사용하려한다.
store에 로그인 정보를 받아올 수 있게끔 미리 만들어두고
로그인페이지에서 로그인이 성공했을 때 디스패치로 보내주면 될것같다.
아까 만들어두었던 로그인을 해주는 함수에 위 처럼
변수로 원하는 유저의 정보만 뽑아서 담은 뒤 그 변수를 디스패치로 보내주었다.
제대로 작동하는지 콘솔창에 한번 찍어보자.
로그인을 시도했을 때
콘솔창에 store가 잘 띄워진다 원하는 정보도 잘 받아오고있다.
이제 이 정보를 가지고 헤더를만들어볼거다.
위 처럼 store에서 유저의 정보를 가져오고 그 정보를 화면에 뿌려줬다.
결과는 잘 나오고있다. 이걸 이제 좀 꾸며주면 헤더는 최종적으로 완성일거같다.
헤더는 로그인을 했을 때 로그인의 버튼은 사라지고 유저의 사진과 이름이 남아있어야한다.
간단한 css와 조건문만 사용하면될거라 금방만들 수 있다.
일단 유저가 로그인했을 때 로그인 버튼을 없앨 방법은
삼항연산자로 유저의 이름이 두글자거나 이상일때 로그인버튼이 아닌 유저정보를 보여주게끔 만들어주었다.
이저 저 유저정보를 꾸며주면 끝일거같다.
CSS는 대충 저정도만 주고 끝냈다. 나중에 옆에 화살표를 달아서 클릭할 수 있는 느낌을 준 뒤 드롭다운 메뉴로 로그아웃과 마이페이지 버튼을 넣어줄 예정이다.
새로고침하면 로그인이 풀려버린다.
전에 한번 미리 만들어보면서 있었던 버그? 사소한문제가 있는데
새로고침을 하게되면 로그인이 풀려버린다는것이다.
이번엔 이걸 미리 고쳐놓고 넘어가보려한다.
로그인 풀리는 이유
사실 새로고침을 한다해서 로그인이 풀리거나 그러진 않는다고한다.
내가 로그인이 풀려버렸다고 인식을한건 헤더에 유저정보가
로그인 -> 유저정보 가 되는데 유저정보인 상태에서 새로고침을 하면 로그인이 나타나기때문이었다.
여기서 유저정보가 사라지고 로그인이 나타난 이유는 유저정보를 리덕스툴킷에서 받아오고있었기 때문에 새로고침하면 리덕스툴킷의 정보가 사라져버려서였다.
이 문제를 해결하기위해서 리덕스툴킷에 정보를 담아서 사용할게아니라 로컬스토리지를 사용하면 해결이될 문제였다.
그렇다면 코드를 좀 변경시켜주어야한다.
기존에 로그인 성공했을 시
리덕스 툴킷에 보내던 디스패치와 겟유저데이터는 지워버리고
모든 유저정보를 로컬스토리지에 저장하는 코드를 작성했다.
user가 들어있을 때 로컬스토리지에 유저의정보를 다 넣어준다.
로그인 시 이렇게 다 들어오게된다. 이제 여기서 필요한 정보들만 빼서 사용하면 될거같다.
에러가 생겼다..
에러라고 해야할진 모르겠는데 이렇게 사용을하니까
삼항연산자로 로그인이 되어있지않았을 때 로그인을 보여주고
로그인이 됐을 때 유저정보를 보여주는 UI를 짜놓았는데
로그인 하자마자 유저정보가 나타나질않아서
useState도 사용해보고 useEffect도 사용해보고 이것저것 생각나는 방법은 다 해보았는데 되질않았다..
어째서인지 변수에 로컬스토리지의 데이터를 가져온걸 바탕으로 변하지않았다.
분명 콘솔창에 찍어보면 아무것도없을땐 null 이나왔고 로그인을했을땐 유저정보가 잘 나타났었는데
삼항연산자로
{데이터 === null ? 로그인 : 유저정보}이런식의 코드를 짜놓았는데 실시간반영이 되지않았다..
새로고침을했을 땐 유저정보로 잘 변하는걸 볼 수 있었지만
로그인할 때 마다 새로고침을 해줄 순 없으니 그냥 이방법말고
어차피
이 코드는 유저가 로그인을 했을 때 유저정보를 가져오더라
그래서 그냥 로그인했을때 유저정보를 가져오니까 그 정보를 useState에 넣어서 사용하기로했다.
결과적으로는 이러한 코드가 완성이됐는데
로그아웃했을때 user에 데이터가 남아있어서 로그인으로 변하질않길래 로그아웃버튼 함수에도 setUser()를 넣어줬다.
그래도 뭐 결과적으로는.. 화면상으로 잘 나타났다 새로고침했을때도 로그아웃같은 느낌의 버그가 일어나지도않고
이제 헤더는 끝났다. 새로고침해도 유저정보가 잘 들어가있어서 만족스럽다. 다만 새로고침할때 잠깐 login버튼이 보이는데..
로컬스토리지로 할 수 있다면 다시 변경해보는것도 나쁘지않을거같다.
