평생 공부만 해야할듯

이전글에서 ReactNative Plugin 사용방법과 CodePush Option을 알아보았습니다.

이번글에서는 코드를 변경한 후에 릴리즈 하는 방법을 알아보겠습니다.

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

기본적인 Release는 아래의 형식으로 이루어져 있습니다.

appcenter codepush release-react -a <ownerName>/<appName>

#1번 글에서 CodePush-Android, CodePush-iOS 프로젝트를 만들었는데요. 그렇다면 아래와 같이 작성하면 됩니다.

appcenter codepush release-react -a bonjin/CodePush-iOS
appcenter codepush release-react -a bonjin/CodePush-Android

AppCenter 홈페이지에 보여지는 내용입니다.

appcenter codepush 명령시 아래의 옵션을 지정할 수 있습니다.

[-v]

해당 옵션을 추가하여 version을 지정할 수 있습니다.

[--description] 

해당 옵션을 추가하여 Description 내용을 추가할 수 있습니다.

[-x]

해당 옵션을 추가하여 Disabled 처리할 수 있습니다.

[-r]

해당 옵션을 추가하여 rollout 을 설정할 수 있습니다.

[-m]

해당 옵션을 추가하여 Required Update 옵션을 활성화 할 수 있습니다.

다양한 옵션들은 appcenter cli 문서를 통해 확인할 수 있습니다.

https://docs.microsoft.com/ko-kr/appcenter/distribution/codepush/cli#releasing-updates-react-native

이로써 React Native프로젝트에 CodePush 기능을 적용해봤습니다.

CodePush의 기본적인 설정으로 만들어진 프로젝트는 GitHub에 공유 되어있습니다.

https://github.com/bonjin-app/ReactNative/tree/main/SideProject/CodePush

#1 번글에서 CodePush 라이브러리를 추가 했습니다.

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

네이티브에서의 설정을 마쳤으니 이번글에서는 ReactNative Plugin을 사용해보도록 하겠습니다.

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

# 간단한 사용 방법

간단하게 CodePush 설정을 한다면 아래와 같이 진행합니다.

기본 옵션으로는 앱 시작시 업데이트를 확인합니다. 업데이트가 완료되면 다음번에 앱 실행시 자동으로 다운로드되고 설치 됩니다. 만약 Required Update 옵션이 켜져 있다면 즉시 설치됩니다.

1. codePush로 래핑

App 컴포넌트를 codePush로 랩핑합니다.

이렇게 한줄만 추가해주면 기본적인 옵션으로 codePush가 동작됩니다.

import React from 'react'
import { View, Text } from 'react-native'
import codePush from 'react-native-code-push'

const App = () => {
    return (
        <View style={{
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center',
        }}>
            <Text>App</Text>
        </View>
    )
}

export default codePush(App)

2. ES7 데코레이터 구문

두번째로는 @codePush 구문을 추가로 위와같은 동작을 합니다.

import React from 'react'
import { View, Text } from 'react-native'
import codePush from 'react-native-code-push'

@codePush
const App = () => {
    return (
        <View style={{
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center',
        }}>
            <Text>App</Text>
        </View>
    )
}

export default App

# CodePush Option

CodePush에는 다양한 옵션이 있습니다. 

https://docs.microsoft.com/ko-kr/appcenter/distribution/codepush/rn-api-ref

- CheckFrequency

이 옵션은 AppCenter 서버와 동기화할 시기를 지정합니다.

1. codePush.CheckFrequency.ON_APP_START (0)

앱 프로세스가 시작될 때마다 업데이트를 확인합니다.

(기본옵션으로 일반적으로 많이 사용합니다.)

2. codePush.CheckFrequency.ON_APP_RESUME (1)

앱이 백그라운드에서 포그라운드로 진입시 업데이트를 확인합니다.

(보통 이 옵션은 사용자가 사용중에 갑자기 업데이트를 하기 때문에 잘 사용하지 않습니다.)

