#4주차_2_서버리스 운영을 위해 파이어베이스

>>서버리스 운영을 위해 파이어베이스에 앱 등록<<

1.파이어리스에서 프로젝트 생성

sparta-myhoneytip-yak-b0472

프로젝트 생성

sparta-myhoneytip-yak

 

https://console.firebase.google.com/project/sparta-myhoneytip-yak-b0472/overview?hl=ko

 

신청해 주셔서 감사합니다. 나중에 알림 구독에서 업데이트를 관리할 수 있습니다.

sparta-myhoneytip-yak

앱에 Firebase를 추가하여 시작하기

 

앱 등록 후 로컬에서 파이어베이스와 연결을 위한 작업을 한다.

프로젝트 폴더에서 진행

2.설치

expo install firebase

 

3.firebaseConfig.js 생성

import firebase from "firebase/compat/app";

 

// 사용할 파이어베이스 서비스 주석을 해제합니다 //

//import "firebase/compat/auth";

import "firebase/compat/database";

//import "firebase/compat/firestore";

//import "firebase/compat/functions";

import "firebase/compat/storage";

 

// Initialize Firebase

// 파이어베이스 사이트에서 봤던 연결정보를 여기에 가져옵니다 //연결 key

const firebaseConfig = {

apiKey: "AIzaSyBKG2xY91x23W8PF1231k5OUJ5kHSKYQeNWUw",

authDomain: "sparta-psytest-gun.firebaseapp.com",

databaseURL: "https://sparta-psytest-gun.firebaseio.com",

projectId: "sparta-psytest-gun",

storageBucket: "sparta-psytest-gun.appspot.com",

messagingSenderId: "781790378482",

appId: "1:78179037128482:web:ddbca53309f67b947136b",

measurementId: "G-3F5L9F3340Q3"

};

 

>>왼쪽 메뉴에서 database 생성<<

https://console.firebase.google.com/project/sparta-myhoneytip-yak-b0472/database/sparta-myhoneytip-yak-b0472-default-rtdb/data/~2Ftip~2F3

로그인 - Google 계정

//YAK : databaseURL 생성후 추가 

 

const firebaseConfig = {
  apiKey: "AIzaSyAkFWtAPvcajuV2-uiJMo-5lhWsbae91eg",
  authDomain: "sparta-myhoneytip-yak-b0472.firebaseapp.com",
  projectId: "sparta-myhoneytip-yak-b0472",
  databaseURL: "https://sparta-myhoneytip-yak-b0472-default-rtdb.asia-southeast1.firebasedatabase.app/",
  storageBucket: "sparta-myhoneytip-yak-b0472.appspot.com",
  messagingSenderId: "354873355002",
  appId: "1:354873355002:web:c070c149af0798c7b97743",
  measurementId: "G-T14SPVDEXN"

};

//사용 방법입니다.

//파이어베이스 연결에 혹시 오류가 있을 경우를 대비한 코드로 알아두면 됩니다.

if (!firebase.apps.length) {

firebase.initializeApp(firebaseConfig);

}

export const firebase_db = firebase.database()

 

4.Storage

빌드 > Storage 시작

아시아 노스 3? 선택해서 시작함

images 폴더 생성

 

https://console.firebase.google.com/project/sparta-myhoneytip-yak-b0472/storage/sparta-myhoneytip-yak-b0472.appspot.com/files

로그인 - Google 계정

 

5.Realtime Database

NoSql

지역을 하나 선택해서 만들기 한다.

생성 후 const firebaseConfig 에 실시간 데이터베이스 생성시의 주소를 추가 한다.

https://sparta-myhoneytip-yak-b0472-default-rtdb.asia-southeast1.firebasedatabase.app/

 

tip이 들어 있는 데이터베이스 주소

https://sparta-myhoneytip-yak-b0472-default-rtdb.asia-southeast1.firebasedatabase.app/tip

 

6.실시간데이터베이스 규칙을 모두 true로 변경해야 공개가된다.

 

>>0107<<

https://console.firebase.google.com/project/sparta-myhoneytip-yak-b0472/database/sparta-myhoneytip-yak-b0472-default-rtdb/data?hl=ko

 

깃 작업 참고

