(TIL) 4. React-Native & FireBase : realTimeDataBase
오늘은 드디어 realTimeDataBase를 이용할 수 있었습니다.
1.
반갑습니다.
이것저것 하다 보니 벌써 시간이 이렇게 되었네요.
오늘은 드디어 dataBase를 이용할 수 있었습니다.
하루종일 기존에 사용하던 DB 구조와는 달라서 앞으로 설계를 어떻게 해야 할까 하는 생각이 있었습니다.
RDB와는 다른 방식으로 데이터를 축적할 것 같아서 주말에는 개념에 대해 공부할까 합니다.
그래도 나름 db를 연동하기도 했고, 원하는 정보를 잘 집어넣을 수 있었습니다.
문제는 원하는 데이터의 기준이 매일 달라진다는 점인 것 같습니다.
이건 어떨까? 저건 어떨까? 하며 구조를 계속 바꾸기도 하고, 어떻게 하면 더 좋을까 고민하기도 합니다.
app의 경우에는 독립적인 데이터를 앱 사용자로 관리해야 하니까 해당 부분이 까다로울 것 같습니다.
때문에 RDB가 아닌 noSQL를 지향하는 것인가 생각이 듭니다.
2.
오늘은 data를 집어넣는 것 외에도 드디어 로직을 class로 작성하기도 했습니다.
어떻게 하면 로직을 줄일까, 컴포넌트의 내부를 깔끔하게 관리할 수 있을까도 생각하다 clean architecture 키워드를 알게 되었습니다.
pratt에게 가벼운 키워드일지 몰라도 하루하루 저에게는 새로운 세계가 열리는 기분입니다.
그래서 주말에는 clean architecture의 개념보다는 지금 제게 필요한 구조에 대한 공부를 할 것 같습니다.
3.
class가 완벽한 상태가 아니기도 하고, 스스로도 이게 맞는 방법일까 고민하는 하루였습니다.
class 내 메소드를 이용해 코드를 얼마나 줄일 수 있을까에 대한 고민이 많았습니다.
스스로 완벽하지 않아 명확한 설명이 아직 어려운 것 같습니다.
4.
현재의 지식으로 당연히 완벽할 수 없지만, React code를 사용하는데 이 수준이라고? 하는 생각이 가끔 드는 것 같습니다.
주말 사이에는 정말 열심히 공부해서 월요일부터 당당해질 수 있는 사람이 되고 싶어졌습니다.
React native, firebase를 적어도 원하는 기능 정도는 가볍게 구현할 수 있도록 노력해야겠다는 생각입니다.
그래도 코드를 올려보고 마치겠습니다.
SignIn.tsx
import React, {useState, useEffect} from 'react';
import {StyleSheet, SafeAreaView, View, Text, Button} from 'react-native';
import {GoogleSigninButton} from '@react-native-google-signin/google-signin';
import {googleSignInLogic, GoogleUserInfo} from '../../utils/googleSignin';
import auth from '@react-native-firebase/auth';
import {useDb} from '../../utils/database';
export const Login = ({navigation}) => {
const {googleLogInConfigure, signIn, signOut, signUp} = googleSignInLogic;
googleLogInConfigure();
const [userInfo, setUserInfo] = useState<GoogleUserInfo | null>(null);
const [token, setToken] = useState<string>('');
const {navigate} = navigation;
useEffect(() => {
if (userInfo) {
const userId = auth().currentUser?.uid;
const dbUserInfo = new useDb(`/users/${userId}`);
dbUserInfo.set({userInfo: userInfo.user});
// test code
dbUserInfo.on('value', snapshot => {
console.log('User data: ', snapshot.val());
});
// test code
navigate('ToDoList');
}
}, [userInfo]);
const {signInContainer, signInBlock} = styles;
return (
<SafeAreaView style={signInContainer}>
<View style={signInBlock}>
{userInfo && <Text>Hi</Text>}
{!userInfo && (
<GoogleSigninButton
size={GoogleSigninButton.Size.Wide}
color={GoogleSigninButton.Color.Dark}
onPress={() => {
userInfo ? signIn(setToken) : signUp(setUserInfo);
}}
/>
)}
<Button
title="SignOut"
onPress={() => {
signOut(setUserInfo);
}}
/>
</View>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
signInContainer: {
flex: 1,
backgroundColor: 'blue',
justifyContent: 'center',
alignItems: 'center',
},
signInBlock: {
justifyContent: 'center',
alignItems: 'center',
},
});
database.ts
import database from '@react-native-firebase/database';
export class useDb {
dir: string;
constructor(dir: string) {
this.dir = dir;
}
on(eventType, callback): void {
database().ref(this.dir).on(eventType, callback);
}
set(data): void {
database().ref(this.dir).set(data);
}
update(data): void {
database().ref(this.dir).update(data);
}
remove(data): void {
database().ref(this.dir).remove(data);
}
push(data): void {
database().ref(this.dir).push(data);
}
}
주말 사이에 더 나아진 코드를 올릴 수 있도록 노력해볼까 합니다.
그럼 좋은 금요일 밤 되세요.
Author And Source
이 문제에 관하여((TIL) 4. React-Native & FireBase : realTimeDataBase), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@dongwu-kim/TIL-4.-React-Native-FireBase-realTimeDataBase저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)