M1 맥을 새로 샀다.

homebrew를 설치하려니 인텔맥에서는 경험하지못한 에러가 발생했다.

"Warning: /opt/homebrew/bin is not in your PATH."

검색해 본 결과 M1 맥에서 발생하는 

설치오류 였고, 간단히 추가적인 입력으로 해결가능했다.

M1 맥에서 Homebrew설치하기

1. https://brew.sh/index_ko 접속

2. 코드라인 복사

3. 터미널에 입력

4. 패스워드 입력

5. return키 Press

6. 완료되면, 아래의 절차 이어서 진행

7. 

// 여기서 [user]에는 각 사용자 계정을 입력
echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> /Users/[user]/.zprofile

8.

eval "$(/opt/homebrew/bin/brew shellenv)"

9. 설치 완료 확인

brew --version

채널톡이 그 영향력을 상당히 넓히고있다.

앱에서도 호환성이 제법 훌륭해서 회사에서도

2개 서비스 연속으로 채널톡을 쓰고있다.

이 전에는 겪지 못했지만

이번에 빌드 관련해서 이슈를 겪어 문제를 기록

ipatool failed with an exception: #<CmdSpec::NonZeroExitException: 
$ /Users/user/Desktop/Xcode.app/Contents/Developer/usr/bin/python3 
/Users/user/Desktop/Xcode.app/Contents/Developer/usr/bin/bitcode-build-tool -v -t 
/Users/user/Desktop/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/bin -L 
/var/folders/r0/5sczfh113kdczqhflxskvq080000gn/T/ipatool20220722-31944-15jg3ll/thinned-out/arm64/Payload/[project].app/Frameworks --sdk 
/Users/user/Desktop/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS15.2.sdk -o 
/var/folders/r0/5sczfh113kdczqhflxskvq080000gn/T/ipatool20220722-31944-15jg3ll/thinned-out/arm64/Payload/[project].app/Frameworks/ChannelIOFront.framework/ChannelIOFront 
--generate-dsym /var/folders/r0/5sczfh113kdczqhflxskvq080000gn/T/ipatool20220722-31944-15jg3ll/thinned-out/arm64/Payload/[project].app/Frameworks/ChannelIOFront.framework/ChannelIOFront.dSYM 
--strip-swift-symbols /var/folders/r0/5sczfh113kdczqhflxskvq080000gn/T/ipatool20220722-31944-15jg3ll/thinned-in/arm64/Payload/[project].app/Frameworks/ChannelIOFront.framework/ChannelIOFront

Status: pid 32693 exit 1
Stdout:
SDK path: /Users/user/Desktop/Xcode.app/Contents/Developer/Platforms

시뮬레이터로 실행할때는 문제가 없었지만

ADHOC 빌드를 할 때 위와같은 이슈가 발생했다.

이슈를 추적한 결과

원인

아직 뚜렷한 원인이 밝혀진것은 아니나,
Xcode 12 이상의 버전을 사용하려는 경우, 특정 프레임워크와의 외부 종속성 문제로
프로젝트에서 비트코드를 비활성화하는 것 같다고 함.
따라서, 비트코드가 YES로 되어있는경우 빌드 에러가 발생.

해결책

[xcode]
Turn off Bitcode in Targets > Build Settings > Enable Bitcode.

제목 그대로의 상황이다.

방치해둔 서버의 용량이

각종 로그와 aws관련 버저닝 파일들로 인해 100%가 되어버렸다.

mongo는 더이상 저장이 불가능하자

다운되어 버렸다.

나중에 서버의 용량을 확보했지만

이미 다운된 몽고는 돌아오지 않았다.

다양한 방법의 실행 끝에

아래와 같은 방법을 통해 해결했다.

1. 로그 확인

/var/log/mongodb/mongod.conf

위 경로에서 로그를 확인할 수 있다.

나는 아래와 같은 에러 로그들을 볼수있었따.

WARNING: Using the XFS filesystem is strongly recommended with the WiredTiger storage engine
Failed to start up WiredTiger under any compatibility version.
Reason: 13: Permission denied

mongo, mongo status 체크를 할때도

아래와 같은 로그를 확인했었다.