3. codePush.CheckFrequency.MANUAL (2)

업데이트에 대한 자동 확인을 사용하지 않도록 설정합니다. 별도로 codePush.sync()를 호출하여 업데이트를 확인합니다.

(별도 업데이트 체크를 하고 Custom Dialog, Progress를 제어 할때 사용합니다.)

- InstallMode

업데이트가 설치되고 앱에 적용할 시기를 지정합니다.

1. codePush.InstallMode.IMMEDIATE (0)

업데이트가 완료되면 즉시 앱을 다시 시작합니다.

2. codePush.InstallMode.ON_NEXT_RESTART (1) 

업데이트가 완료되고 다음에 앱을 시작할 때 업데이트가 적용됩니다.

3. codePush.InstallMode.ON_NEXT_RESUME (2)

업데이트가 완료되고 백그라운드에서 포그라운드로 진입시 업데이트가 적용됩니다.

4. codePush.InstallMode.ON_NEXT_SUSPEND (3)

백그라운드에 있는 동안에만 업데이트를 설치합니다.

minimumBackgroundDuration 옵션으로 몇 초 후에만 설치할 것을 지정합니다. (기본값 0)

- updateDialog

updateDialog와 Custom Dialog는 별도의 글로 작성할 예정입니다.

ReactNative 코드에서 CodePush Option은 아래와 같이 넣을 수 있습니다.

import React from 'react'
import { View, Text } from 'react-native'
import codePush from 'react-native-code-push'

const App = () => {
    return (
        <View style={{
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center',
        }}>
            <Text>CodePush</Text>
        </View>
    )
}

const codePushOptions = {
	// 옵션 적용 범위
    codePush.CheckFrequency.ON_APP_START,
    codePush.InstallMode.IMMEDIATE,
    ...
}

export default codePush(codePushOptions)(App)

간단하게 CodePush Plugin 사용방법을 알아보았습니다.

React Native에서 gif 로딩 이미지를 사용하려고 합니다.

iOS에서는 별다른 설정없이 Image 컴포넌트를 사용하여 gif 파일을 로드할 수 있는데요.

Android에서는 기본적으로 gif 파일을 지원하지 않기 때문에 별도의 모듈을 추가 해야 합니다.

# 소개

Fresco는 Android를 위해 이미지를 표시하는 강력한 시스템입니다.

메모리와 로컬 저장소를 사용하여 캐쉬처리를 하는것 외에도 많은 기능을 포함하고 있습니다.

https://fresco.recrack.com/

# 모듈 적용

공식 홈페이지에서 아래와 같은 선택적 모듈을 지원하고 있습니다.

https://reactnative.dev/docs/image#gif-and-webp-support-on-android

Android OS 4.0 (API Level 14) 이하 버전을 지원하는것과, WebP 지원여부에 따라 모듈을 추가하면 됩니다.

dependencies {
  // If your app supports Android versions before Ice Cream Sandwich (API level 14)
  implementation 'com.facebook.fresco:animated-base-support:1.3.0'

  // For animated GIF support
  implementation 'com.facebook.fresco:animated-gif:2.5.0'

  // For WebP support, including animated WebP
  implementation 'com.facebook.fresco:animated-webp:2.5.0'
  implementation 'com.facebook.fresco:webpsupport:2.5.0'

  // For WebP support, without animations
  implementation 'com.facebook.fresco:webpsupport:2.5.0'
}

제가 사용하는 프로젝트는 단순 gif를 로드하기 때문에 [implementation 'com.facebook.fresco:animated-gif:2.5.0']를 추가했습니다.

구글에서 search하여 다양한 글들이 나와있지만 fresco를 따로 추가한다거나 잘못된 방식이 많았습니다.

위와같이 한줄만 추가하여도 아래와같은 모듈들이 추가되어있으니 참고하면 됩니다.

이렇게 모듈을 추가하면 Android 업데이트를 해야하니 프로젝트 생성시 추가해주는것을 추천합니다.