-
질문 & 답변
카테고리
-
세부 분야
모바일 앱 개발
-
해결 여부
미해결
선생님 도와주세요 ㅠㅠ (로그인, 회원가입, 콘솔 에러)
23.12.16 19:44 작성 조회수 176
0
3가지의 문제가 있습니다 ㅎㅎ..
섹션 9. 기능 구현 - 회원가입 에서 다 잘됐는데, 회원가입의 Input 값을 모두 입력한 후 Sign up 버튼을 누르면 어플이 꺼집니다. 파이어베이스에 회원 데이터는 잘 들어와있습니다.
섹션 10. 인증과 화면전환에서 src\navigations\index.js 중
<NavigationContainer>{user.uid ? <Main /> : <Auth />}</NavigationContainer>
해당 코드를 입력하고 로그인을 시도하니 Render Error가 뜹니다 ㅠㅠ..
이건 에러가 아니고 경고인데, 어느 순간부터 프로젝트를 실행시키면 콘솔 워닝이 뜹니다.
코딩하는데 불편은 없지만 해결할 수 있으면 해결하고 싶어요..
소스코드 주소 : https://github.com/jeong0903/RN-chatting.git
답변 기다리겠습니다 ㅜㅜ!!
답변을 작성해보세요.
0
김범준
지식공유자2023.12.17
안녕하세요,
2) src/navigations/Main.js 파일 <Stack.Screen> 컴포넌트에서 Profile 컴포넌트를 전달할때, component 오타가 있습니다. conponent라고 하셨네요.
3) firebase에서 로그인 상태를 유지하기 위한 방법 안내입니다. 콘솔에 나타나는 경고 메시지대로 @react-native-async-storage/async-storage 패키지를 설치하고 @firebase/auth에서 제공하는 initializeAuth 함수를 활용하면, 새로고침 하더라도 로그인 상태를 유지할 수 있습니다.
메시지에서 설명하는 방법은 다음 코드를 추가하는 것입니다.
import { initializeAuth, getReactNativePersistence } from 'firebase/auth';
import ReactNativeAsyncStorage from '@react-native-async-storage/async-storage';
const auth = initializeAuth(app, {
persistence: getReactNativePersistence(ReactNativeAsyncStorage)
});
1) 말씀하신 상황이 재현이 안되어 확인이 어렵습니다. 계속 같은 문제가 발생하나요?
즐거운 하루 되세요
감사합니다.
JH
질문자2023.12.17
빠른 답변 감사합니다 선생님!🤩🤩
2번은 component 오타로 인한 오류가 맞았나봅니다 ㅠㅠㅠ 오타 수정과 동시에 작동이 잘됩니다.
너무 허무하고 어이가 없어서 웃음밖에 안나오네요 하 ㅠㅠㅋㅋㅋㅋ
1번은 회원가입 과정에서 프로필 사진을 안넣으면 가입이 잘 되고, 사진을 넣으면 튕기는 것 같습니다.
3번 콘솔 오류는 코드 추가를 정확히 어디에 해야하는건가요?
gpt에 물어보면 App.js에 하라고 하고, 스택오버플로에서는 firebase.js에 추가하라는 의견도 있어서
둘 다 해봤는데도 계속 다른 오류들이 꼬리에 꼬리를 무네요 ㅠㅠ
번거롭게 해서 죄송합니다만 다시 한 번 답변 기다리겠습니다!
김범준
지식공유자2023.12.18
안녕하세요,
위치는 작성된 코드에 따라 다릅니다. 강의에서 알맞은 위치는 firebase.js 파일입니다.
firebase.js 파일 initializeApp(config) 아래에 const auth = getAuth(app); 코드 대신 위의 답변에 작성해드린 코드를 사용하면 됩니다.
만약 프로젝트를 기기에서 실행하는 도중에 firebase.js 파일을 수정하면 에러가 나타날텐데, 그냥 새로고침하거나 다시 실행하면 됩니다.
추가로, 새로고침해도 로그인이 유지되게 하려면 추가 작업이 필요합니다.
https://firebase.google.com/docs/reference/js/auth.md#onauthstatechanged
firebase/auth에 있는 onAuthStateChanged 함수를 이용해야합니다.
onAuthStateChanged는 현제 로그인되어 있는 사용자의 상태를 반환하는 함수로, navigations/index.js 파일에서 사용하면 됩니다. 관련된 코드는 아래 링크를 확인하시기 바랍니다.
새로고침하면 로그인 화면이 잠시 나타났다가 메인화면이 나타날텐데, 이 현상은 onAuthStateChanged에 의해 user context가 수정되기 전에 로그인화면이 나타나는 것입니다. 이 문제를 해결하는 방법은 index.js 파일의 useEffect가 끝나기 전에 화면을 보여주지 않고, 로딩화면을 보여주는 것입니다.
Expo에서 제공하는 SplashScreen을 이용하면 쉽게 만들 수 있습니다.
https://docs.expo.dev/versions/latest/sdk/splash-screen/
관련된 코드도 위의 킷헙 링크에서 확인할 수 있습니다. expo 공식 문서와 위의 링크를 확인하면 어렵지 않게 만드실 수 있을것이라 생각합니다.
강의에서 다루지 않는 내용이다보니 세세한 코드 작성까지 하지 않는점 이해해 주시면 감사하겠습니다.
즐거운 하루 되세요
감사합니다.
답변 1