좌충우돌 개발 블로그

AdMob에서 정책을 위반하고 있다는 메일을 받았다.

그래서 정책 센터에서 자세한 내용을 살펴보니 전면 광고의 문제였다.

기존의 전면 광고 노출 시점은 스플래시 화면 -> 콘텐츠 로드 -> 전면 광고 순이었다.

코드 상으로는 스플래시 화면 다음에 바로 전면 광고가 노출되는 것이었는데

실제로는 타이밍 이슈가 있어 콘텐트가 보이고 나서 노출되고 있었다.

콘텐츠가 보이고 나서 전면 광고가 노출되는 것이

의도하지 않은 클릭을 유도하는 레이아웃이라고 판단한 것이라 생각했다.

그래서 해결하기 위해서 스플래시 화면 다음에 바로 전면 광고가 나오도록 해야할 것 같았다.

하지만 React Native에서 스플래시 화면 다음에 바로 전면 광고가 나오도록 하는 것이 어려웠다.

첫번째로 광고를 호출하는 데 걸리는 시간이 있었고

두번째로 메인 화면이 렌더링되어 노출되는 것을 막는 것이 어려웠다.

그래서 AdMob 고객 센터의 구현 지침에서 허용되지 않는 전면 광고 구현을 다시 한번 자세히 읽어보았다.

허용되지 않은 방법

해결 방법

위의 해결 방법을 자세히 보고 나서 전면 광고 노출 시점을

스플래시 화면 -> 로딩 중 -> 전면 광고 -> 콘텐츠 로드 순으로 변경했다.

변경하여 플레이 스토어에 배포를 한 다음 AdMob에 검토 요청을 했다.

검토 요청을 하는데 일주일 걸릴 수도 있다고 해서 기다리고 있었는데 금방 검토 메일이 날아왔다.

"검토한 결과 정책 위반이 발견되지 않았습니다"라는 메일을 받았다.

참고 문헌

1. https://support.google.com/admob/answer/6201362

기존에 사용하던 라이브러리로 AdMob 광고를 표시하고 있었는데

정책 위반 메일을 받아서 이를 처리할 필요가 있었다.

그래서 react-native-admob 저장소에서 문서를 읽어봤다.

isReady 메소드로 처리가 가능하겠다는 생각이 들었다.

그러다 우연히 react-native-firebase에서 AdMob 라이브러리가 생긴 것을 확인했다.

기존에 사용하던 것은 아직 beta였지만

react-native-firebase에서는 정식 버전이라 더 안정적으로 보여 변경하기로 했다.

$ npm install @react-native-firebase/admob
$ react-native link @react-native-firebase/admob

프로젝트 디렉토리에 firebase.json을 만들고 다음을 추가한다.

{
  "react-native": {
    "admob_android_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx",
    "admob_ios_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx"
  }
}

사용법은 다음과 같다.

import {
  AdEventType,
  BannerAd,
  BannerAdSize,
  InterstitialAd,
  TestIds
} from '@react-native-firebase/admob'

