데이터베이이스별 저장형식
1) MySQL : 엑셀 형식
2) 파이어스토어 데이터베이스 : 이미지 형식
3) 리얼타임 데이터베이스 : JSON 형식
1. 파이어스토어 데이터베이스 (이미지 파일 저장)
: 플랫폼과 실시간 연동되어 지어진 이름
> 파이어베이스 > 빌드 > 리얼타임 데이터베이스
> 데이터베이스 만들기 > 잠금모드에서 시작 (모든 제3자 읽기 및 쓰기 불가상태)
> 사용설정
> 프로젝트 이름이 들어가있음 (딕셔너리 구조의 키 값으로 사용됨)
> 규칙 탭으로 들어간다
{
"rules": {
".read": false, <= 읽기 권한 (True 변경 시, 제 3자 읽기 가능)
".write": false <= 쓰기 권한 (True 변경 시, 제 3자 쓰기 가능)
}
}> 권한 설정 완료 후
> 데이터 탭 > ... 클릭 > JSON데이터 가져오기
> 앱 폴더에 들어가서 > data.json파일 업로드
> data.json 파일의 값이 자동으로 입력됨 (데이터 수정 관리 가능)
3. realtime database에 앱으로 CRUD하기
ㄱ. create 즉, write하는 방법 : .push() 문법을 사용하자.
ㄴ. read 하는 방법 : 파이어베이스 API로 받은 데이터를 useState를 이용해 return으로 렌더링 해주자
ㄷ. update 하는 방법 : .set() 또는 .update() 문법으로 덮어쓰기가 가능하다.
ㄹ. Delete 하는 방법 : 임의로 지정되는 key값을 찾아, 경로설정해 지워줘야한다. 아래 링크에 정리해두었다.
( 참고링크 : https://radpro.tistory.com/74 )
-------------------------------------------------<사용설명>---------------------------------------------------------
사용법 ( 이전글 : https://radpro.tistory.com/37 )
1. 이전글에서 작성한 바와 같이 필요한 모듈을 yarn add 로 설치해주자 (npm install, expo install로 대체가능)
2. 이전글에서 작성한 바와 같이 firebase에 프로젝트를 만들어 주자 (</> 모양으로 웹앱 프로젝트 만들면 됨)
3. 이전글에서 작성한 바와 같이 firebaseConfig.js를 프로젝트 제일 상위 폴더에 만들어 주자
4. 데이터를 불러오고 싶은 js파일에 import 해주자
import { firebase_db } from '../firebaseConfig';5. 다음과 같이 코드를 사용해주자. (useEffect와 useState를 사용합니다. 이해가 안되면 그냥 복붙합시다)
설명
ㄱ. 먼저 map함수가 돌아갈 js파일을 열어준다.
(firebase에 있는 json데이터를 가져와 map함수로 반복재구성 할것이기때문)
ㄴ. useState를 선언해주자 (여기선 state와 ready 두가지 상태를 선언해줬다.
ㄷ. useEffect를 사용해서 로딩에 대한 시간을 조정해줄수 있게 해주자
(useEffect는 제일 먼저 시행해줄 코드를 작성해주는 공간이다. 밑에 1000은 1초다. 프레임관련한 계산이다.)
ㄹ. firebase_db.ref('/키값')
: firebase_db에서 참조(reference)한다는 얘긴데, 참조=불러온다(read) 로 보면 된다.
: 본인이 설정한 firebase 안의 json파일 최상위 key값을 넣으면 된다.
ㅁ. state.map
: map함수 앞에 useState를 돌릴 변수인 state를 넣어주자
: 아래의 예시를 해석하자면, View태그 안에 Card라는 컴포넌트를 돌릴건데,
state라는 변수값을 map함수를 이용해 반복재구성 한다는 뜻이다.
이때, Card.js라는 컴포넌트 안에 있는 변수인 content에 대입하여 정보가 정돈될 것이고,
i는 index라는 뜻으로, json데이터의 index값 순서대로 차례대로 정보를 불러와 재구성 한다는 뜻이다.
그래서 정보가 처리되고 반환되는 Card의 인자가 content = { content }이고, key={ i }인거다.
(실제 사용되는 코드의 풀버전은 밑에 다 있다)
<View style={styles.cardContainer}>
{
state.map((content, i) => {
return (<Card content={content} key={i} />)
})
}
</View>
** 만약 firebase에 넣을 json파일에 idx 즉 index값을 설정 안해줬어도 상관없다. 업로드하면 알아서 생긴다.
ㅁ. 여기서 사용하는 코드의 기본형태 (실제 기능하는 예제는 밑에 있다.)
사용되는 코드의 기본형태
import React, { useState, useEffect } from "react";
import { firebase_db } from '../firebaseConfig';
export default function YouCard({ content }) {
const [state, setState] = useState([])
const [ready, setReady] = useState(true)
useEffect(() => {
setTimeout(() => {
firebase_db.ref('/items/' + idx).once('value').then((snapshot) => {
console.log("파이어베이스에서 데이터 가져왔습니다!!")
let items = snapshot.val();
setState(items)
setReady(false)
});
}, 1000)
}, [])
---------------------------------------------<실제 작동되는 예제>-------------------------------------------------
예시 코드
: 내가 구성한 코드는 다음과 같다.
- 원하는 영상의 playlist를 유튜브 API를 통해 받아 json데이터로 만들었다
- 해당 json데이터를 firebase에 저장했고, 이를 firebase.js로 받아와서 반복재구성한다.
- 반복재구성하는 레이아웃은 Card.js에서 지정했다.
- Card.js를 통해 재구성된 데이터는 각각 다음의 기능이 있다.
1) 누르면 '기본유튜브링크 + 해당영상의 고유 ID'로 만들어진 url을 통해 해당 영상이 재생된다.
2) 썸네일 이미지를 medium사이즈로 보여준다.
3) 제목을 1줄까지 표시해준다.
4) 영상설명을 3줄까지 표시해준다.
- 이렇게 만들어진 Card를 firebase에서 ScrollView로 만들어줘서 App.js를 통해 앱화면에 보여준다.
1. 사용되는 컴포넌트
ㄱ. App.js : 프로젝트의 맨 앞단. 작서안 코드가 앱으로 돌아가게 해주는 기본 js파일
ㄴ. Firebase.js : App.js에서 보여줄 실질적인 화면용 js파일.
여기서 firebase로부터 데이터를 받아서 map함수를 통해 리스트를 작성한다.
ㄷ. Card.js : Firebase.js에서 리스트를 작성할 때, map함수로 돌아갈 컴포넌트.
ㄹ. firebaseConfig.js : firebase에서 내 프로젝트 안에 있는 정보를 가져올 수 있는 중간 허브역할.
ㅁ. 나는 사실 Navigation과 Tab기능도 함께 쓰지만, 이걸 구현하는데는 구지 필요 없기 때문에 여기서는 제외한다.
요약 : Card.js는 말 그대로 카드다. 이 카드가 나열된게 Firebase.js인거다. Firebase.js를 전시하는게 App.js다.
Card.js에서 조회하는 정보는 firebase에 있으므로, 택배사 역할 해주는게 firebaseConfig.js다.
App.js
: import해서 return문에 그냥 <태그>로 심으면 됩니다.
Firebase.js
import React, { useState, useEffect } from 'react';
import { StyleSheet, View, ScrollView } from "react-native";
import Iframe from '../components/Iframe';
import Card from '../components/Card';
import SearchBar from 'react-native-platform-searchbar';
import { firebase_db } from '../firebaseConfig';
export default function Like() {
const Example = () => {
const [value, setValue] = useState('');
<SearchBar
value={value}
onChangeText={setValue}
placeholder="Search"
theme="light"
platform="default"
style={styles.searchBar}
>
{loading ? (
<ActivityIndicator style={{ marginRight: 10 }} />
) : undefined}
</SearchBar>;
};
const [state, setState] = useState([])
const [ready, setReady] = useState(true)
useEffect(() => {
// console.log(route)
setTimeout(() => {
// const { idx } = route.params;
firebase_db.ref('/items').once('value').then((snapshot) => {
console.log("파이어베이스에서 데이터 가져왔습니다!!")
let items = snapshot.val();
setState(items)
setReady(false)
});
}, 1000)
}, [])
return (
<ScrollView style={styles.container}>
<SearchBar />
{/* <SearchScreen /> */}
<Iframe />
<View style={styles.cardContainer}>
{
state.map((content, i) => {
return (<Card content={content} key={i} />)
})
}
</View>
</ScrollView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
},
cardContainer: {
marginTop: 10
}
});
Card.js
import React, { useState, useEffect } from "react";
import { StyleSheet, Text, View, Image, TouchableOpacity } from "react-native";
import * as Linking from 'expo-linking';
export default function YouCard({ content, navigation }) {
const link = () => {
Linking.openURL("https://www.youtube.com/watch?v=" + content.id.videoId)
}
return (
<TouchableOpacity style={styles.card} onPress={() => link()}>
<Image style={styles.cardImage} source={{ uri: content.snippet.thumbnails.medium.url }} />
<View style={styles.cardText}>
<Text style={styles.cardTitle} numberOfLines={1}>{content.snippet.title}</Text>
<Text style={styles.cardDesc} numberOfLines={3}>{content.snippet.description}</Text>
<Text style={styles.cardDate}>{content.snippet.publishedAt}</Text>
</View>
</TouchableOpacity>
)
}
const styles = StyleSheet.create({
card: {
flex: 1,
//컨텐츠들을 가로로 나열
//세로로 나열은 column <- 디폴트 값임
flexDirection: "row",
margin: 10,
borderBottomWidth: 0.5,
borderBottomColor: "#eee",
paddingBottom: 10
},
cardImage: {
flex: 1,
width: 100,
height: 100,
borderRadius: 10,
},
cardText: {
flex: 2,
flexDirection: "column",
marginLeft: 10,
},
cardTitle: {
fontSize: 20,
fontWeight: "700"
},
cardDesc: {
fontSize: 15
},
cardDate: {
fontSize: 10,
color: "#A6A6A6",
}
});
firebaseConfig.js
import firebase from "firebase/compat/app";
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
import "firebase/compat/storage";
import "firebase/compat/database";
//import "firebase/compat/firestore";
//import "firebase/compat/functions";
//import "firebase/compat/auth";
//firebase의 확장 기능중에 필요한것이 있다면 주석을 해제하고 사용합니다.
const firebaseConfig = {
apiKey: "본인의_FIrebase_API_key값을_입력하시오",
authDomain: "XXXXXXXXXXXXXXXXXXXXXXXXXXXX",
databaseURL: "XXXXXXXXXXXXXXXXXXXXXXXXXXX",
projectId: "XXXXXXXXXXXXXXXXXXXXXXXXXXX",
storageBucket: "XXXXXXXXXXXXXXXXXXXXXXXXXXX",
messagingSenderId: "XXXXXXXXXXXXXXXXXXXXXXXXXXX",
appId: "XXXXXXXXXXXXXXXXXXXXXXXXXXX",
measurementId: "XXXXXXXXXXXXXXXXXXXXXXXXXXX"
};
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
if (!firebase.apps.length) {
firebase.initializeApp(firebaseConfig);
}
export const firebase_db = firebase.database()
끝
'React-native > 정리' 카테고리의 다른 글
| 컴포넌트화 시키기 (0) | 2022.05.14 |
|---|---|
| Hook, useState, useEffect 이해하기 (0) | 2022.05.11 |
| firebase 개념 & 연동방법 (1) (0) | 2022.05.11 |
| Loading화면 구현하기 (0) | 2022.05.10 |
| Loading spinner overlay 구현하기 (0) | 2022.05.10 |