Error: couldn't connect to server 127.0.0.1:27017, connection attempt failed: SocketException: Error connecting to 127.0.0.1:27017 :: caused by :: Connection refused

2. 해결책

의외로 해결책을 한 한국인 분의 블로그에서 확인할 수 있었다.

chown -R mongodb:mongodb /var/lib/mongodb
chown mongodb:mongodb /tmp/mongodb-27017.sock

재실행

systemctl restart monogd

systemctl status mongod

mongo

애니메이션 뷰는 정말 다양한 상황에

유용하게 쓰인다.

구현 방법 또한

상당히 간단해서 누구든 쉽게 구현할수있다.

import React, { ReactChild, useEffect, useState } from 'react';
import { Animated } from 'react-native';

export function FadeDownView({ duration, children }: { duration?: number; children: ReactChild }) {
  const value = new Animated.Value(0);

  useEffect(() => {
    Animated.timing(value, {
      toValue: 1,
      duration: duration || 500,
      useNativeDriver: true
    }).start();
  }, [])

  return (
    <Animated.View
      style={{
        opacity: value,
        transform: [{
          translateY: value.interpolate({
            inputRange: [0, 1],
            outputRange: [-24 , 0]
          })
        }]
      }}
    >
      { children }
    </Animated.View>
  )
}

export function FadeLeftView({ duration, children }: { duration?: number; children: ReactChild }) {
  const value = new Animated.Value(0);

  useEffect(() => {
    Animated.timing(value, {
      toValue: 1,
      duration: duration || 500,
      useNativeDriver: true
    }).start();
  }, [])

  return (
    <Animated.View
      style={{
        opacity: value,
        transform: [{
          translateX: value.interpolate({
            inputRange: [0, 1],
            outputRange: [-50 , 0]
          })
        }]
      }}
    >
      { children }
    </Animated.View>
  )
}

export function FadeRightView({ duration, children }: { duration?: number; children: ReactChild }) {
  const value = new Animated.Value(0);

  useEffect(() => {
    Animated.timing(value, {
      toValue: 1,
      duration: duration || 500,
      useNativeDriver: true
    }).start();
  }, [])

  return (
    <Animated.View
      style={{
        opacity: value,
        transform: [{
          translateX: value.interpolate({
            inputRange: [0, 1],
            outputRange: [50 , 0]
          })
        }]
      }}
    >
      { children }
    </Animated.View>
  )
}

export function FadeUpView({ duration, children }: { duration?: number; children: ReactChild }) {
  const value = new Animated.Value(0);

  useEffect(() => {
     Animated.timing(value, {
      toValue: 1,
      duration: duration || 500,
      useNativeDriver: true
    }).start();
  }, [])

  return (
    <Animated.View
      style={{
        opacity: value,
        transform: [{
          translateY: value.interpolate({
            inputRange: [0, 1],
            outputRange: [24 , 0]
          })
        }]
      }}
    >
      { children }
    </Animated.View>
  )
}

이런식으로 상,화,좌,우 Fade In 효과를 만들 수 있다.

사용한다면 아래와 같이 쓸수 있을것이다.

function SampleView() {
  const [fire, setFire] = useState(false);
  
  return (
    <View>
    <TouchableOpacity onPress={() => { setFire(true); }}>
      <Text>Fire!!!</Text>
    </TouchableOpacity>
    
    {
      !!fire &&
      <FadeDownView duration={300}>
        <Text>위에서 아래로</Text>
      </FadeDownView>
    }
    </View>
  )
}

* What went wrong:
Could not determine the dependencies of task ':app:mergeDebugAssets'.
> Could not resolve all task dependencies for configuration ':app:debugRuntimeClasspath'.
   > Could not find com.yqritc:android-scalablevideoview:1.0.4.
     Searched in the following locations:
       - file:/Users/user/project/lll/node_modules/react-native/android/com/yqritc/android-scalablevideoview/1.0.4/android-scalablevideoview-1.0.4.pom
       - file:/Users/user/project/lll/node_modules/jsc-android/dist/com/yqritc/android-scalablevideoview/1.0.4/android-scalablevideoview-1.0.4.pom
       - https://repo.maven.apache.org/maven2/com/yqritc/android-scalablevideoview/1.0.4/android-scalablevideoview-1.0.4.pom
       - https://dl.google.com/dl/android/maven2/com/yqritc/android-scalablevideoview/1.0.4/android-scalablevideoview-1.0.4.pom
       - https://www.jitpack.io/com/yqritc/android-scalablevideoview/1.0.4/android-scalablevideoview-1.0.4.pom

