Story Book과 Code Push

ReactNative로 앱을 개발할 때 UI 개발을 위한 Story Book과 앱에 대한 수정사항을 앱 빌드 없이 배포할 수 있는 Code Push개념이 있다. 이번 포스팅에서는 Story Book과 Code Push 개념에 대해서 알아보자.

Story Book

Storybook은 UI 컴포넌트를 개발하고 테스트하기 위한 강력한 오픈소스 도구입니다. React Native를 포함한 다양한 프론트엔드 프레임워크에서 사용할 수 있습니다. 

장점

1. UI 컴포넌트 개발 환경: 개발자가 애플리케이션의 전체 로직과 분리하여 UI 컴포넌트를 독립적으로 개발할 수 있게 해줍니다.
2. 시각적 테스팅 도구: 다양한 상태의 컴포넌트를 쉽게 확인하고 테스트할 수 있습니다.
3. 문서화 도구: 컴포넌트의 사용법과 속성을 자동으로 문서화합니다.
4. 협업 도구: 개발자, 디자이너, 제품 관리자 간의 소통을 원활하게 합니다.

React Native에서 Storybook 사용의 장점

1. 컴포넌트 격리 개발: 비즈니스 로직과 분리하여 UI 컴포넌트를 개발할 수 있어 코드 품질과 재사용성이 향상됩니다
2. 빠른 개발 및 테스트: 에뮬레이터나 실제 기기 없이 브라우저에서 컴포넌트를 개발하고 테스트할 수 있어 개발 속도가 향상됩니다
3. 시각적 TDD(Test-Driven Development): 다양한 상태의 컴포넌트를 동시에 테스트할 수 있어 품질 향상에 도움이 됩니다
4. 살아있는 스타일 가이드: Storybook을 정적 사이트로 배포하여 팀원들이 쉽게 컴포넌트를 확인하고 사용할 수 있습니다
5. 문서화 자동화: 컴포넌트의 사용법과 속성이 자동으로 문서화되어 팀 내 지식 공유가 용이해집니다
6. 엣지 케이스 발견: 모든 컴포넌트 상태를 쉽게 확인할 수 있어 예외 상황을 미리 발견하고 대응할 수 있습니다
7. 크로스 플랫폼 지원: React Native Web을 통해 웹 브라우저에서도 컴포넌트를 확인하고 테스트할 수 있습니다
8. 애드온 시스템: 다양한 애드온을 통해 접근성 테스트, 국제화 지원 등 추가 기능을 활용할 수 있습니다

Storybook은 React Native 프로젝트의 UI 개발 프로세스를 크게 개선할 수 있는 도구입니다. 컴포넌트 중심의 개발을 촉진하고, 팀 협업을 원활하게 하며, 코드 품질과 재사용성을 높이는 데 큰 도움이 됩니다.

---

Code Push

CodePush는 Microsoft의 App Center에서 제공하는 클라우드 서비스로, React Native 개발자가 모바일 앱 업데이트를 사용자의 디바이스에 직접 배포할 수 있게 해주는 도구입니다

 

주요 특징

1. JavaScript 코드와 이미지 자산을 실시간으로 업데이트할 수 있습니다.
2. 앱 스토어의 검토 과정 없이 빠르게 업데이트를 배포할 수 있습니다.
3. 버그 수정이나 작은 기능 추가 시 유용합니다.

CodePush의 장점

• 신속한 업데이트: 앱 스토어 승인 과정 없이 즉시 업데이트를 배포할 수 있습니다
• 릴리스 주기 단축: 앱 스토어의 긴 배포 과정을 건너뛸 수 있습니다
• A/B 테스팅 용이: 일부 사용자에게만 업데이트를 배포하여 피드백을 수집할 수 있습니다
• 최적화된 롤아웃: 점진적인 업데이트 배포가 가능합니다

주의사항

• CodePush는 JavaScript 코드와 자산만 업데이트할 수 있습니다. 네이티브 코드 변경은 여전히 앱 스토어를 통해 배포해야 합니다.
• 보안과 사용자 경험을 고려하여 적절히 사용해야 합니다.

이렇듯 Code Push를 이용하는 경우 앱 버전 업데이트 없이 빠르게 수정코드를 배포할 수 있고 실제 사용자에게 변경된 사항을 빠르게 반영할 수 있습니다. 다만 Microsoft는 Visual Studio App Center를 2025년 3월 31일부로 종료할 계획을 발표했습니다. CodePush는 App Center의 일부 서비스였기 때문에, 이 결정으로 인해 영향을 받게 됩니다.

 

대안 및 마이그레이션 옵션

• 독립형 CodePush 버전: Microsoft는 App Center와 독립적으로 실행할 수 있는 특별 버전의 CodePush를 제공할 예정입니다. 자세한 정보는 support@appcenter.ms로 문의하면 얻을 수 있습니다.
• EAS Update: Expo Application Services (EAS)의 일부인 EAS Update가 CodePush의 주요 대안으로 떠오르고 있습니다. EAS Update는 React Native 앱에 대한 OTA(Over-The-Air) 업데이트를 제공합니다.
• 기타 대안:
  • Ionic의 Appflow
  • Microsoft가 추천하는 다른 서비스들

마이그레이션 고려사항

CodePush에서 EAS Update로 전환하려면 기존 CodePush SDK를 제거하고 Expo 관련 패키지를 설치해야 합니다. 새로운 서비스로 전환 시, 기존 워크플로우와 배포 프로세스를 재구성해야 할 수 있습니다.

결론

CodePush 서비스가 종료되지만, 개발자들을 위한 여러 대안이 존재합니다. EAS Update나 독립형 CodePush 버전 등을 고려해볼 수 있으며, 각 팀의 요구사항에 맞는 최적의 솔루션을 선택하는 것이 중요합니다. 마이그레이션을 위한 충분한 시간이 주어졌으므로, 서비스 종료 전에 적절한 대안을 찾아 전환하는 것이 좋겠습니다.