Code Push 적용기 in React Native 0.74 - (1) 우선은 Microsoft App Center 연결부터

Codepush.. 할 줄 알아야 해요?

React Native 관련 채용 공고를 보면 열에 다섯은 보이는 내용이 한 가지 있다.

CodePush 등을 이용한 효율적인 배포 관리 경험이 있는 분

CodePush 등을 이용한 배포 관리 경험을 보유하신 분

CodePush 사용경험

생각해보니 React Native으로 앱 기능을 구현한 경험은 있는데 앱 배포 담당이 따로 있던 탓에 Code Push를 사용해 본 경험이 없었다.
그래서, 이 기회에 Code Push를 적용해서 앱 배포 및 관리를 해보는 과정을 작성해보기로 했다.

Code Push가 근데 뭔가요?

CodePush는 React Native 개발자가 모바일 앱 업데이트를 사용자의 디바이스에 직접 배포할 수 있도록 하는 App Center 클라우드 서비스이다.
보통 앱을 배포할 때에는 항상 Android나 iOS 모두 심사를 거쳐서 업데이트 내용을 배포해야 하는데, 이 경우 시간이 오래 소요된다.

하지만 UI 요소나 스타일링, JavaScript, 이미지 등의 요소들만을 수정한 것뿐이라면 Code Push SDK를 이용해 앱 심사를 거치지 않고 사용자의 앱에 바로 배포할 수 있다.
또한, 이렇게 배포한 사항들을 배포 단계 및 빌드 버전으로 나누고 관리할 수 있다는 점도 큰 특징이다.

다만, 여기서부터는 좀 중요한데 이 Code Push를 관리하는 Microsoft App Center는 내년 3월까지 운영될 예정이다.
이런 상황임에도 불구하고 아직 많은 곳에서 Code Push를 통한 앱 빌드 및 배포, 관리를 하고 있다 보니, App Center가 사라지면 Code Push를 어떻게 할지 많은 사람들이 우려했다.
다행이라면, Code Push 기능은 독립적인 방식으로 이용할 수 있도록 조치하겠다고 Microsoft에서 안내하고 있다.

이 점을 고려해 Code Push를 적용하는 글을 작성하고 있지만, 혹시 모를 사항을 대비해 대체제를 고려해볼 필요는 있다고 생각한다.
그에 대한 내용은 추후 다른 글에서 다뤄보도록 하고, 여기서는 Code Push를 적용하는 과정 만을 기록하고자 한다.

우선 App Center 등록부터 해보자.

Code Push를 이용하기 위해서는 앞서 말한대로, Microsoft App Center에 계정을 등록해야 한다.
여기를 눌러 App Center 계정을 등록해보자.

가입을 진행하면 username을 입력하라고 나온다.
이 이름은 나중에 Code Push를 연결할 때 필요해지므로 잘 지어놓도록 하자(?).

완료하면 이제 다음은 App Center에 관리할 앱을 등록해야 한다.
Add New App 버튼을 눌러서 App에 관한 정보를 설정해주자.

App Name을 작성하고, OS는 Android로, 그리고 Platform은 React Native를 선택하고 Add New App을 누르면 아래와 같은 화면이 뜰 경우, 정상적으로 앱 등록이 완료됐다.

이 창을 끄지 말고 유지한 채로, 에디터를 키고 App Center CLI를 설치해서 로그인해보자.
아래의 커멘드를 터미널에 입력해서 설치해주자.

npm install -g appcenter-cli

설치가 완료되면 아래의 커멘드를 입력하고 엔터를 누르자.
그러면 App Center 로그인 페이지가 열린다.

appcenter login

로그인하면 인증 완료라고 하면 token을 알려주는데, 이 토큰을 복사 후 커멘드 쪽에 Access code from browser:라고 입력하라고 있는 쪽에 붙여넣기를 해주고 Enter를 눌러주면 App Center CLI와 연동이 완료된다.

여기까지 됐다면 이제, 아까 전의 App Center 웹 화면으로 돌아가 Getting Started에 나온대로 App Center와 연관된 패키지들을 추가로 설치해주자.

// npm일 경우  
npm install appcenter appcenter-analytics appcenter-crashes --save-exact  

// yarn일 경우  
yarn add appcenter appcenter-analytics appcenter-crashes

설치가 완료됐다면 (프로젝트 폴더명)/android/app/src/main 경로에 assets 폴더를 생성한 뒤, appcenter-config.json 파일을 생성한다. 생성된 파일에는 아래와 같이 내용을 작성한다.

{
  "app_secret": "여기다 app secret를 입력한다. app secret는 App Center 처음에 Overview에서 Getting Started의 3번 내용을 보면 알 수 있다."
}

여기까지 완료됐다면, (프로젝트 폴더명)\android\app\src\main\res\values\strings.xml에 아래의 내용을 추가하고 저장하자.

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

이렇게까지 하면 App Center 연동 작업은 완료가 됐다.
다음 글에서는 본격적으로 Code Push 패키지 설치와 그 연동 작업을 진행해보기로 하겠다.