react-native-video 설치 후

빌드 과정에서 위 에러가 발생했다.

먼저, 설치방법

yarn add react-native-video

cd io && pod install && cd ..

npx react-native link react-native-video

위 에러 해결을 위한 단서는

https://github.com/react-native-video/react-native-video/issues/2454

https://stackoverflow.com/questions/68835157/error-when-trying-to-run-my-react-native-app-on-android/68841906#68841906

위 링크에서 확인할 수 있었다.

// android/build.gradle
allprojects {
    repositories {
        .... # Keep the rest
        jcenter() {
            content {
                includeModule("com.yqritc", "android-scalablevideoview")
            }
        }
    }
}

새 프로젝트를 시작하려 하니

내 개발환경에서 아래와 같은 이슈로

빌드에 실패하였다.

Android Gradle plugin requires Java 11 to run. You are currently using Java 1.8." in React Native

원인을 찾아보니

간단한 방법으로 해결할 수 있었다.

당연하게도 java version을 맞춰주는것이다.

먼저, 맥 사용자라면 아래의 가이드를

아니라면 직접  jdk 11 버전을 설치하자.

brew tap homebrew/cask-versions
brew install --cask zulu11

이제, 설치한 jdk를 적용해보자

nano ~/.zshrc
# export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_291.jdk/Contents/Home
export JAVA_HOME=/Library/Java/JavaVirtualMachines/zulu-11.jdk/Contents/Home

이전에 있던 1.8 버전은 주석처리하고

새 sdk를 지정한다.

그리고 저장.

이렇게만 하면

pc에 변경 사항이 반영되지않는다.

source ~/.zshrc

그리고 원래 실행중이던 터미널이 있다면

터미널을 새로 열고 빌드를 재 시도하면

정상적으로 진행될것이다.

npm run android

[업데이트]

확인 결과 .mm 기준으로

.m 레퍼런스 코드를 설정해서 작업해도

문제가 없음이 확인되었다.

아래의 내용은 꼭 필요했던 사람들만 확인 후 이용하길 바람

확인한 부분

- react-native-firebase/app react-native-firebase/analysis

// bash
npm i @react-native-firebase/app @react-native-firebase/analysis

// AppDelegate.mm, add
#import <Firebase.h>

[FIRApp configure];

// bash
cd ios && pod install && cd ..
npm run ios

[이전 내용]

react-native에서 새프로젝트를 만들면

AppDelegate.mm 파일이 생성되기 시작했다.

이전에는 AppDelegate.m이었다.

.m은 Object-C 기반

.mm은 Object-C ++ 기반

이라는 차이가 존재한다.

터보 모듈을 붙여 앱 성능 향상하는 것을 목적으로

RN쪽에서 업데이트한것으로 보인다.

다만, 개발자의 입장에서는

라이브러리들을 붙여야하는데

대부분의 현재 레퍼런스는

.m 기준으로 나타나있다.

따라서, .mm을 .m으로 변환해

프로젝트를 운영하고자 했다.

작업 순서

1. 기존의 .mm파일을 지움

2. .m 베이스 파일을 추가

3. .m 파일에 약간의 코드 변경

.m 파일에 약간의 코드 변경

#import "AppDelegate.h"

#import <React/RCTBridge.h>
#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>

#ifdef FB_SONARKIT_ENABLED
#import <FlipperKit/FlipperClient.h>
#import <FlipperKitLayoutPlugin/FlipperKitLayoutPlugin.h>
#import <FlipperKitUserDefaultsPlugin/FKUserDefaultsPlugin.h>
#import <FlipperKitNetworkPlugin/FlipperKitNetworkPlugin.h>
#import <SKIOSNetworkPlugin/SKIOSNetworkAdapter.h>
#import <FlipperKitReactPlugin/FlipperKitReactPlugin.h>

