๐Ÿ”ฅ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)

๋Œ“๊ธ€

์ด ๋ธ”๋กœ๊ทธ์˜ ์ธ๊ธฐ ๊ฒŒ์‹œ๋ฌผ

[React] - 18) ํ”„๋กœ์ ํŠธ ๋นŒ๋“œํ•˜๊ธฐ(+์ฝ”๋“œ ์Šคํ”Œ๋ฆฌํŒ…)

๋‹จ์œ„ ํ…Œ์ŠคํŠธ ํ™˜๊ฒฝ ๊ตฌ์ถ•

React์—์„œ ์›นํŒฉ ์„ค์น˜ํ•˜๊ธฐ