AppCenter 설정과 앱 설정까지 모두 완료했다.
이제 본격적으로 코드푸시를 진행해보자!
CodePush 활용
코드푸시를 이용하는 방법은 여러 가지가 있다.
1. 앱 시작 시 자동 동기화
그중 가장 쉽고 간단하게 코드푸시를 사용하는 방법은 앱의 루트에 코드푸시를 감싸는 것이다.
class MyApp extends Component {}
MyApp = codePush(MyApp);이렇게 작업을 하면 앱이 시작될 때 업데이트를 자동으로 다운로드하고 다음에 앱이 재실행될 때 다운로드한 업데이트를 적용하게 된다.
2. 앱이 Foreground로 돌아올 때마다 자동 동기화
만약에 나는 업데이트를 앱이 시작할 때 체크하는 것보다 더 자주 하여야 한다면 CodePushOptions를 코드푸시의 Parameter로 지정하여 다음과 같이 사용하면 된다.
이렇게 작업을 하면 앱이 백그라운드에서 포그라운드로 돌아올 때마다 업데이트를 확인하고 적용하게 된다.
class MyApp extends Component {}
MyApp = codePush({ checkFrequency: codePush.CheckFrequency.ON_APP_RESUME, installMode: codePush.InstallMode.ON_NEXT_RESUME })(MyApp);3. Dialog 띄우기
사용자에게 업데이트하기 전에 업데이트가 필요하다는 것을 간단하게 알리고 싶다면 그것도 역시 가능하다. updateDialog 값을 true로 지정해주면 된다. 그리고 업데이트 적용은 바로 하고 싶다면 installMode를 codePush.InstallMode.IMMEDIATE 지정해주면 다운로드가 완료되고 나서 업데이트가 바로 적용 되게 된다.
class MyApp extends Component {}
MyApp = codePush({ updateDialog: true, installMode: codePush.InstallMode.IMMEDIATE })(MyApp);4. 수동 업데이트 방식
여기서 더 나아가 우리 개발팀이 원하는 코드푸시의 활용은 updateDialog가 아닌 자체 디자인한 모달을 사용자에게 보여주어서 새로운 업데이트가 있음을 알려주고 업데이트를 다운로드할 때에 DownloadProgress의 값을 받아서 사용자에게 업데이트 진행 상황을 보여주고 ProgressBar가 모두 채워진다면 재실행을 해서 바로 업데이트를 적용하는 것으로 코드푸시를 완료하는 프로세스를 목표로 두었다.
목표에 맞게 작업한 코드 일부분과 실행되는 모습은 다음과 같다.
// 업데이트 체크
try {
codePush.checkForUpdate()
.then((update) => {
if (!update) {
// 업데이트가 없을 때
} else {
// 업데이트가 있을 때
showUpdateMoal(update) // 업데이트 유도 모달 보여주기
}
});
} catch (error) {
// 에러처리
}
// 업데이트 진행
try {
update.download((progress: DownloadProgress) => {
// 업데이트 다운로드 중
setProgress(progress);
}).then((newPackage: any) => {
newPackage.install().done(() => {
// 업데이트 다운로드가 완료 됐을 때
codePush.notifyAppReady()
codePush.restartApp(); // 앱 재시작
});
});
} catch (error) {
// 에러처리
}역경
자! 이렇게 코드푸시가 여기서 끝난 것이 아니었다... 수동 업데이트의 가장 가장 중요하고 중요한 부분이 있다.
이것 때문에 얼마나 삽질을 했는지…
공식 문서를 꼼꼼하게 안 읽은 내 잘못이지…
테스트를 진행하면서 코드푸시를 하고 나면 바로 적용이 돼서 이게 끝인 줄 알았는데 한차례 앱을 종료하고 다시 앱을 실행하면 또 업데이트를 하라고 modal 팝업이 나왔다.
처음에만 이런 줄 알고 다시 빌드를 하고 테스트를 했는데도 상황은 같았다. Android만의 문제인 줄 알고 IOS도 빌드해보고 업데이트하니 IOS도 같았다..
Staging 버전이라서 그런가? Production 때는 잘 되겠지 하고 우선 넘어간 후에 Production에서 테스트를 해보니... 역시나... 같은 문제가 발생했다.
이렇게 막힐 때는 공식문서를 꼼꼼히 읽어봐야 한다. 코드푸시 공식문서를 꼼꼼히 다시 읽어보니 notifyAppReady()라는 함수를 꼭! 호출을 해주어야 한다고 한다.
새로 설치된 업데이트를 성공으로 간주해야 하므로 자동 클라이언트 쪽 롤백이 필요하지 않음을 CodePush 런타임에 알릴 수 있습니다.
쉽게 말해 notifyAppReady() AppCenter에서 수동 업데이트가 성공을 했다는 인식을 주는 것이라고 한다. 그렇지 않으면 지속적으로 계속해서 업데이트 성공 유무와 별개로 checkForUpdate에 null이 아닌 업데이트 데이터를 넘긴다.
notifyAppReady()를 호출하고 앱을 종료한 후에 다시 실행해도 이제 업데이트 모달이 뜨질 않는다!
항상 공식문서를 꼼꼼히 읽는 습관을 들여놓도록 하자.
Conclusion
이렇게 해서 코드푸시를 수동으로 사용하는 방법까지 다루어 보았다. CodePushOptions의 설정 속성들이 다양하고 많을 뿐만 아니라 수동으로 작업을 한다면 컨트롤할 수 있는 범위는 더 넓어지기 때문에 상황에 따라 코드푸시를 잘 활용한다면 앱의 버그나 치명적인 이슈 또는 신속하게 서비스 대응을 해야 할 상황에서 더할 나위 없는 좋은 도구가 될 수 있다.
타회사에서는 코드푸시를 아예 기본 배포 도구로도 사용을 하는 케이스도 있다고 하는데 나도 장단점을 잘 알아보고 상황에 따라 사용해봐야겠다.
공식문서: https://learn.microsoft.com/ko-kr/appcenter/distribution/codepush/rn-api-ref