static void InitializeFlipper(UIApplication *application) {
  FlipperClient *client = [FlipperClient sharedClient];
  SKDescriptorMapper *layoutDescriptorMapper = [[SKDescriptorMapper alloc] initWithDefaults];
  [client addPlugin:[[FlipperKitLayoutPlugin alloc] initWithRootNode:application withDescriptorMapper:layoutDescriptorMapper]];
  [client addPlugin:[[FKUserDefaultsPlugin alloc] initWithSuiteName:nil]];
  [client addPlugin:[FlipperKitReactPlugin new]];
  [client addPlugin:[[FlipperKitNetworkPlugin alloc] initWithNetworkAdapter:[SKIOSNetworkAdapter new]]];
  [client start];
}
#endif


@implementation AppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  
#ifdef FB_SONARKIT_ENABLED
  InitializeFlipper(application);
#endif

  RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
                                                   moduleName:@"여기는 앱 이름"
                                            initialProperties:nil];

  if (@available(iOS 13.0, *)) {
      rootView.backgroundColor = [UIColor systemBackgroundColor];
  } else {
      rootView.backgroundColor = [UIColor whiteColor];
  }

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [UIViewController new];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];
  
  return YES;
}

- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
#if DEBUG
  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];
#else
  return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
#endif
}

@end

1) 앱 이름 부분을 개인 설정에 맞게 넣어줄 것

2) Bridge 파트의 변경

<기존 코드>
return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"  fallbackResource:nil];

<변경 코드>
return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];

해당 부분의 변경을 안해주면

No visible @interface for 'RCTBundleURLProvider' declares the selector 'jsBundleURLForBundleRoot:fallbackResource:'

라는 에러를 맞이하게 된다.

이미지 압축 및 s3 업로드는

정말 많이 쓰이지만 의외로 포스팅이 없어

간단히 정리해본다.

처리절차

1. 클라이언트 요청 (생략)

2. multer-s3로 aws 업로드

3. key로 s3 object를 불러와 압축 후 재 업로드

4. 기존 파일 key로 제거

1. 클라이언트 요청 (생략)

요청은 포스트맨(Postman)으로 요청,

테스트하면 됨으로 생략 (form-data 방식 활용)

2. multer-s3로 aws 업로드

express router에서 미들웨어 처리를 해줄것이다.

그전에 multer-s3 미들웨어를 만들어주자.

// aws.ts
const AWS = require('aws-sdk');
const multer = require('multer');
const multerS3 = require('multer-s3');

const aws_config = {
    accessKeyId: process.env.AWS_ACCESS_KEY,
    secretAccessKey: process.env.AWS_SECRET_KEY,
    region: 'ap-northeast-2',
    signatureVersion: 'v4',
};

export const s3 = new AWS.S3();

export const uploadImage = multer({
  storage: multerS3({
    s3,
    bucket: 'test.bucket',
    metadata: (req, file, cb) => {
      cb(null, { fieldName: file.fieldname });
    },
    key: (req, file, cb) => {
      const ext = path.extname(file.originalname);
      const timestamp = new Date().getTime().valueOf();
      const filename = 'test' + timestamp + ext;
      cb(null, filename);
    },
  }),
});

이제 사용자 요청을 받는 router부분에서

uploadImage를 미들웨어로 넣어주면 된다.

// image.router.ts
router.post('/image/upload', uploadImage.single('photo'), (req, res) => {
  ...
})

3. key로 s3 object를 불러와 압축 후 재 업로드 & 기존 파일 key로 제거

uploadImage 처리 후 req.file에서

업로드된 이미지 객체의 key를 확인할 수 있다.

이 key를 활용해 객체를 불러와

압축하여 재업로드 및 삭제를 진행할것이다.