https://nevertrustbrutus.tistory.com/153

 

>>코드 리뷰 <<

1) 상단에서 import data from "../data.json"; 로 필요 데이터를 가져왔습니다.

2)

//꿀팁 데이터를 관리하는 상태입니다.

const [state, setState] = useState([])

//선택한 카테고리에 맞는 문제 데이터를 저장하고 관리하는 상태입니다.

const [cateState, setCateState] = useState([])

: cateState 값이 변경되면 화면이 재로드된다.

3)

useEffect 에서 데이터를 실제 상태관리 하기 시작합니다.

useEffect(()=>{

navigation.setOptions({

title:'나만의 꿀팁'

})

setTimeout(()=>{

getLocation()

setState(tip)

setCateState(tip)

setReady(true)

},1000)

},[])

 

>>리얼 타임 데이터 베이스를 생성하면서 부터 고유한 DB 주소를 갖게됩니다.

디비URL 

https://sparta-myhoneytip.firebaseio.com/

 

위와 같은 주소에 리얼타임 데이터베이스가 생성되었는데요!

이 고유 주소에 tip 이란 방에 꿀팁들이 저장되었습니다

 

https://sparta-myhoneytip.firebaseio.com/tip

 

>>https://sparta-myhoneytip.firebaseio.com/ 과 같은 기본 주소가 생략되어 있습니다.

firebase_db.ref('/tip').once('value').then((snapshot) => {

let tip = snapshot.val();

})

:firebase_db.ref('/tip').once('value').then((snapshot) => {})

 

이 코드는 서버리스를 이용하여 데이터베이스를 조회하기 위해,

파이어베이스 측에서 정해놓은 API 사용방법입니다. 따라서 우린 공식 문서 그대로 사용 방법을 적용해야 합니다.

 

조회한 데이터는 snapshot 부분에 담겨서 {} 내부에서 사용할 수 있는데, 그 중 실제 우리에게 필요한 데이터는 snapshot.val()로 가져와 변수에 담아 사용합니다.

 

>>firebaseConfig.js<<

//외부에서 firebase 데이터를 사용하기 위해 내보내고 있다.

export const firebase_db = firebase.database()

 

>>MainPage.js<<

import {firebase_db} from “../firebaseConfig”

 

firebase_db데이터 조회하기 위해 import 한다.

 

