평생 공부만 해야할듯

공식 홈페이지 입니다.

https://docs.microsoft.com/ko-kr/appcenter/distribution/codepush/rn-get-started

CodePush 를 사용하기 위해 아래의 명령어를 입력하여 의존성을 추가합니다.

ReactNative 루트 경로에서 아래와 같은 명령어를 입력합니다.

npm install --save react-native-code-push

1. CocoaPods dependencies 설치

아래 명령어를 실행하여 CocoaPods dependencies를 설치 합니다.

cd ios && pod install && cd ..

2. AppDelegete.m 헤더 추가

AppDelegete.m 파일에서 아래 헤더 파일을 import 합니다.

#ifdef FB_SONARKIT_ENABLED 라인 위에 아래의 헤더파일을 추가합니다.

#import <CodePush/CodePush.h>

3. sourceURLForBridge 수정

Release 모드에서 원본 URL을 설정하는 코드를 찾습니다.

return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];

위에 코드를 아래 코드로 변경합니다.

CodePush bundleURL로 변경함으로써 최신 버전의 앱 JS 번들을 로드합니다.

return [CodePush bundleURL];

sourceURLForBridge 함수 코드는 아래와 같습니다.

- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
#if DEBUG
  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
#else
  return [CodePush bundleURL];
#endif
}

4. Info.plist 설정

CodePushDeploymentKey를 추가 합니다.

<key>CodePushDeploymentKey</key>
<string>DeploymentKey</string>

이와같은 설정으로 CodePush를 사용할 수 있는 기본적인 설정이 되었습니다.

공식 홈페이지 입니다.

https://docs.microsoft.com/ko-kr/appcenter/distribution/codepush/rn-get-started

CodePush 를 사용하기 위해 아래의 명령어를 입력하여 의존성을 추가합니다.

ReactNative 루트 경로에서 아래와 같은 명령어를 입력합니다.

npm install --save react-native-code-push

1. settings.gradle 설정

android/settings.gradle 파일에 다음과 같이 추가 합니다.

include ':app', ':react-native-code-push'
project(':react-native-code-push').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-code-push/android/app')

아래의 위치에 추가를 진행합니다.

2. build.gradle 설정

android/app/build.gradle 파일에 다음과 같이 추가 합니다.

...
apply from: "../../node_modules/react-native/react.gradle"
apply from: "../../node_modules/react-native-code-push/android/codepush.gradle"
...

아래의 위치에 추가를 진행합니다.

3. MainApplication.java 설정

ReactNativeHost getJSBundleFile 메서드를 Override하여 아래처럼 작성해줍니다.

...
// 1. Import the plugin class.
import com.microsoft.codepush.react.CodePush;
public class MainApplication extends Application implements ReactApplication {
    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        ...
        // 2. Override the getJSBundleFile method to let
        // the CodePush runtime determine where to get the JS
        // bundle location from on each app start
        @Override
        protected String getJSBundleFile() {
            return CodePush.getJSBundleFile();
        }
    };
}

4. strings.xml 설정

CodePushDeploymentKey 값을 추가하여 배포 키를 추가 합니다.

Staging, Production 키를 넣으면 됩니다.

<resources>
     <string name="app_name">AppName</string>
     <string moduleConfig="true" name="CodePushDeploymentKey">DeploymentKey</string>
 </resources>

AppCenter의 Analytics와 Crashes를 사용하면 아래처럼 추가하면 됩니다.

<string name="appCenterCrashes_whenToSendCrashes" moduleConfig="true" translatable="false">DO_NOT_ASK_JAVASCRIPT</string>
<string name="appCenterAnalytics_whenToEnableAnalytics" moduleConfig="true" translatable="false">ALWAYS_SEND</string>

이와같은 설정으로 CodePush를 사용할 수 있는 기본적인 설정이 되었습니다.

ReactNative의 장점은 CodePush 로 앱을 심사없이 없데이트 할 수 있다는 것 인데요.

지금부터 CodePush 설정을 진행해보려고 합니다.

1. AppCenter 계정만들기

AppCenter 회원가입을 진행합니다.

GitHub계정이나 , Google, Facebook 계정으로도 등록이 가능합니다.

https://appcenter.ms/

2. 설치

CodePush 명령을 사용하려면 appcenter-cli를 설치해야 합니다.

아래의 명령어를 통해 설치를 진행합니다.

npm install -g appcenter-cli