// aws.ts
export const compressImageUploadByKey = async (key: string, width?: number) => {
  try {
    const compressedKey = `compressed_${key}`;
    const config = {
      Bucket: 'test.bucket',
      Key: key
    }
        
    let resizedConfig: any = {
      Bucket: 'test.bucket',
      Key: compressedKey
    }

    // fetch
    const imageData: any = await s3.getObject(config).promise();

    // resizing
    const imageBuffer = await sharp(imageData.Body).resize({ width: width || 640 }).toBuffer();
    resizedConfig.Body = imageBuffer;
    
    // upload
    await s3.putObject(resizedConfig).promise();

    // origin image delete
    await s3.deleteObject(config).promise();

    return compressedKey;
  } catch(error) {
    console.log('Get image by key from aws: ', error);
  }
}

불러오고, 압축하고, 업로드하고, 지우고

4가지 작업이 진행되었다.

새로 업로드된 이미지의 Key를

DB에 저장하거나 하는 작업을 

각 작업 환경에 맞게 진행하면 끝

이전 포스팅

react-native-admob/admob 가이드 (2) - admob 설정

https://honeystorage.tistory.com/336

애드몹 관련 코드는

매우 간단하다.

각 플랫폼별, 광고 유형별 ID를 세팅해주고

load / show만 상황에 맞게 제어해주면 된다.

바로 코드를 살펴보자.

가벼운 스테이지형 게임 앱이며

특정 스테이지에 접근하려면 광고를 보여주는 상황을 가정해보자.

import React from 'react';
import { TouchableOpacity, Text } from 'react-native';

type Stage = {
  stage: number;
  hasAd: boolean;
}
const Stages: Stage[] = [
  {
    stage: 1,
    hasAd: false,
  },
  {
    stage: 2,
    hasAd: true,
  },
  {
    stage: 3,
    hasAd: false,
  }
];

function StageScreen({ navigation }: any) {
  const onEnterStage = (stage, hasAd) => {
    // has ad
    ...
    
    // no ad
    ...
  }
  
  return(
    <>
      { Stages.map((stage) => (
        <StageButton
          key={`curren-stage-${ stage.stage }`}
          stageNumber={ stage.stage }
          onEnter={() => {
            onEnterStage(stage.stage, stage.hasAd);
          }}
        />
      ))}
    </>
  );
}

const StageButton = ({ stageNumber, onEnter }: { stageNumber: number; onEnter: () => void; }) => {
  return (
    <TouchableOpacity onPress={onEnter}>
      <Text>Stage - { stageNumber }</Text>
    </TouchableOpacity>
  )
}

export default StageScreen;

간단히 코드를 구성해보면 이렇게 될것이다.

기본 React 코드에

광고를 보여주고, 로드하고 하는 코드만 덧 붙여주면

코드가 완성될것같다.

그럼 바로 추가해보자.

import { useInterstitialAd } from '@react-native-admob/admob';

function StageScreen({ navigation }: any) {
  const PLATFORM_FULLPAGE_AD_ID = Platform.select({
    ios: '???',
    android: '???',
  }) || '';
  
  const { adLoaded, adDismissed, show, load } = useInterstitialAd(PLATFORM_FULLPAGE_AD_ID);
  
  useEffect(() => {
    const userVisitedToAd = adLoaded && adDismissed;
    if (userVisitedToAd) {
      // stage save
      navigation.push('MyStage');
      
      // load new ad for next time
      load();
    }
    
  }, [adLoaded, adDismissed]);
  
  const onEnterStage = (stage, hasAd) => {
    if (hasAd && adLoaded && !adDismissed) {
      show();    
    } else {
      // stage save
      navigation.push('MyStage');
    }
  }
}

코드를 잠깐 살펴보자

이전의 코드에서  Stage를 클릭하면

onEnterStage가 호출됨을 알수있었다.

onEnterStage는

해당 Stage가 광고를 제공해야 하며(hasAd)

+ 로드되 광고가 있고(adLoaded)

+ 광고를 보여준적이 없는 상태일 때(!adDismissed)

사용자에게 광고를 보여주고

그렇지 않으면 바로 스테이지로 진입시킨다.

광고가 종료되면 adDismissed가 true로 바뀐다.

useEffect를 통해 해당 state의 변화를 감지해

사용자의 이전 기대 액션을 그대로 흘러가게 해준다.

(스테이지로 진입하는)

이때, 다음번 스테이지 진입때 광고를 보여주기위해