useEffect(()=> 안에서 데이터 호출하는 부분 수정을 할 수 있다.

// getLocation()

// setState(data.tip)

// setCateState(data.tip)

// setReady(false)

==> 이렇게 수정할 수 있다.

==> ref('/tip') :

https://sparta-myhoneytip-yak-b0472-default-rtdb.asia-southeast1.firebasedatabase.app/tip

: snapshot은 일반적으로 데이터 가져올 때 쓰는 변수

 

setTimeout(()=>{

firebase_db.ref('/tip').once('value').then((snapshot) => {

console.log("파이어베이스에서 데이터 가져왔습니다!!")

let tip = snapshot.val();

 

setState(tip)

setCateState(tip)

getLocation()

setReady(false)

});

// getLocation()

// setState(data.tip)

// setCateState(data.tip)

// setReady(false)

},1000)

 

Card.js에서 DetailPage.js 전달 데이터로 idx 넘겨주기

 

>>Card.js<<

import React from 'react';

import {View, Image, Text, StyleSheet,TouchableOpacity} from 'react-native'

 

//MainPage로 부터 navigation 속성을 전달받아 Card 컴포넌트 안에서 사용

export default function Card({content,navigation}){

return(

//카드 자체가 버튼역할로써 누르게되면 상세페이지로 넘어가게끔 TouchableOpacity를 사용

<TouchableOpacity style={styles.card} onPress={()=>{navigation.navigate('DetailPage',{idx:content.idx})}}>

<Image style={styles.cardImage} source={{uri:content.image}}/>

<View style={styles.cardText}>

<Text style={styles.cardTitle} numberOfLines={1}>{content.title}</Text>

<Text style={styles.cardDesc} numberOfLines={3}>{content.desc}</Text>

<Text style={styles.cardDate}>{content.date}</Text>

</View>

</TouchableOpacity>

)

}

const styles = StyleSheet.create({

 

card:{

flex:1,

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",

}

});

 

>>DetailPage.js<<

import React,{useState,useEffect} from 'react';

import { StyleSheet, Text, View, Image, ScrollView,TouchableOpacity,Alert,Share } from 'react-native';

import * as Linking from 'expo-linking';

import {firebase_db} from "../firebaseConfig"

 

export default function DetailPage({navigation,route}) {

 

// 데이터 없을 경우의 에러 방지용 데이터 

const [tip, setTip] = useState({

"idx":9,

"category":"재테크",

"title":"렌탈 서비스 금액 비교해보기",

"image": "https://storage.googleapis.com/sparta-image.appspot.com/lecture/money1.png",

"desc":"요즘은 정수기, 공기 청정기, 자동차나 장난감 등 다양한 대여서비스가 활발합니다. 사는 것보다 경제적이라고 생각해 렌탈 서비스를 이용하는 분들이 늘어나고 있는데요. 다만, 이런 렌탈 서비스 이용이 하나둘 늘어나다 보면 그 금액은 겉잡을 수 없이 불어나게 됩니다. 특히, 렌탈 서비스는 빌려주는 물건의 관리비용까지 포함된 것이기에 생각만큼 저렴하지 않습니다. 직접 관리하며 사용할 수 있는 물건이 있는지 살펴보고, 렌탈 서비스 항목에서 제외해보세요. 렌탈 비용과 구매 비용, 관리 비용을 여러모로 비교해보고 고민해보는 것이 좋습니다. ",

"date":"2020.09.09"

})

 

useEffect(()=>{

console.log(route)

navigation.setOptions({

title:route.params.title,

headerStyle: {

backgroundColor: '#000',

shadowColor: "#000",

},

headerTintColor: "#fff",

})

//setTip(route.params)

//넘어온 데이터는 route.params에 들어 있습니다.

const { idx } = route.params;

firebase_db.ref('/tip/'+idx).once('value').then((snapshot) => {

let tip = snapshot.val();

setTip(tip)

});

},[])

 

const popup = () => {

Alert.alert("팝업!!")

}

 

const share = () => {

Share.share({

message:`${tip.title} \n\n ${tip.desc} \n\n ${tip.image}`,

});

}

 

const link = () => {

Linking.openURL("https://spartacodingclub.kr")

}

return (

// ScrollView에서의 flex 숫자는 의미가 없습니다. 정확히 보여지는 화면을 몇등분 하지 않고

// 화면에 넣은 컨텐츠를 모두 보여주려 스크롤 기능이 존재하기 때문입니다.

// 여기선 내부의 컨텐츠들 영역을 결정짓기 위해서 height 값과 margin,padding 값을 적절히 잘 이용해야 합니다.

<ScrollView style={styles.container}>

<Image style={styles.image} source={{uri:tip.image}}/>

<View style={styles.textContainer}>

<Text style={styles.title}>{tip.title}</Text>

<Text style={styles.desc}>{tip.desc}</Text>

<View style={styles.buttonGroup}>

<TouchableOpacity style={styles.button} onPress={()=>popup()}><Text style={styles.buttonText}>팁 찜하기</Text></TouchableOpacity>

<TouchableOpacity style={styles.button} onPress={()=>share()}><Text style={styles.buttonText}>팁 공유하기</Text></TouchableOpacity>

<TouchableOpacity style={styles.button} onPress={()=>link()}><Text style={styles.buttonText}>외부 링크</Text></TouchableOpacity>

</View>

 

</View>

 

</ScrollView>

 

)

}

 

const styles = StyleSheet.create({

container:{

backgroundColor:"#000"

},

image:{

height:400,

margin:10,

marginTop:40,

borderRadius:20

},

textContainer:{

padding:20,

justifyContent:'center',

alignItems:'center'

},

title: {

fontSize:20,

fontWeight:'700',

color:"#eee"

},

desc:{

marginTop:10,

color:"#eee"

},

buttonGroup: {

flexDirection:"row",

},

button:{

width:90,

marginTop:20,

marginRight:10,

marginLeft:10,

padding:10,

borderWidth:1,

borderColor:'deeppink',

borderRadius:7

},

buttonText:{

color:'#fff',

textAlign:'center'

}

})