CodePush라는 샘플 프로젝트를 만들어보겠습니다.

npx react-native init CodePush

생성된 프로젝트로 진입합니다.

cd CodePush/

CodePush 프로젝트에서 아래의 명령어를 통해 depenency를 추가 합니다.

npm install --save react-native-code-push

3. AppCenter 로그인

appcenter-cli를 사용하여 AppCenter와 연동을 합니다.

appcenter login

아래처럼 별도의 브라우저가 띄워지면서 인증토큰을 보여줍니다.

아래의 'Enter your token from the browser:' 란에 token을 붙여넣습니다.

유효한 token을 입력하였다면 아래와같이성공 메시지가 출력됩니다.

Logged in as bonjin

4. AppCenter App등록

AppCenter에 App을 등록하겠습니다.

android, ios 를 구분하여 등록을 하면 되고 예시는 아래와 같습니다.

appcenter apps create -d <appDisplayName> -o <operatingSystem>  -p <platform>

각 앱 이름 뒤에 ios, android 를 붙여주어 구분하는게 좋기 때문에 CodePush-iOS라는 이름으로 생성해보겠습니다.

appcenter apps create -d CodePush-Android -o Android -p React-Native
appcenter apps create -d CodePush-iOS -o iOS -p React-Native

정상적으로 App등록이 되었다면 아래처럼 등록정보를 출력해줍니다.

여기서 Owner ID, Name 항목을 활용하여 배포키를 만들어줍니다.

기존 CodePush 앱은 자동으로 Staging, Production 키를 만들어 주었지만 AppCenter에서는 직접 생성을 해줘야 합니다.

appcenter codepush deployment add -a <ownerName>/<appName> Staging
appcenter codepush deployment add -a <ownerName>/<appName> Production

아래 명령어를 통해 키를 발급받습니다.

appcenter codepush deployment add -a bonjin/CodePush-iOS Staging
appcenter codepush deployment add -a bonjin/CodePush-iOS Production

등록된 키는 code-push-cli를 통해 확인이 가능합니다.

# appcenter 명령어로 확인하는 방법은 찾고 업데이트 하겠습니다 #

code-push deployment ls CodePush-iOS -k

AppCenter에 등록된 앱을 확인합니다.

appcenter apps list

node.js 배포를 위해 Heroku 클라우드를 활용하려고 합니다.

우선 Heroku사이트로 이동해 회원가입을 진행해야 합니다.

https://www.heroku.com/home

SIGN UP FOR FREE 버튼을 클릭합니다.

항목을 채워줍니다.

입력한 email로 확인 메일이 전송되었습니다.

이메일에 로그인하여 들어가보면 아래처럼 Heroku에서 인증링크를 보내주었는데요.

링크를 클릭하여 인증을 진행하겠습니다.

새로운 사이트가 열리면서 비밀번호를 입력하는 화면이 보여집니다.

비밀번호를 입력해줍니다.

회원가입이 완료되었다는 화면이 보여지게됩니다.

CLICK HERE TO PROCEED 버튼을 클릭합니다.

로그인을 했을때 아래처럼 약관이 보여지게 되고 Accept 버튼을 클릭합니다.

Dashboard화면이 보인다면 준비가 완료된겁니다.

이제 새로운 app을 만들 준비가 되었습니다.

다음 글에서는 새로운 app을 만들어보겠습니다.

GitHub에 private 프로젝트를 만들었습니다.

열심히 커밋을 하면서 '1일 1commit 해야지!'라고 마음을 잡아가면서 프로젝트 정리를 하고 있었는데요.

매일 깔리는 잔디를 보면서 지내고 있었지만 동료들과 서로의 GitHub를 돌아다니면서 저의 잔디의 빈곳이 보였습니다.

분명 제가 볼때는 채워져 있는곳이 동료들이 보는 화면에서는 비어보이는겁니다.

여러가지 확인한 결과 private repository가 보이지 않고 있다는 부분을 확인할 수 있었습니다.

로그인을 했을때에는 아래처럼 640개의 contributions가 존재하고 있습니다.

하지만 로그인을 하지 않을때에는 570개의 contributions가 존재하고 있는데요.

private repository의 contributions도 보이도록 수정할 수 있다는것을 알게 되었습니다.

contributions를 visibility 설정하는 방법을 알아보겠습니다.

1. GitHub에 로그인 합니다.

2. 오른쪽 상단에서 프로필 사진을 클릭한 다음 Your profile 메뉴를 클릭합니다.