load를 미리 해둔다.

stage save는 각 환경에 맞게

글로벌 state나 storage에

현재 스테이지의 정보를 저장하라는 것이다.

개인적인 생각으로는

너무 많은 광고를 보여주면

스팸성 앱이 될수있다.

storage에 이전 광고 시점을 저장하여

다음 광고 시점을 20분뒤, 30분뒤

수준으로 조정하는것을 추천한다.

이전 포스팅

react-native-admob/admob 가이드 (1) - 설치 및 설정

https://honeystorage.tistory.com/335

admob 적용을 위해서는

세가지 설정이 필요하다.

1. admob 설정

2. app-ads.txt 추가

3. 기타 (admob id관련 환경설정)

하나씩 따라가보자

어려운건 없다.

1. admob 설정

https://admob.google.com/

메뉴 중

앱 > 앱 추가

를 통해 플레이스토/앱스토어에 등록된(혹은 등록중인) 앱을

추가 할 수 있다.

아직 출시 전이라도 미리 등록해둔 뒤

나중에 연동할 수 있으니 등록을 진행하자.

2. app.ads.txt

설명을 보고

무슨 가이드에 따라서 만들고 등록 하고....

벙쪘었지만 사실은 매우 간단한

작업이었다.

궁시렁 궁시렁 글이 글지만

아래의 단계를 따라보자.

1. 운영중인 홈페이지가 있다.

-> https://domain/app-ads.txt 경로에 위의 코드 스니펫 복사해서 return하게 설정

2. 운영중인 홈페이지가 없다.

-> 구글 블로그의 app-ads.txt 기능을 이용해 위의 코드 스니펫 return하도록 설정

여기서 말하는 홈페이지는

앱스토어의 "앱 버전 > 지원 URL"
플레이스토어의 "스토어 설정 > 웹사이트"

에 해당한다. 도메인이 위 두 URL과 반드시 일치해야한다.

예를들어,

내가 등록한 도메인이

https://tistory.com 이라면

https://tistory.com/app-ads.txt에 접속했을때 

복사했던 코드 스니펫이 화면에 Text로 나타나야한다.

다만, 제공된 코드 스니펫만 추가하고 끝낼경우

내보낼 광고가 없어 광고가 뜨지않는 경우가 발생할 수 있다.

미디에이션 > 미디에이션 그룹 만들기에서

미디에이션을 만들고, 광고사와 제휴에 추가적으로

코드 스니펫을 획득할 수 있다.

광고사에서는

회사명/이메일/예상 광고수 등을 수집해간다.

정보를 제공하고나면 코드 스니펫을 제공해주며,

심사를 통해 제휴를 맺게된다.

제공 받은 코드 스니펫은 app-ads.txt에 추가해주면 된다.

3. ID관련 환경설정

ios, aos 모두 ID를 셋팅해주어야한다.

간단히 코드 몇줄 추가해주면된다.

아래를 보자.

// androidManifest.xml

<application
...
>
  <!-- admob -->
  <meta-data android:name="com.google.android.gms.ads.APPLICATION_ID" android:value="ca-app-pub-???~???"/>
  
  ...
</application>

// info.plist
<key>SKAdNetworkItems</key>
<array>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>cstr6suwn9.skadnetwork</string>
  </dict>
</array>
<key>GADApplicationIdentifier</key>
<string>ca-app-pub-???~???</string>

각 플랫폼의 App ID는

애드몹 좌측 메뉴 목록에서

"앱 (선택) > 앱 설정 > 앱 ID"에 나타나 있다.

4. 마지막, 광고 유형 추가

각각 목적에 맞게 앱 유형을 추가해주면되는데,

애드몹 좌측 메뉴 목록에서

"앱 (선택) > 광고 단위 > 광고 단위 추가"

를 통해 진행할 수 있다.

추가하고 나면 광고 단위별 광고ID (AD-ID)를 획득할 수 있는데

이를 코드상에 추가해주어야한다.

다음 포스팅을 통해 코드를 작성해보자.

다음 포스팅

react-native-admob/admob 가이드 (3) - 코드 작성

https://honeystorage.tistory.com/337