들어가며
React Native CI의 꽃 CodePush 칭찬을 유튜브에서 정말 많이 보았습니다.
React Native를 사용하는 중요한 이유 중 하나로 손꼽히는 CodePush
사용은 처음이었지만 Keepit 팀원분들을 설득하여 프로젝트에 추가해보았습니다.
(관련 이슈 발생 시 빠른 대응을 약속드렸습니다.)
사용해보니 빌드시 xcode로 빌드할 때와 정말 100배 이상의 시간차이가 났습니다.
1초만에 커맨드를 누르면 ci가 가능하고, xcode는 빌드를 기다리고 중간중간 10회정도 버튼을 누르는 작업을 요구합니다. 버튼을 다 누른 줄 알고 다른 작업을 하다보면 버튼을 모두 누르지 못해 빌드되지 못한 케이스도 종종 있어서 은근히 리소스가 요구되었는데, 정말 신세계였습니다.
하지만 Podfile등이 수정된 경우 CodePush로 빌드할 수 없어 능사는 아니었습니다. 빌드 경로가 2가지로 늘어나서 조금 더 세심한 관리가 필요하게 되었습니다.
사용방법
https://velog.io/@minwoo129/React-Native%EC%97%90%EC%84%9C-CodePush-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0
다양한 블로그를 탐색했지만 위 블로그가 가장 간명하고 잘 작동했습니다.
처음 사용해보시는 분들께서는 위 블로그를 참고해주시면 됩니다.
Trouble Shooting
딱 한가지 문제가 있었습니다. 위 블로그에 있는 옵션, 나아가서 CodePush Docs에 있는 옵션을 이리저리 커스텀해봐도, 앱을 설치 후 첫 실행 때 CodePush 내용을 받아오지 못했습니다.
즉, 2번째 실행 할 때에만 CodePush내용을 받아오기 때문에 신규 유저의 첫 방문시 기존 유저와 다른 내용을 맞딱드릴 위험이 있었습니다.
구글링 결과 CodePush.sync함수를 적용하면 된다는 내용을 볼 수 있었고 아래와 같이 적용하여 해결했습니다.
useEffect(() => {
const getCodePushDataAndHideSplash = async () => {
await CodePush.sync({
installMode: CodePush.InstallMode.IMMEDIATE,
});
let hideSplash = setTimeout(() => {
SplashScreen.hide();
}, 500);
return () => clearTimeout(hideSplash);
};
getCodePushDataAndHideSplash();
}, []);앱을 켤 때 받아올 CodePush 데이터가 있는 경우 무조건 받아올 수 있도록 설정을 바꾸었습니다.
(또한 앱이 켜지는 과정에서 flicker현상을 방지하기 위해서 Splash를 0.5초만 지연시켜서 부드럽게 구현하였습니다.)
배포 전략
운용중인 앱은 총 3가지이며 개발 / 상용 / 배포라 칭하겠습니다.
개발에서 자유로이 테스트하고 상용에서 실제 앱과 같이 동작하는지 테스트한 후 실제 앱에 배포하게 됩니다.
이는 저희 팀 프론트 노션입니다.
위 노션을 통해서 배포 상태를 팀원분들과 함께 공유하게 됩니다.
- 배포앱은 개발앱과 상용앱에 비해 항상 한 버전 느려야 한다.
- 노션에 테스크가 등록된다.
- 개발앱에 먼저 배포한다. CodePush로만 배포했는지 XCode로도 배포했는지 작성한다.
- 개발앱 배포 내용을 회의시간에 confirm한다.
- 상용앱에 옮겨 2일간 테스트한다.(노션 업데이트)
- 문제가 없는 경우 배포앱으로 배포를 한다. 각각 버전을 한단계씩 올린다.(노션 업데이트)
(항상 XCode 빌드시에 CodePush로 선 배포를 해주어야 합니다. 그렇지않으면 CodePush로 기존 데이터가 덮어씌워질 수 있습니다.)
마치며
코드푸시에 문제가 없는지 면밀히 함께 잡아주신 팀장님 덕분에 위 Trouble Shooting부분의 문제점을 발견하고 조치할 수 있었습니다. 저 역시 돌다리도 두들겨 보고 건너는 마음으로 가능한 많이 테스트를 해보는 자세를 갖추어야한다는 점을 배울 수 있었습니다. 읽어주셔서 감사합니다.