3. Contribution settins 드롭다운 메뉴를 클릭합니다.

Private contributions 항목을 선택합니다.

설명은 아래와 같습니다.

Private contributions

비공개 제공을 켜면 프로필에 익명의 비공개 활동이 표시됩니다.

Activity overview

활동 개요를 켜면 조직 및 저장소 전반에 걸친 활동의 개요가 표시됩니다.

정상적으로 처리가 되었다면 'Visitors will now see your public and anonymized private contributions.' 라는 알림이 보여지게 됩니다.

이제 로그인을 하지 않는 상태에서 GitHub에 접속을 해보겠습니다.

기존 570개의 contributions에서 640개의 contributions로 변경되어 보여지는걸 확인할 수 있습니다.

이제 비공개 프로젝트도 자유롭게 진행하면서 멋진 잔디를 깔아 보세요!

이전 글에서 Apple Push Services 인증서 발급을 진행했습니다.

이번 글에서는  APNs 키 발급을 진행하보겠습니다.

기본적으로 Apple 개발자 프로그램이 가입된 기준으로 작성됩니다.

APNs 키 발급.

키를 발급하기 위해 Keys 메뉴에서 + 버튼이나 'Create a Key' 버튼을 클릭합니다.

Key의 이름은 push notifications service key 로 작성했지만 편한 이름으로 작성하시면 됩니다.

Apple Push Notifications service (APNs) 항목을 선택하고 'Continus' 버튼을 클릭합니다.

선택된 항목을 확인후 'Register' 버튼을 클릭합니다.

정상적으로 등록이 되어지면 아래처럼 보여지게 됩니다.

다운로드를 하면 Apple 에서는 더이상 다운로드를 지원하지 않기 때문에 안전한 곳에 저장을 해두어야 합니다.

이전 글에서 App ID의 Push Notification 활성화를 했습니다.

이번 글에서는  Apple Push Services 인증서 발급을 진행하보겠습니다.

https://gigas-blog.tistory.com/248

Apple Push Services 인증서 발급.

Apple Push Services 인증서를 발급하기 위해 Certificates 메뉴에서 + 버튼을 클릭합니다.

Apple Push Notification service SSL 항목을 선택합니다.

등록된 App ID중 인증서를 적용할 App ID를 선택합니다.

인증서를 생성하려면 Mac에서 생성한 CSR 파일이 필요하다고 나옵니다.

기존에 있다면 업로드 하면 되고 없다면 새로 생성해야합니다.

아래 글을 통해 키체인 인증서를 생성 후 진행해주세요.

gigas-blog.tistory.com/247

키체인 인증서를 업로드 하고 'Continue' 버튼을 클릭합니다.

키체인 인증서의 문제가 없다면 아래와같이 Apple Push Services 인증서가 생성됩니다.

'Download' 버튼을 클릭하여 파일을 저장합니다.

다운받아진 aps.cer 인증서 파일을 클릭하여 Mac OS X 의 키체인 목록에 추가합니다.

정상적으로 되었는지 확인하려면 Apple Developer의 Certificates 목록에 TYPE이 Apple Push Services으로 되었는지 확인하면 됩니다.

iOS 기기에서 푸시알림 기능을 추가 하려면 APNs 설정을 해야 합니다.

APNs(Apple Push Notification Service)는 애플 개발자 화면에서 인증서와 키를 생성해야 사용할 수 있습니다.

이번 글에서는 사용할 App ID의 Push Notification 기능을 활성화 해보겠습니다.

기본적으로 Apple 개발자 프로그램이 가입된 기준으로 작성됩니다.

App ID의 Push Notification 체크.

Apple Developer 로그인을 합니다.

developer.apple.com/account

Certificates, Identifiers & Profiles 로 진입합니다.

Identifiers 메뉴에서 푸쉬를 사용하려는 항목을 선택합니다.

등록되어있는 identifier가 없다면 새로 등록을 진행합니다.

상황에 맞는 IDs를 선택하면 되며, 일반적으로 진행한다면 App IDs를 그대로 두고 Continue 버튼을 클릭합니다.

이번 화면에서도 기본 App 인 상태로 Continue 버튼을 클릭합니다.

항목을 선택할때와 새로운 앱을 등록할 때 동일한 화면이 보여지고, 하단으로 내려가면 Push Notifications 체크 항목이 보여집니다.

