🔀 코드푸시 적용하기

.gitignore

@@ -69,4 +69,7 @@ ios/tmp.xcconfig
 
 #fcm
 ios/GoogleService-Info.plist
-android/app/google-services.json
+android/app/google-services.json
+
+#code-push
+android/app/src/main/assets/appcenter-config.json

App.tsx

@@ -18,16 +18,17 @@ import {
   Text,
   TextInput,
 } from 'react-native';
+import CodePush, { CodePushOptions } from 'react-native-code-push';
 import ErrorBoundary from 'react-native-error-boundary';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import SplashScreen from 'react-native-splash-screen';
 import { MyTheme, colors } from 'styles/theme';
 
 // dayjs setting
+import DialogPortalProvider from 'components/common/dialogs/DialogPortalProvider';
 import dayjs from 'dayjs';
 import 'dayjs/locale/ko';
 import { useAuthorizeStore } from 'stores/Authorize';
-import DialogPortalProvider from 'components/common/dialogs/DialogPortalProvider';
 
 dayjs.locale('ko');
 
@@ -121,4 +122,14 @@ interface TextInputWithDefaultProps extends TextInput {
 ).defaultProps!.allowFontScaling = false;
 (TextInput as unknown as TextInputWithDefaultProps).defaultProps!.padding = 0;
 
-export default App;
+const codePushOptions: CodePushOptions = {
+  checkFrequency: CodePush.CheckFrequency.MANUAL,
+  // 언제 업데이트를 체크하고 반영할지를 정한다.
+  // ON_APP_RESUME은 Background에서 Foreground로 오는 것을 의미
+  // ON_APP_START은 앱이 실행되는(켜지는) 순간을 의미
+  installMode: CodePush.InstallMode.IMMEDIATE,
+  mandatoryInstallMode: CodePush.InstallMode.IMMEDIATE,
+  // 업데이트를 어떻게 설치할 것인지 (IMMEDIATE는 강제설치를 의미)
+};
+
+export default CodePush(codePushOptions)(App);

android/app/build.gradle

@@ -1,5 +1,6 @@
 apply plugin: "com.android.application"
 apply plugin: "com.facebook.react"
+apply from: "../../node_modules/react-native-code-push/android/codepush.gradle"
 
 import com.android.build.OutputFile
 

android/app/src/main/java/com/opener/openoff/MainApplication.java

@@ -8,6 +8,7 @@
 import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint;
 import com.facebook.react.defaults.DefaultReactNativeHost;
 import com.facebook.soloader.SoLoader;
+import com.microsoft.codepush.react.CodePush;
 import java.util.List;
 
 public class MainApplication extends Application implements ReactApplication {
@@ -42,6 +43,11 @@ protected boolean isNewArchEnabled() {
         protected Boolean isHermesEnabled() {
           return BuildConfig.IS_HERMES_ENABLED;
         }
+
+        @Override
+        protected String getJSBundleFile() {
+            return CodePush.getJSBundleFile();
+        }
       };
 
   @Override

android/app/src/main/res/values/strings.xml

@@ -3,4 +3,7 @@
     <string name="kakao_app_key">@string/REACT_APP_KAKAO_APP_KEY</string>
     <string name="logo">logo</string>
     <string name="splash_app_name">OPEN;OFF</string>
+    <string name="CodePushDeploymentKey" moduleConfig="true" translatable="false">@string/REACT_APP_ANDROID_CODE_PUSH_APP_KEY</string>
+    <string name="appCenterCrashes_whenToSendCrashes" moduleConfig="true" translatable="false">DO_NOT_ASK_JAVASCRIPT</string>
+    <string name="appCenterAnalytics_whenToEnableAnalytics" moduleConfig="true" translatable="false">ALWAYS_SEND</string>
 </resources>

android/app/src/main/res/values/styles.xml

@@ -4,6 +4,7 @@
     <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
         <!-- Customize your theme here. -->
         <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
+        <item name="android:windowIsTranslucent">true</item>
     </style>
     <style name="SplashScreenTheme" parent="SplashScreen_SplashTheme">
         <item name="colorPrimaryDark">@color/status_bar_color</item>

android/settings.gradle

@@ -7,4 +7,7 @@ include ':react-native-config'
 project(':react-native-config').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-config/android')
 
 include ':react-native-splash-screen'   
-project(':react-native-splash-screen').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-splash-screen/android')
+project(':react-native-splash-screen').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-splash-screen/android')
+
+include ':app', ':react-native-code-push'
+project(':react-native-code-push').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-code-push/android/app')

ios/OpenOff/AppCenter-Config.plist

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "https://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+    <dict>
+    <key>AppSecret</key>
+    <string>{APP_SECRET_VALUE}</string>
+    </dict>
+</plist>

ios/OpenOff/AppDelegate.mm

@@ -4,6 +4,11 @@
 #import <React/RCTBundleURLProvider.h>
 
 #import <RNKakaoLogins.h>
+#import <CodePush/CodePush.h>
+#import <AppCenterReactNativeShared/AppCenterReactNativeShared.h>
+#import <AppCenterReactNative.h>
+#import <AppCenterReactNativeAnalytics.h>
+#import <AppCenterReactNativeCrashes.h>
 
 @implementation AppDelegate
 
@@ -12,7 +17,11 @@ - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(
   if ([FIRApp defaultApp] == nil) {     
     [FIRApp configure];
   }
-
+  [AppCenterReactNativeShared setStartAutomatically:YES];
+  [AppCenterReactNativeShared setAppSecret:@"{APP_SECRET_VALUE}"];
+  [AppCenterReactNative register];
+  [AppCenterReactNativeAnalytics registerWithInitiallyEnabled:true];
+  [AppCenterReactNativeCrashes registerWithAutomaticProcessing];
   self.moduleName = @"OpenOff";
   // You can add your custom initial props in the dictionary below.
   // They will be passed down to the ViewController used by React Native.
@@ -26,7 +35,7 @@ - (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
 #if DEBUG
   return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];
 #else
-  return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
+  return [CodePush bundleURL];
 #endif
 }
 

package.json

@@ -39,6 +39,9 @@
     "@svgr/webpack": "8.0.1",
     "@tanstack/react-query": "4.32.0",
     "@types/axios": "^0.14.0",
+    "appcenter": "5.0.0",
+    "appcenter-analytics": "5.0.0",
+    "appcenter-crashes": "5.0.0",
     "axios": "^1.4.0",
     "dayjs": "1.11.9",
     "lodash": "4.17.21",
@@ -47,6 +50,7 @@
     "react-hook-form": "^7.45.1",
     "react-native": "0.71.4",
     "react-native-calendars": "^1.1299.0",
+    "react-native-code-push": "^8.0.2",
     "react-native-config": "^1.5.1",
     "react-native-date-picker": "^4.2.13",
     "react-native-error-boundary": "1.2.3",