const interstitialAd = InterstitialAd.createForAdRequest(TestIds.INTERSTITIAL);
interstitial.onAdEvent((type) => {
    if (type === AdEventType.LOADED) {
        interstitial.show();
    }
}
interstitial.load();

<BannerAd
  unitId={TestIds.BANNER}
  size={BannerAdSize.SMART_BANNER}
  requestOptions={{
    requestNonPersonalizedAdsOnly: true,
  }}
  onAdLoaded={() => {
    console.log('Advert loaded');
  }}
  onAdFailedToLoad((error) => {
    console.error('Advert failed to load: ', error);
  })
/>

참고 문헌

1. https://github.com/invertase/react-native-firebase/tree/master/packages/admob

Javascript 라이브러리를 만든 후 버전별로 빌드할 필요가 생겼다.

alpha/beta/release 이렇게 빌드를 하려고 했는데 생각처럼 되지 않아 시행착오를 여러 번 겪었다.

Grunt와 Webpack을 사용하여 빌드하고 있는데

Webpack은 env 파라미터에서 버전 정보를 받아서 빌드하도록 했다.

또한 버전별로 주소가 바뀌는 값이 있어 이를 동적으로 처리하기 위해 DefinePlugin을 이용했다.

Javascript에서 DefinePlugin에 정의된 키가 해당 값으로 자동으로 변경되어 빌드된다.

여기서 값을 설정할 때 중요한 것이 JSON.stringify로 값을 감싸줘야 제대로 동작한다.

webpack.config.js는 다음과 같이 작성하며 된다.

const webpack = require('webpack');
const path = require('path');
const config = require('./config.json');

module.exports = env => {
    if (!env || !env. VERSION) {
        env = {
            ...env,
            VERSION: 'release'
        };
    }
    const filename = env. VERSION === 'release' ? 'main.min.js' : `${env. VERSION}-main.min.js`;

    return {
        entry: './src/index.ts',
        target: 'node',
        mode: 'production',
        module: {
            rules: [
                ...
            ]
        },
        resolve: {
            extensions: [ '.ts', '.js' ]
        },
        plugins: [
            new webpack.DefinePlugin({
                SPECIFIC_URL: JSON.stringify(config.contexts[env.VERSION].SPECIFIC_URL)
            })
        ],
        output: {
            filename: filename,
            path: path.resolve(__dirname, 'dist')
        }
    };
};

다음과 같이 실행하면 된다.

$ webpack --env.VERSION=release

그리고 한번에 버전별로 빌드하기 위해 Grunt를 사용했다.

버전이 추가되도 자동으로 동작할 수 있도록 reduce를 이용했다.

다음과 같이 작성하여 사용하고 있다.

const path = require('path');
const webpackConfig = require('./webpack.config.js');
const versions = ['alpha', 'beta', 'release'];

module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        webpack: versions.reduce((obj, version) => {
            const app = version === 'release' ? 'app' : `${version}-app`;
            obj[app] = webpackConfig({VERSION: version});
            return obj;
        }, {})
    });

    grunt.loadNpmTasks('grunt-webpack');

    grunt.registerTask('default', ['webpack']);
};

참고 문헌

1. https://webpack.js.org/guides/environment-variables/

2. https://webpack.js.org/plugins/define-plugin/

Sidecar 기능을 이용해보려고 Catalina로 업그레이드를 했다.

하지만 갖고 있는 기기인 iPad mini 4는 지원 대상이 아니었다.

그리고 Emacs도 사용하기가 살짝 까다로워졌다.

이유는 폴더 접근 권한 때문인데 Emacs에서 폴더 접근 권한을 줄 수 없어

특정 폴더의 파일들을 읽을 수 가 없었다.

문서 폴더에 workspace를 만들어서 사용하고 있는데 해당 폴더에 접근을 할 수 없었다.

이를 해결하기 위해 시스템 환경설정 > 보안 및 개인 정보 보호 > 개인 정보 보호 탭에서

전체 디스크 접근 권한을 허용했지만 접근을 할 수 없었다.1

그리고 어떤 분이 해결책이라고 올려준 fix-emacs-permissions-catalina.el를 해봤지만

마찬가지로 문서 폴더에 접근할 수 없었다.

그래서 이제 Emacs를 못쓰는 건가 하다가 XEmacs, Aquamacs를 설치해보기로 했다.

XEmacs는 버전이 좀 오래되기도 하고 Aquamacs가 좀더 유려해 보여 Aquamacs를 설치해보니

문서 폴더에도 접근이 잘 되어 Aquamacs를 사용하기로 결정했다.

기존에 사용하던 기능들 대부분을 쓸 수 있었지만 iedit을 더이상 쓸 수가 없었다.

왜냐면 iedit 기능을 시작할 때 C-;를 입력해야 하는데 해당 커맨드가

Option 키를 메타키로 지정/해제하는 커맨드로 돼있었기 때문이다.

그래서 multiple-cursors를 이용하여 iedit을 대체하여 사용하고 있다.

참고 문헌

1. https://emacs.stackexchange.com/questions/53026/how-to-restore-file-system-access-in-macos-catalina

2. https://gist.github.com/dive/f64c645a9086afce8e5dd2590071dbf9

3. https://github.com/magnars/multiple-cursors.el