초보개발자의 소소한 기록

@ List * 9.1 탭 화면 구현하기 * 9.2 로그인 상태 유지하기 * 9.3 포스트 작성 기능 구현하기 ** 9.3.1 탭 중앙에 버튼 만들기 ** 9.3.2 업로드할 사진 선택 또는 카메라 촬영하기 ** 9.3.3 포스트 작성 화면 만들기 @ Note 1. 사용자 정보 인증 - 앱 종료 시에도 사용자의 로그인 상태를 유지하기 위해 일반적으로 AsyncStorage에 인증 정보를 저장하는 방법 사용함 - 하지만 Firebase로 인증을 구현했기 때문에, Firebase 의 auth().onAuthStateChanged 함수를 통해 인증 관련 작업 가능 2. 업로드할 사진 선택창 구현 - iOS 는 사용자에게 선택지를 줄 때 주로 ActionSheetIOS를 사용하여 UI 구현함 - android ..

* react-native-firebase/auth 패키지의 auth().onAuthStateChanged(callback) 메소드 호출 시 발생한 에러 분명 어제까지 잘되었던 기능이 갑자기 오늘부터 안되기 시작함. WARN Possible Unhandled Promise Rejection (id: 0): Error: [firestore/permission-denied] The caller does not have permission to execute the specified operation. NativeFirebaseError: [firestore/permission-denied] The caller does not have permission to execute the specified opera..

* package-lock.json 파일 삭제 후, package.json 을 최신 버전들로 재설치 (npm install) 후 실행 시 에러 발생 error: Error: Unable to resolve module html-parse-stringify2 from /Users/.../react-native/node_modules/react-i18next/dist/commonjs/Trans.js: html-parse-stringify2 could not be found within the project or in these directories: node_modules If you are sure the module exists, try these steps: 1. Clear watchman watche..

* toast 호출 후 navigation.navigate() 로 화면 이동 시 앱이 죽는 현상 발견 debug 모드로 error log 확인 시 _reactNative.Keyboard.removeListener 가 정상 동작 하지 않음을 확인 확인해보니 react-native v0.65 부터 removeListner() 메서드를 사용하지 않고, remove() 를 사용하는 것으로 변경됨 * reference : https://reactnative.dev/docs/0.65/keyboard#removelistener ToastContainer 에서 에러가 발생하고 있었기에 관련 package 버전을 확인해보니, 최신 버전에서 해당 이슈가 해결되어 있음을 확인 * reference : https://gith..

@ List * 8.5 이미지 업로드하기 ** 8.5.1 이미지 선택 기능 구현하기 ** 8.5.2 사용자 기본 이미지 설정하기 ** 8.5.3 Firebase Storage로 이미지 업로드하기 * 8.6 정리 @ Note 1. react-native-image-picker 라이브러리 $ yarn add react-native-image-picker $ npx pod-install - {launchCamera} : 사용할 이미지를 카메라로 바로 촬영할 때 사용 - {launchImageLibrary} : 사진첩에서 이미지 선택할 때 사용 > OS별 callback 로그 값 // iOS LOG {"assets": [{"fileName": "F25D0...539.jpg", "fileSize": 242106,..

* Firebase storage 에 이미지 업로드 요청 시 발생한 에러 WARN Possible Unhandled Promise Rejection (id: 26): Error: [storage/unauthorized] User is not authorized to perform the desired action. NativeFirebaseError: [storage/unauthorized] User is not authorized to perform the desired action. Firebase storage 의 권한 설정 관련 default 가 '모두 거부' 로 되어있다. 해당값을 read 권한은 모두 허용하고, write 권한은 인증된 사람만 업로드 할 수 있도록 권한을 새로 적용해주면 해결...

@ List * 8.3 Firebase에 회원 정보 등록하기 * 8.4 UserContext 만들고 로그인 사용자 분기 처리하기 @ Note 1. createContext API 의 사용 - reference : https://ko.reactjs.org/docs/context.html#reactcreatecontext 2. 로그인 관련 setUser를 호출 하는 시점 - 프로필이 등록된 계정으로 로그인했을 때 - Welcome 화면에서 프로필 정보를 등록했을 때 - 앱을 새로 켜서 로그인 상태가 유지됐을 때 3. user 상태에 따른 화면 분기 처리 - SignIn 및 Welcome 화면에서 MainTab 화면으로 전환 시, navigation 또는 push 로 하면 안됨 - 스택에 기존 로그인 또는 프..

* 비동기 작업을 처리하는 과정에서 발생한 에러 ERROR Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. " 언마운티드된 컴포넌트에 대해서는 상태를 업데이트 할 수 없다. 해당 작업은 수행되지 않지만 메모리 누수가 발생된다. 해결방법으로 useEffect 의 cleanup function을 이용해라. " ** 에러 발생 배경 ** 해당 에러 발생 ..

@ List ** 8.2.5 Firebase로 회원 인증하기 ** 8.2.6 오류 예외 처리하기 ** 8.2.7 사용자 프로필 Firebase에 담기 @ Note 1. React Native Firebase 회원 인증 - Firebase에서 제공하는 함수들을 컴포넌트에 바로 사용하지 않고 임의의 함수를 따로 만들어서 호출함 - 함수를 감싸는 작업을 한 번 하면 추후 firebase를 사용하지 않고 다른 방식으로 인증할 경우에도 코드를 쉽게 전환 가능 > reference : https://rnfirebase.io/auth/usage 2. loading 을 통한 상태 관리 - async/await 문법을 사용한 비동기 처리 시, loading & setLoading 을 적절히 사용 3. 오류 처리 - e ..

* Firebase 연동 후 ios 에서 auth() 호출 시 발생한 에러. import auth from '@react-native-firebase/auth'; ... // 회원가입 export function signUp({email, password}) { return auth().createUserWithEmailAndPassword(email, password); } ... iOS에 Firebase 적용 시, 아래 3번 4번 단계를 React Native Firebase에서 처리하기 때문에 생략하였고, 이 때 React Native Firebase 설치를 위해 AppDelegate.m 에 코드 추가 하는 것을 놓쳐서 발생한 에러 아래 코드 추가로 해결됨 # ios > ... > AppDelega..