update

Author: navskh

_posts/ReactNative/2023-05-08-18 사진공유앱시작.md

@@ -116,4 +116,113 @@ useReducer라는게 있음.
 const [state, dispatch] = useReducer(reducer, init);
 ```
 
+```
+state: 상태 변수
+dispatch : reducer로 action 을 전달하는 함수
+action : 현재 상태를 어떻게 변경해야하는지에 대한 행동 지침
+reducer : state와 action을 받아서 변경된 상태를 변환하는 함수
+
+```
+
+사용예시는 다음과 같다.
+
+```jsx
+const init = 0;
+const CountType = {
+	INCREMENT: 'INCREMENT',
+	DECREMENT: 'DECREMENT',
+};
+const reducer = (state, action) => {
+	switch (action) {
+		case 'INCREMENT':
+			return state + 1;
+		case 'DECREMENT':
+			return state - 1;
+		default:
+			return state;
+	}
+};
+
+...
+
+const [resultVal, dispatch] = useReducer(reducer, init);
+
+ return (
+        <View style={styles.container}>
+            <Text style={styles.title}>{resultVal}</Text>
+            <Button title={'+'} onPress={() => dispatch(CountType.INCREMENT)} />
+            <Button title={'-'} onPress={() => dispatch(CountType.DECREMENT)} />
+        </View>
+    );
+```
+
+위와 같이 사용하면 dispatch 를 통해 action 값을 전달해주고
+reducer 안에서 action을 받아서 그에 따라 동작하게 만들어주면 됨.
+
+더 직관적으로 사용할 수 있게 된다.
+값을 전달할수도 있어서, 전달된 값을 더하거나 뺄 수도 있다.
+
+reducer는 반드시 순수함수여야한다.
+
+순수함수란 입력데이터를 의존하지 않고, 외부 데이터를 변형하지 않는다.
+그냥 받아서 사용하기만 하면 됨.
+state나 action을 변형시키면 안됨
+그냥 딱 result 만 줘야 함.
+
+순수함수가 아니면??
+동작하지 않는다.
+
+원리에 대해서도 확인해주는데
+객체를 변경할 때, 주소값을 변경해주기 때문에
+어차피 변경되는 것이 없다고 판단한다..
+
+## 화면전환에 흰화면 뜸
+
+화면 구동 시...
+파일을 읽어오는데 구동되는데 시간이 걸리므로
+캐싱함.
+
+assets를 cache에 넣으려면?
+
+SplashScreen 이라는걸 사용하면 됨.
+
+App.js 에
+
+```jsx
+useEffect(() => {
+	(async () => {
+		try {
+			SplashScreen.preventAutoHideAsync();
+			// Image 캐싱
+		} catch (error) {
+			console.log(error);
+		}
+	})();
+}, []);
+```
+
+위코드를 두면
+preventAutoHideAsync에 의해서
+처음에 빌드가 다 되어도 SplashScreen을 계속 띄운다.
+
+최종 코드
+
+```jsx
+useEffect(() => {
+	(async () => {
+		try {
+			await SplashScreen.preventAutoHideAsync();
+			await Asset.fromModule(
+				require('../assets/cover.png'),
+			).downloadAsync();
+			// Image 캐싱
+		} catch (error) {
+			console.log(error);
+		} finally {
+			setIsReady(true);
+		}
+	})();
+}, []);
+```
+
 {%endraw%}

_posts/ReactNative/2023-05-09-19 firebase 사용.md

@@ -0,0 +1,157 @@
+---
+layout: post
+title: Firebase 연동하기
+subtitle: React Native 강의 19강
+tags: [React Native]
+author: Young
+comments: True
+---
+
+{%raw%}
+
+```js
+import { initializeApp } from 'firebase/app';
+import { firebaseConfig } from '../env';
+
+export const initFirebase = () => {
+	return initializeApp(firebaseConfig);
+};
+```
+
+위와 같이 사용하면 됨.
+결과는 key 값들 가져옴.
+
+app.js에서 가져오는게 좋겠고
+
+## 인증하기
+
+Firebase -> Authentification
+
+#### 1. 시작하기
+
+이메일 비밀번호, 사용하고 저장해주면 됨
+
+#### 2. 사용하는 방법
+
+firebase 문서에서 `signInWithEmailAndPassword` 를 찾아 아래와 같이 사용한다.
+
+auth.js
+
+```jsx
+import { getAuth, signInWithEmailAndPassword } from 'firebase/auth';
+
+export const signIn = async ({ email, password }) => {
+	const { user } = await signInWithEmailAndPassword(
+		getAuth(),
+		email,
+		password,
+	);
+	return user;
+};
+```
+
+저러면 user 정보로 잘 가져오는 것을 확인할 수 있다.
+
+## LogBox 무시
+
+```jsx
+LogBox.ignoreLogs(['AsyncStorage has been extracted from react-native core']);
+```
+
+위와 같이 사용하면 LogBox를 무시할 수 있다.
+당연히 남용은 금물
+
+## 로그인 실패 시 Alert
+
+```jsx
+export const getAuthErrorMessage = errorCode => {
+	switch (errorCode) {
+		case AuthErrorCodes.USER_DELETED:
+			return '계정을 찾을 수 없습니다.';
+		case AuthErrorCodes.INVALID_EMAIL:
+			return '유효하지 않은 이메일 주소입니다.';
+		case AuthErrorCodes.INVALID_PASSWORD:
+			return '잘못된 비밀번호입니다.';
+		default:
+			return '로그인에 실패하였습니다.';
+	}
+};
+```
+
+위와 같이 AuthErrorCodes 에서 Validate 넘겨서
+Alert Message 만들어주면 됨.
+
+```jsx
+try {
+	const user = await signIn(form);
+	console.log(user);
+} catch (error) {
+	const message = getAuthErrorMessage(error.code);
+	Alert.alert('로그인 실패', message);
+}
+```
+
+## 회원가입 기능 만들기
+
+`createUserWithEmailAndPassword` 를 사용하면 됨.
+
+```jsx
+export const signUp = async ({ email, password }) => {
+	const { user } = await createUserWithEmailAndPassword(
+		getAuth(),
+		email,
+		password,
+	);
+	return user;
+};
+```
+
+그 외엔 로그인과 동일하게 처리해주면 됨.
+
+## 상태변수 수정에 대하여
+
+예를들어 아래와 같은 코드가 있다고 가정하자.
+
+```jsx
+dispatch({ type: AuthFormTypes.TOGGLE_LOADING });
+try {
+	const user = await signUp(form);
+	setUser(user);
+} catch (error) {
+	const message = getAuthErrorMessage(error.code);
+	Alert.alert('회원가입 실패', message);
+}
+dispatch({ type: AuthFormTypes.TOGGLE_LOADING });
+```
+
+그러면 setUser가 정상적으로 진행되었을 때
+Stack 자체가 하나는 unmount 하나는 mount 되면서
+
+그 이후에 dispatch 함수는 실행이 되지 않는다. (상태변수는 수정이 되지 않는다.)
+
+그래서 실패한 경우에만 dispatch를 넣어주면 된다.
+
+```jsx
+dispatch({ type: AuthFormTypes.TOGGLE_LOADING });
+try {
+	const user = await signUp(form);
+	setUser(user);
+} catch (error) {
+	const message = getAuthErrorMessage(error.code);
+	Alert.alert('회원가입 실패', message, [
+		{
+			text: '확인',
+			onPress: () => dispatch({ type: AuthFormTypes.TOGGLE_LOADING }),
+		},
+	]);
+}
+```
+
+## 로그인 유지하기
+
+firebase에서 로그인 유지하는 기능이 있음.
+
+`onAuthStateChanged()`를 사용할 것!
+그리구 expo48 버전부터는 AsyncStorage랑 같이 써야한다고 함.
+
+{%endraw%}