내가 만드는 앱의 "광고"를 자동화하기
"광고"
내가 만드는 모든 앱은 광고를 보여주고 있다. 나는 개인사업자가 아니기 때문에, 광고를 붙여서 수익을 내려고 노력한다.
이 광고들을 보여줄 태그의 이름은 "Admob" 이다.
코드를 작성해 본다.
파일경로: /src/ui/components/Admob.tsx
import React from 'react';
import {Platform, StyleSheet, View} from 'react-native';
import {BannerAd, BannerAdSize, TestIds} from 'react-native-google-mobile-ads';
const unitID =
Platform.select({
ios: 'ca-app-pub-xxxxxxxxxxxxxxxx/xxxxxxxxxx',
android: 'ca-app-pub-xxxxxxxxxxxxxxxx/xxxxxxxxxx',
}) ?? '';
const adUnitId = __DEV__ ? TestIds.BANNER : unitID;
export enum AdmobType {
Full = BannerAdSize.INLINE_ADAPTIVE_BANNER,
Rect = BannerAdSize.MEDIUM_RECTANGLE,
Banner = BannerAdSize.BANNER,
LeaderBoard = BannerAdSize.LEADERBOARD,
InlineAdaptiveBanner = BannerAdSize.INLINE_ADAPTIVE_BANNER,
}
interface AdmobProps {
type: AdmobType;
}
const Admob = ({type}: AdmobProps) => {
return (
<View style={styles.admob}>
<BannerAd
unitId={adUnitId}
size={type}
requestOptions={{
requestNonPersonalizedAdsOnly: false,
}}
/>
</View>
);
};
const styles = StyleSheet.create({
admob: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
},
});
export default Admob;
내가 이 코드를 사용하기 위해서는 "react-native-google-mobile-ads" 이 라이브러리가 필요하다.
따라서 해당 라이브러리를 설치하는 방법도 작성해 보자.
yarn add react-native-google-mobile-ads
이제 이 두가지를 자동으로 처리하기 위한 명령어를 만들어보자. 물론... ChatGPT가 모두 알려주었다.
파일경로: /automation/create_Admob.sh
#!/bin/bash
# 1. Google Admob 패키지 설치
echo " Installing react-native-google-mobile-ads..."
yarn add react-native-google-mobile-ads
# 2. 파일 경로 설정
FILE_PATH="./src/ui/components/Admob.tsx"
DIR_PATH=$(dirname "$FILE_PATH")
# 3. 디렉토리 생성 (존재하지 않으면)
mkdir -p "$DIR_PATH"
# 4. TypeScript 파일 생성
cat <<EOF > "$FILE_PATH"
import React from 'react';
import {Platform, StyleSheet, View} from 'react-native';
import {BannerAd, BannerAdSize, TestIds} from 'react-native-google-mobile-ads';
const unitID =
Platform.select({
ios: 'ca-app-pub-xxxxxxxxxxxxxxxx/xxxxxxxxxx',
android: 'ca-app-pub-xxxxxxxxxxxxxxxx/xxxxxxxxxx',
}) ?? '';
const adUnitId = __DEV__ ? TestIds.BANNER : unitID;
export enum AdmobType {
Full = BannerAdSize.INLINE_ADAPTIVE_BANNER,
Rect = BannerAdSize.MEDIUM_RECTANGLE,
Banner = BannerAdSize.BANNER,
LeaderBoard = BannerAdSize.LEADERBOARD,
InlineAdaptiveBanner = BannerAdSize.INLINE_ADAPTIVE_BANNER,
}
interface AdmobProps {
type: AdmobType;
}
const Admob = ({type}: AdmobProps) => {
return (
<View style={styles.admob}>
<BannerAd
unitId={adUnitId}
size={type}
requestOptions={{
requestNonPersonalizedAdsOnly: false,
}}
/>
</View>
);
};
const styles = StyleSheet.create({
admob: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
},
});
export default Admob;
EOF
echo "✅ Admob.tsx created at $FILE_PATH"
이제 터미널에서 명령어를 실행해 보았다.
sh automation/create_Admob.sh
잘 생성되었다...!
앞으로 광고를 보여주는 영역은 아무런 생각 없이 사용할 수 있겠지 ...
