๐ฅReact Naitve ์ฑ ์ ์๊ธฐ #4 | FireBase ์ฐ๋ํ๊ธฐ(AdMob, Database...
๐ฅReact Naitve ์ฑ ์ ์๊ธฐ #4 | FireBase ์ฐ๋ํ๊ธฐ(AdMob, Database...
์๋ ํ์ธ์ ๋ฐ์ธ๋ฉ '์ต์๋ฒ' ์ฐ๊ตฌ์์ ๋๋ค!
์ค๋์ React-native์ ํ์ด์ด๋ฒ ์ด์ค๋ฅผ ์ฐ๋ํ์ฌ Admob์ ์ด์ฉํด ๊ด๊ณ ๋ฅผ ๋์ฐ๋ ๊ณผ์ ์ ๋ค๋ค ๋ณด๋๋ก ํ๊ฒ ์ต๋๋ค!
์ฑ ๋ด์์ ๊ด๊ณ ๋ฅผ ์ฌ์ฉํ๊ธฐ์ํด Admob์ ์ฌ์ฉํ๊ธฐ๋ก ํ์๋๋ฐ์ Firebase์์ Admob์ ์ง์ํ๊ธฐ๋ํ๊ณ DB์ Storage ๋ํ ์ง์ํ๋ Firebase๋ฅผ ์ฌ์ฉํ๊ธฐ๋ก ๊ฒฐ์ ํ์์ต๋๋ค.
1. Firebase ํ๋ก์ ํธ ์์ฑํ๊ธฐ
๋จผ์ Firebase ํ๋ก์ ํธ๋ฅผ ๋ง๋ค์ด ๋ณด๋๋ก ํ๊ฒ ์ต๋๋ค.
https://firebase.google.com ๋ก ๋ค์ด๊ฐ์ ์ฝ์๋ก ์ด๋์ ๋๋ฆ ๋๋ค.
ํ๋ก์ ํธ ์ถ๊ฐ๋ฅผ ํด๋ฆญํด์ ํ๋ก์ ํธ๋ฅผ ๋ง๋ค๊ฒ ์ต๋๋ค.
์ฒซ ๋ฒ์งธ ๋จ๊ณ๋ก ํ๋ก์ ํธ ์ด๋ฆ์ ์ค์ ํฉ๋๋ค.
๋๋ฒ์งธ ๋จ๊ณ๋ก ์ ๋๋ฆฌํฑ์ค ์ฌ์ฉ์ค์ ์ ํ๋๋ฐ์
๋ฌด๋ฃ๋ก ์ ๊ณต๋๋ ์ ์ฉํ ๊ธฐ๋ฅ๋ค์ด ๋ง์ผ๋ ์ฌ์ฉ ์ค์ ์ ํ๊ณ ๋ค์์ผ๋ก ๋์ด๊ฐ๋๋ค.
๋ง์ง๋ง์ผ๋ก ์ ๋๋ฆฌํฑ์ค ๊ตฌ์ฑ์ํ๋ฉด Firebase ํ๋ก์ ํธ๊ฐ ๋ง๋ค์ด์ง๋๋ค.
2. React-native์ ์ฐ๋ํ๊ธฐ
firebase์์ admob์ ์ฌ์ฉํ๊ธฐ์ํด์
npm install @react-native-firebase/app ๋ช ๋ น์ ํตํด ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ค์นํด์ค๋๋ค.
๊ทธ๋ฆฌ๊ณ ํ๋ก์ ํธ ํด๋์ package.json์ผ๋ก ๋ค์ด๊ฐ๋ฉด ์์กด์ด ์ถ๊ฐ๋ ๋ชจ์ต์ ๋ณผ ์ ์์ต๋๋ค.
๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ ์ค์น ๋ ๋ชจ์ต
@react-native-firebase/admob
๋ฐ๋ก ๋น๋๋ฅผ ํ๊ฒ ๋๋ฉด ๋น๋๊ฐ ๋์ง ์์ต๋๋ค!!
๋น๋๋ฅผ ํ๊ธฐ์ ์ ํ๋ก์ ํธ์ Firebase๋ฅผ ์ฐ๋ํ๋ ๊ณผ์ ์ด ํ์ํ๋ฐ์
์ฐ๋์ ์ํด ๋ง๋ค์๋ Firebase ํ๋ก์ ํธ๋ก ๋ค์ด๊ฐ๋๋ค.
2.1 Android ์ฐ๋ํ๊ธฐ
ํ๋ก์ ํธ์์ ์๋๋ก์ด๋ ์์ด์ฝ์ ๋๋ฌ์ค๋๋ค.
์์๊ฐ์ ๊ณผ์ ์ ๋ชจ๋ ๋ง์น๋ฉด firebase์ฑ์ ์ถ๊ฐ๊ฐ ๋ฉ๋๋ค.
์๋๋ก์ด๋ ํจํค์ง ์ด๋ฆ์ ๋ฃ๊ณ ์ฑ ๋ฑ๋ก์ ํด์ค๋๋ค.
์ฑ ๋ฑ๋ก์ ํ๊ฒ๋๋ฉด google-services.json์ ๋ค์ด๋ก๋ ๋ฐ์ ์ ์๋๋ฐ์,
jsonํ์ผ์ ํ๋ก์ ํธํด๋ > android > app ํด๋์์ ๋ฃ์ด์ค๋๋ค.
์๋๋ก์ด๋ ํ๋ก์ ํธ์ sdk๋ฅผ ์ถ๊ฐํ๋ ๊ณผ์
๊ทธ๋ฆฌ๊ณ ๋ง์ง๋ง์ผ๋ก SDK๋ฅผ ์๋๋ก์ด๋ ํ๋ก์ ํธ์ ์ถ๊ฐํ๋ ๊ณผ์ ์ด ํ์ํฉ๋๋ค.
๋จผ์ ํ๋ก์ ํธํด๋ > android ํด๋์์์๋ build.gradle ์ ๋ค์๊ณผ ๊ฐ์ด ์์ ํด์ค๋๋ค.
์ฒดํฌํ์ํ ๋ถ๋ถ๋ค์ ์ ๋ ฅํ๊ณ ,
ํ๋ก์ ํธ ํด๋ > android > app ํด๋๋ก ๋ค์ด๊ฐ์ ๋ค์๊ณผ ๊ฐ์ด ์์ ํด์ค๋๋ค.
๋จผ์ ์ ๋์ค์ ์ ๋ ฅํด ์ค๋๋ค.
apply plugin: "com.android.application" ์ ์ด๋ฏธ ์ ๋ ฅ์ด ๋์ด์์ ์ ์์ต๋๋ค.
๊ทธ๋ฆฌ๊ณ ์๋๋ก ๋ด๋ ค
dependencies์ ํ์ค์ ์ถ๊ฐํด์ค๋๋ค.
์ ์ฅ์ ํ ํ์ ๋๊ธฐํ๋ฅผ ํด์ผ ํ๋๋ฐ์.
์ ๋ ํ๋ก์ ํธ > androidํด๋์์ ./gradlew clean ๋ช ๋ น์ด๋ฅผ ํตํด ๋๊ธฐํ๋ฅผ ํ์ต๋๋ค.
firebase.json ํ์ผ์ ๋ชจ์ต
๊ทธ๋ฆฌ๊ณ ์์๊ฐ์ ํ์์ firebase.jsonํ์ผ์ ๋ง๋ค์ด์ฃผ๊ณ ํ๋ก์ ํธ ์ ์ผ ์ต์์ ํด๋์ ๋ฃ์ ๋ค ์ค์น๋ฅผ ํ๊ฒ ๋๋ฉด
Firebase๋ฅผ ์ถ๊ฐํ๋ค๋ ์๋ฆผ๋ฌธ๊ตฌ๋ฅผ ๋ณผ ์ ์์ต๋๋ค.
2.2 iOS ์ฐ๋ํ๊ธฐ
3. Admob ์ฌ์ฉํ๊ธฐ
Firebase๋ฅผ ์ฌ์ฉํ๊ฒ๋ ์ด์ ๋ Firebase์์ Admob์ ์ง์ํ๊ธฐ ๋๋ฌธ์ด์์ฃ !
๋๋์ด Admob์ ์ฌ์ฉํด ๋ณด๊ฒ ์ต๋๋ค.
npm install @react-native-firebase/admob ๋ช ๋ น์ ํตํด ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ถ๊ฐํด ์ค๋๋ค.
๊ทธ๋ฆฌ๊ณ Google AdMob์ผ๋ก ์ ์ํ์ฌ ๊ฐ์ ์ ํ ํ ์ฑ์ ์ถ๊ฐํฉ๋๋ค.
React-native๋ ์ถํ iOS๊ฐ๋ฐ๋ํ ์งํํ ์ ์๊ธฐ ๋๋ฌธ์
Android์ธ์๋ iOS ๋๊ฐ์ ํ๋ก์ ํธ๋ฅผ ๋ง๋ค์ด ์ฃผ์ด์ผ๊ฒ ์ฃ ?
์ฑ์ ์ถ๊ฐํ๊ณ ๋ ํ ๋ค์ ํ๋ก์ ํธ๋ก ๋์์ ๋ง๋ค์ด๋ firebase.json์ id๋ฅผ ์ถ๊ฐ ํด์ฃผ์๋ฉด ๋๋๋ฐ์.
firebase.json ํ์ผ์ ๋ชจ์ต
๊ฐ ์ฑ ์์ด๋๋ Admob์์ ์ฑ์ ์ ํํ๊ณ ์ฑ ID๋ฅผ ๋ณต์ฌํ์ฌ firebase.json ํ์ผ์ ์์ ํด์ค๋๋ค.
์ด์ ๊ธฐ๋ณธ ์ธํ ์ ๋๋ฌ์ต๋๋ค.
//Admob ์ปดํฌ๋ํธ import React from 'react'; import {Platform, StyleSheet} from 'react-native'; import {BannerAd, BannerAdSize, TestIds} from '@react-native-firebase/admob'; import {SafeAreaView} from 'react-navigation'; function Admob() { return ( { console.error('Advert failed to load: ', error); }} /> ); } const style = StyleSheet.create({ container: { flex: 1, alignItems: 'center', justifyContent: 'center', }, }); export default Admob; function BaseCampIntro() { return ( JejuCodingBaseCamp ) }
Test ๊ด๊ณ ID๋ฅผ ๋ฃ์ด Banner๋จ์ ๊ด๊ณ ๋ฅผ ๋ง๋ค์ด ์ฃผ๊ณ ์ปดํฌ๋ํธ ํ๋๋ฅผ ์ ์ ํ ํ์ ํ ํ๋ฉด์ ๋์ ์ฃผ์์ต๋๋ค.
Admob Test๊ด๊ณ ๊ฐ ์ ๋์จ ๋ชจ์ต์ ๋ณด์ค ์ ์์ต๋๋ค!
Test ID๋ฅผ Admob์์ ๊ด๊ณ ๋จ์๋ฅผ ๋ง๋ ๋ค BannerID๋ก ๋ฐ๊ฟ์ฃผ์๋ฉด ์ค์ ๊ด๊ณ ๊ฐ ์ถ๋ ฅ ๋ฉ๋๋ค!
์ด๋ฏธ ๋ง๋ค์ด์ ๊ด๊ณ ๋จ์๊ฐ ๋ณด์ด๋ค์ ์๋ ๊ณผ์ ์ ์๋ฃํ๋ฉด ์์ฑ๋ฉ๋๋ค!!
๊ด๊ณ ๋จ์๋ ์ฑ์์ ๊ด๊ณ ๋จ์ํญ์ผ๋ก ๋ค์ด๊ฐ ๊ด๊ณ ๋จ์ ์ถ๊ฐ๋ก ์ด๋ํฉ๋๋ค.
์ ํฌ๋ ๋ฐฐ๋๊ด๊ณ ๋ฅผ ์ํ๋ ๋ฐฐ๋๋ฅผ ์ ํํด ์ค๋๋ค.
๊ด๊ณ ๋จ์ ์ด๋ฆ์ ์ ๋ ฅํด์ฃผ๊ณ ๊ด๊ณ ๋จ์ ๋ง๋ค๊ธฐ๋ฅผ ํด๋ฆญ ํ๋ฉด ์๋ฃ๋ฉ๋๋ค
๋ค์ ๊ด๊ณ ๋จ์ํญ์ผ๋ก ์ด๋ํ์ฌ ๋ง๋ค์ด์ง ๊ด๊ณ ๋จ์๋ฅผ ํด๋ฆญํ๋ฉด ์์๊ฐ์ ํ๋ฉด์ ๋ณด์ค ์ ์๋๋ฐ์ ๊ด๊ณ ๋จ์ ID๋ฅผ ํ๋ก์ ํธ Admob ์ปดํฌ๋ํธ์ TestID ๋์ ์ ๋ฌธ์์ด ํํ๋ก ๋ฃ์ด์ฃผ์๋ฉด ๋ฉ๋๋ค!
4. Firebase Database + Storage ์ด์ฉํ๊ธฐ
์ฑ์์ ์ฃผ๊ธฐ์ ์ผ๋ก ์ ๋ฐ์ดํธ๋๋ ๋ฐ์ดํฐ๋ค๊ณผ ์ด๋ฏธ์ง ๋ฑ์ ๊ด๋ฆฌํ๊ธฐ์ํด ํ์ด์ด๋ฒ ์ด์ค์์ ์ ๊ณตํ๋ Real Time Database์ Storage๋ฅผ ์ฌ์ฉํ๊ธฐ๋ก ํ์์ต๋๋ค.
Firebase Real Time Database๋ ์ฌ์ค ์ค์๊ฐ์ผ๋ก ๋ฐ์ดํฐ ๋๊ธฐํ๊ฐ ํ์ํ ์๋น์ค์์ ํ์๋กํ์ง๋ง ๊ฐ๋จํ ๋ฐ์ดํฐ๋ฒ ์ด์ค๋ก๋ ์ฌ์ฉํ๋๋ฐ ํฐ ๋ฌธ์ ๋ ์๋ค๊ณ ์๊ฐ๋์ด ์ ํํ์์ต๋๋ค.
Firebase ํ์์ Databaseํญ์ผ๋ก ์ด๋ํ๊ณ ์๋๋ก ๋ด๋ฆฌ๋ฉด ์์ ๊ฐ์ ํ๋ฉด์ด ๋์จ๋ค
๋ฐ์ดํฐ ๋ฒ ์ด์ค๋ง๋ค๊ธฐ๋ฅผ ๋๋ฌ์ค๋๋ค
๋ณด์๊ท์น์ ์ผ๋จ ์ ๊ธ๋ชจ๋๋ก ์ฌ์ฉํ๋๋ก ํ์์ต๋๋ค.
ํด๋ฆญ ๋ช๋ฒ๋ง์ผ๋ก Firebase์์ ์ ๊ณตํ๋ Cloud Storage๋ฅผ ๋ง๋ค ์ ์์์ต๋๋ค.
์คํ ๋ฆฌ์ง์ ๋๋ ํ ๋ฆฌ ๊ตฌ์ฑ์ ํ๊ณ ๊ฐ ์ด๋ฏธ์ง์ URL๊ณผ ํ ํฐ์ Database์ ๋ฃ์ด์ฃผ์์ต๋๋ค.
์ด๋ฏธ์ง๋ฅผ Storage์ ๋ฃ์ด์ฃผ๊ณ ํ ํฐ์ ํฌํจํ URL์ database์ ๋ฃ์ด์ฃผ์์ต๋๋ค.
์ฌ์ฉํ๊ธฐ์ ์ Firebase์์๋ ๊ณ์ ์์ ์ธ์ฆ์ ์ํ ํ ํฐ์ ๋ฃ์ด์ฃผ๋ ๋ฑ์ ๋ณด์์ ์ํ ๊ท์น์ ์์ฑ ํ ์ ์๋๋ฐ์ write๊ธฐ๋ฅ์ ์ฌ์ฉํ์ง์๊ณ read๋ ํฌ๊ฒ ๋ณด์์ด ํ์์๊ธฐ ๋๋ฌธ์
true๋ก ๊ฐ๋จํ๊ฒ ์ค์ ํด ์ฃผ์์ต๋๋ค.
์ฝ๊ธฐ ๊ถํ์ ์ฃผ๊ณ ๋ฐ์ดํฐ๋ฒ ์ด์ค URL ๋ค์ .json ์ ๋ถ์ฌ์ฃผ์ด ๊ฒฐ๊ณผ๊ฐ์ ๋ฐ์ ๋ชจ์ต์ ๋๋ค.
์ ์์ ์ผ๋ก ๋ฐ์ดํฐ๋ฅผ ๋ฐ์์์ต๋๋ค.
ํด๋น DB ๋ฅผ react-native app์์ ์ฌ์ฉํ๋๋ก ํ์์ต๋๋ค.
๋จผ์ @react-native-firebase/database ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ค์นํ๊ณ
import database from '@react-native-firebase/database'; async function data(params) { const ref = database().ref(); let data = await (await fetch(ref + params + '.json')).json(); return data; } export default data;
์์๊ฐ์ด ํ๋ผ๋ฏธํฐ๋ง ๋๊ฒจ ๋ฐ์ดํฐ๋ฅผ ๋ฐ์์ฌ ์ ์๋๋ก ๊ฐ๋จํ ํจ์๋ฅผ ๋ง๋ค์์ต๋๋ค.
๋ฐ์ดํฐ๋ฒ ์ด์ค์์ ๋ฐ์ดํฐ๋ฅผ ์ฝ๊ฑฐ๋ ์ฐ๋ ค๋ฉด firebase.database.Reference์ ์ธ์คํด์ค๊ฐ ํ์ํฉ๋๋ค.
database().ref() ๋ฅผ ํตํด Reference๋ฅผ ๋ง๋ค์ด ์ค๋๋ค. ๊ทธ๋ฆฌ๊ณ ์ Json ํํ๋ก ๋ฐ์ดํฐ๋ฅผ ๋ฐ์์ ์ฌ์ฉ์ ํ ์์ ์ด๊ธฐ ๋๋ฌธ์ ๋ง๋ค์ด์ง ref์ params์ ๋ฌธ์์ด '.json' ์ ๋ถ์ฌ์ค๋๋ค.
๋ฐ์์จ ์ด๋ฏธ์ง URL ๋ฐ์ดํฐ๋ฅผ ํตํด Storage์ ์๋ ์ด๋ฏธ์ง ๋ํ ์ ์ถ๋ ฅ๋๋ ๋ชจ์ต์ ๋๋ค.
๋ค์๊ธ์ ํ๋ ์ด ์คํ ์ด(PlayStore) ๋ฐฐํฌ๋ก ์ฐพ์๋ต๊ฒ ์ต๋๋ค~!
from http://paullab.tistory.com/30 by ccl(A)
๋๊ธ
๋๊ธ ์ฐ๊ธฐ