[Park] Firebase Auth 연동 #51
Conversation
✅ Deploy Preview for co-studo ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
git actions 에서 header polyfills 관련 오류메세지로 인해 찾아보니 msw 에서 해당 이슈로 수정했던 사항이 있어 업그레이드
| export const useMe = () => { | ||
| const [me, setMe] = useState<User | null>(null); | ||
|
|
||
| useEffect(() => { | ||
| const unsubscribe = auth.onAuthStateChanged((user) => { | ||
| setMe(user); | ||
| }); | ||
| return () => unsubscribe(); | ||
| }, []); | ||
|
|
||
| return me; | ||
| }; |
There was a problem hiding this comment.
useMe라는 네이밍이 뭔가 엄청 귀여운데
이름만 봤을 때 user의 정보를 가져오는 느낌이 직관적으로 들지는 않는 것 같아요
근데 너무 귀엽네요 useMe...setMe...ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ^_^)b 오히려 좋은 것 같기도?ㅋㅋㅋㅋ
There was a problem hiding this comment.
사용한다 나를..!
현재 로그인된 사람의 정보가 필요한데 useLoginUser ? 정도가 떠오르긴 하네용 ㅋㅋ
다른 분들도 useMe 라고 하면 동작이 예상이 어려울까요?
There was a problem hiding this comment.
흠 좀 더 구체적이면 좋을 것 같긴 한데 useMe도 나쁘지는 않은 것 같아요..!
There was a problem hiding this comment.
ㅋㅋㅋㅋㅋㅋ 귀엽긴하네용 나를 사용하라..!
근데 첨에 보고 useMe ?? 나의 뭘 사용한다는거지?? 라는 생각이 들어서 이 파일을 열어서 확인하긴 했어요ㅎㅎ
useLoginUser가 더 명확하고 좋을거 같아요!
|
|
||
| const auth = getAuth(app); | ||
|
|
||
| export const login = ({ email, password, authProvider }: LoginInput) => { |
There was a problem hiding this comment.
보통 저희가 props 네이밍을 XXXProps 라고 했던 것 같은데 LoginInput이라는 이름을 사용한 이유가 있으실까요??
There was a problem hiding this comment.
고민했던 부분이긴 한데 Props 의 의미가 컴포넌트에서 쓰이는게 맞다고 생각해서 login 은 login 을 제공하는 함수이기에 네이밍을 저렇게 지었습니다
There was a problem hiding this comment.
아하 그렇군여! 그런데 input이라고 하면 딱 생각나는 게 폼에서 사용하는 input이라 더 나은 이름이 있을지 고민해봐도 좋을 것 같네요!
There was a problem hiding this comment.
움.. 근데 사용자가 입력한 값이니 (물론 지금은 github 로그인이라 사용자가 직접 입력하진 않았지만) input도 저는 괜찮은거 같아요! 저라면 LoginInfo 라고 지었을거 같긴해요.
There was a problem hiding this comment.
음.. 일단은 emai, password 모두 input 을 통해 받는 값이긴 하니 그대로 두겠습니다!
|
|
||
| const auth = getAuth(app); | ||
|
|
||
| export const login = ({ email, password, authProvider }: LoginInput) => { |
There was a problem hiding this comment.
움.. 근데 사용자가 입력한 값이니 (물론 지금은 github 로그인이라 사용자가 직접 입력하진 않았지만) input도 저는 괜찮은거 같아요! 저라면 LoginInfo 라고 지었을거 같긴해요.
| export const useMe = () => { | ||
| const [me, setMe] = useState<User | null>(null); | ||
|
|
||
| useEffect(() => { | ||
| const unsubscribe = auth.onAuthStateChanged((user) => { | ||
| setMe(user); | ||
| }); | ||
| return () => unsubscribe(); | ||
| }, []); | ||
|
|
||
| return me; | ||
| }; |
There was a problem hiding this comment.
ㅋㅋㅋㅋㅋㅋ 귀엽긴하네용 나를 사용하라..!
근데 첨에 보고 useMe ?? 나의 뭘 사용한다는거지?? 라는 생각이 들어서 이 파일을 열어서 확인하긴 했어요ㅎㅎ
useLoginUser가 더 명확하고 좋을거 같아요!
| setMe(user); | ||
| }); | ||
| return () => unsubscribe(); | ||
| }, []); |
There was a problem hiding this comment.
unmount되면 유저 정보를 없애는? 로직 같은데 onAuthStateChanged는 유저 정보가 변할 때 발생하는 이벤트니 subscirbe와 unsubscribe 둘 다 해당되는 기능인거 같아요.
unsubscribe 이름대로라면
const unsubscribe = auth.onAuthStateChanged((user) => {
setMe(null);
});
return () => unsubscribe();이렇게 되야할거 같은데 지금 이 함수만 보면 user 정보가 들어올 때도 해당되는 함수 아닌가? 라는 생각이 들어서요!
지금 로직 그대로 쓰려면
const updateLoginUser = auth.onAuthStateChanged((user) => {
setMe(user);
});
return () => updateLoginUser();이런 이름이 되야하지 저 함수의 기능에 맞지 않나라는 생각이 드네요..??
unmount될 때 로그인 정보를 해지한다라는걸 알려주기 위해서 사용하신 거 같은데 함수 기능에는 맞지 않는 이름 아닌가라는 생각이 듭니당
There was a problem hiding this comment.
onAuthStateChanged 의 return 값이 unsubscribe 함수여서 저렇게 사용했습니다!
https://firebase.google.com/docs/reference/js/v8/firebase.auth.Auth#onauthstatechanged
로그인 정보를 해지한다 라는 것 보다는 user 의 state change 를 감지하는 listener 를 해지하는 것으로 생각하시면 됩니다!
| const [isLogin] = useLocalStorage('isLogin', false); | ||
| const user = useMe(); | ||
|
|
||
| return isLogin && !user ? null : ( |
There was a problem hiding this comment.
추후에 로딩 컴포넌트를 만들어서 null 대신 넣으면 좋을거 같아용
| @@ -0,0 +1,32 @@ | |||
| import { brands } from '@fortawesome/fontawesome-svg-core/import.macro'; | |||
| import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; | |||
There was a problem hiding this comment.
말하는걸 계속 깜빡했는데 @FortAwesome 요기 오타가 있더라구용 fort -> font
There was a problem hiding this comment.
저거 패키지 이름이 저렇습니다 ㅋㅋ; 아마 누가 먼저 선점해서 저렇게 썼나봐요
|
firebase 잘 정복해가고 계신거 같네요! |
close #49
저렇게 동적으로 변하는 url 을 어떻게 설정해야 하는지도 알아보겠습니다..
Actions
dependency
이번 주에 개선이 될 예정이라고 하니 개선된 이후 버전 업그레이드 진행하겠습니다.
@fbase/auth
유저와 관련된 메서드는 @fbase/auth 에서 확인하실 수 있고, 만약 필요하시다면 firebase 공식문서를 통해 직접 추가도 가능합니다.
학습 비용이 있어 필요하신 부분이 있으시면 웬만하면 제가 하긴 하겠습니다!
firebase 를 연동하면서 user 의 정보를 받아오는 부분에 이슈가 살짝 있었는데,
제가 알고 있던 것은 auth.currentUser 하면 바로 로그인된 유저의 정보를 받아와서 사용하는데 Page reload 시에 가져오지 못하는 문제가 있었습니다.
구글링해본 결과 User 를 받아오는 것이 Promise 가 아니기에 onAuthChanged 라는 listener 를 통해 User 를 받는 것을 등록해놓고 사용하기를 권장하고 있어 useMe 라는 훅을 만들어 useEffect 에서 상태를 통해 set 하도록 하였습니다.
여기서 또 문제가 발생한 점은 아무래도 User 정보를 받아오는데 딜레이가 있기 때문에
App.tsx 단게에서 local storage 에 이미 로그인을 한 이력이 있는지 판단하는 isLogin 상태를 사용하여 isLogin 인데 user 의 정보가 없는 경우 렌더링을 하지 않도록 하여 반짝이는 현상을 없앴습니다.
+) 만약 token 이 만료되어서 user 를 받아오지 못한거라면 이슈가 생길 수가 있을 것 같은데 해당 부분에 대한 테스트는 추후 진행해보겠습니다.
++) 위와 관련해서 기존에 셋팅해두었던 ErrorBoundary 의 로직도 수정될 필요가 있어보이고, 전역 상태를 관리하는 Recoil Store 에서 user 정보가 불필요하다고 생각이 되어 추후 없애지 않을까 생각중입니다.