React Native — Code Push 2

Gale Lee

4 min readDec 5, 2020

지난 포스팅에서 Code Push 기본 설정을 했습니다. 이번 포스팅에서는 iOS 셋팅을 하겠습니다.

본 포스팅은 React Native 0.61.5 버전에서 진행했습니다.

Code Push 1 — 기본 설정

Code Push 2 — iOS 설정

Code Push 3 — Android 설정

pod install 을 실행합니다.

cd ios && pod install && cd ..

XCode를 실행합니다.

AppDelegate.m 파일을 열고 상단에 CodePush를 import 합니다.

#import <CodePush/CodePush.h>

같은 파일 안에서 아래의 코드를 찾습니다.

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

찾은 코드를 아래의 코드로 변경합니다.

{
  #if DEBUG
    return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
  #else
    return [CodePush bundleURL];
  #endif
}

App Name(GaleLee) 폴더아래에 AppCenter-Config.plist 파일을 생성합니다.

Property List 을 선택합니다.

Info.plist 파일을 열고 CodePushDeploymentKey 추가합니다. Value는 아래의 명령어를 통해 확인합니다.

code-push deployment ls 서비스 이름 -k

Staging과 Production 둘 중에 Staging 키를 사용하겠습니다.

여기까지 iOS 기본설정을 끝냈습니다~

이제 CodePush를 사용해보겠습니다. 아래 구현소스를 참고합니다.

const App = () => {codePushSync = () =>{
    codePush.sync({
      updateDialog: { //업데이트 다이얼로그 설정
        title : "새로운 업데이트가 존재합니다.",
        optionalUpdateMessage : "지금 업데이트하시겠습니까?",
        optionalIgnoreButtonLabel : "나중에",
        optionalInstallButtonLabel : "업데이트"
      },
      installMode: codePush.InstallMode.IMMEDIATE //즉시 업데이트
    });
  }useEffect(() => { //ComponentDidMount
    codePushSync();
    //앱이 켜졌을 때 마다 codePushSync() 실행해서 업데이트 체크한다.
    AppState.addEventListener("change", (state) => {
      state === "active" && codePushSync();
    });
  }, []);return (
    <>
      <SafeAreaView>
        <Text> Hello!!! </Text>
      </SafeAreaView>
    </>
  );
};export default App;

테스트는 시뮬레이터에서 Fast Refresh 기능을 끄고 진행했습니다. 개발모드에서 테스트 하시는 분은 반드시 Fast Refresh 기능을 Command+d key에서 꺼주세요!

시뮬레이터를 실행한 다음, Hello!!! 텍스트를 Hello Gale!!!로 수정합니다. 이제 CodePush 업데이트 명령어를 사용하겠습니다.

앱을 실행합니다.

React Native — Code Push 2

Written by Gale Lee