해당 항목을 체크하고 'Save' or 'Continue' 버튼을 클릭하여 저장하면 Push Notifications 가 활성화 됩니다.

MacOS X를 사용하면서 Parallels를 사용해 Windows10을 사용하고 있었습니다.

그러나 MacOS X를 업그레이드 하면서 기존에 사용하던 Parallels 버전을 사용할 수 없어서 Oracle사의 VirtualBox를 사용하려고 했습니다.

막상 설치하고 windows10.iso 이미지를 설정하여 VirtualBox 를 실행했지만 아래처럼 오류가 발생했습니다.

알림창으로 Kernel driver not installed (rc=-1908) 이라는 오류를 표시해주는데요.

MacOS X의 커널을 로딩하지 못해서 오류가 발생한거라고 합니다.

MacOS X에서 Oracle 접근 설정을 하면 VirtualBox에서 커널을 로딩할 수 있습니다.

권한을 주기 위해 MacOS X의 시스템 환경설정을 실행합니다.

'보안 및 개인 정보 보호' 메뉴로 진입합니다.

자물쇠를 클릭하여 비밀번호를 입력후 비활성화 되어있는 항목들을 활성화 시킵니다.

개발자 'Oracle America, Inc.'의 시스템 소프트웨어가 차단되어 로드할 수 없습니다. 항목 오른쪽에 '허용' 버튼을 클릭합니다.

새로운 시스템 확장 프로그램을 사용하기 전에 재시동해야 합니다.

작업중이던 프로그램을 종료하고 '재시동'버튼을 클릭합니다.

재시동 후 다시 VirtualBox를 실행하면 문제없이 실행되는것을 볼 수 있습니다.

아직도 Windows OS 를 사용해야 한다는게 불편하지만 이렇게 VirtualBox를 통해서 간단한 작업을 진행하고 있습니다.

노트북 용량도 적은데 작업을 마치고 다시 삭제해야겠네요 :)

광고 식별자 IDFA - ID for Advertisers는 Apple에서 사용자의 기기에 할당한 임의 기기 식별자 입니다.

Google은 광고 식별자 ADID - Advertising ID 를 사용하고 있지요.

각 광고 식별자를 통해 기기에 할당한 임의의 식별자로 사용자를 식별하고 맞춤형 광고를 제공할 수 있습니다.

iOS 14 이전 버전에서는 별다른 권한없이 IDFA 값을 가질 수 있었습니다.

하지만 iOS 14 버전 이상에서는 사용자를 추적할 권한을 요청하도록 처리 해야 합니다.

광고 식별자추적 권한을 요청하는 방법을 알아보겠습니다.

https://support.apple.com/ko-kr/HT212025

1. Framework 추가.

Xcode 프로젝트를 만든 뒤 Target -> General -> Frameworks, Libraries, and Embedded Content 로 진입합니다.

+ 를 클릭하여 AppTrackingTransparency.framework 를 추가합니다.

AppTrackingTransparency.framework 는 iOS 14 이상부터 사용이 가능합니다.

2. Privacy 항목 추가.

info.plist의 key 항목에 Privacy - Tracking Usage Description을 추가 합니다.

애플 공홈에 나와있는 내용 Your data will be used to measure advertising efficiency.를 Value 항목에 넣겠습니다.

3. 권한 요청.

이제 ViewController.swift 로 돌아와 권한 요청을 위한 코드를 작성하겠습니다.

requestTrackingAuthorization 함수를 추가 하였고 iOS 14 버전 이상일 때만 권한 요청을 하도록 추가 했습니다.

요청 후 아래처럼 AuthorizationStatus 를 전달하고 있습니다.

authorized: 승인 

denied: 거부

notDetermined: 결정되지 않음

restricted: 제한

각 상태에 맞게 처리를 하면 됩니다.

import UIKit
import AppTrackingTransparency

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        
        requestTrackingAuthorization()
    }
    
    func requestTrackingAuthorization() {
        if #available(iOS 14, *) {
            ATTrackingManager.requestTrackingAuthorization { (status) in
                switch status {
                case .authorized:
                    print("authorized")
                case .denied:
                    print("denied")
                case .notDetermined:
                    print("notDetermined")
                case .restricted:
                    print("restricted")
                }
            }
        }
    }
}

위처럼 작성하고 정상적으로 Build가 되었다면 아래처럼 보여지게 됩니다.

설정에서 설치된 앱을 선택하여 '추적 허용'을 취소 하거나 다시 허용을 할 수 있습니다.