React Native WebView 활용해서 Hybrid Application 만들기 (+ CI/CD)

AWS Korea User Group Frontend Chapter에서 발표한
React Native WebView 활용해서 Hybrid Application 만들기 (+ CI/CD) 발표자료 입니다.

https://docs.google.com/presentation/d/1YADC5Nqc0eTXe_Ls6mdOtIJTUASErGsPHzWJHJxrgMk/edit?usp=sharing

Transcript

1. © 2023, Amazon Web Services, Inc. or its affiliates. © 2023, Amazon Web Services, Inc. or its affiliates. React Native WebView 활용해서 Hybrid Application 만들기 (+CI/CD) Changhyeon Yoon Software Engineer AWSKRUG Frontend 2023.07.12 19:30 ~ 21:30 서울 서초구 강남대로 465길 교보타워 11층 B구역 당근마켓
2. Changhyeon Yoon 전 ) LIKELION NFT Division - Frontend Developer 현 ) Granter - Co-Founder / Software Engineer (Frontend, DevOps) Google Developer Student Clubs – Hanyang Univ 1st Lead / Founder Next.js Korea User Group – Organizer AWS Korea User Group – Frontend, Beginners, Pangyo Github : https://github.com/ChanghyeonYoon LinkedIn : https://linkedin.com/in/yooniversedev Blog : https://changhyeon.net
3. Table of Contents 1. Native App vs Hybrid App 2. Pros and Cons for Developer 3. Pros and Cons for User 4. Service Perspective 5. Develop Guidelines 6. CI / CD 7. Apple App Store Review 8. Q&A
4. Native App vs Hybrid App © 2023, Amazon Web Services, Inc. or its affiliates.
5. Native App iOS Android - 귀한 iOS 개발자 - 폐쇄적인 개발환경 - 까다로운 App Store Review - 다양한 기기 및 제조사 - 다양한 제조사
6. React Native Flutter - 웹 개발자가 가장 작업하기 쉬움 - 자칫하면 프로젝트가 매우 무거워짐 - 언어의 장벽 (Dart) - 국내시장 및 커뮤니티는 아직… Cross Platform Framework
7. Hybrid App 하이브리드 앱 이란? - 네이티브 앱과 웹 앱의 장점을 합친 앱 - 화면이나 기능은 웹 + 하드웨어 기능을 위한 네이티브 앱
8. Pros and Cons for Developer © 2023, Amazon Web Services, Inc. or its affiliates.
9. Cons for Developer
10. Pros for Developer
11. Pros and Cons for User © 2023, Amazon Web Services, Inc. or its affiliates.
12. Cons for User
13. Pros for User 가벼운 앱 사이즈 자동 업데이트 복붙이 가능하다!!!! PC와 동일한 경험
14. Service Perspective © 2023, Amazon Web Services, Inc. or its affiliates.
15. Service Perspective
16. Develop Guidelines © 2023, Amazon Web Services, Inc. or its affiliates.
17. SplashScreen
18. Web – App 통신
19. Fallback
20. CI / CD © 2023, Amazon Web Services, Inc. or its affiliates.
21. AWS Amplify 간편한 사용 – 레포지토리와 연동만 하면 알잘딱깔센 확장성, 가용성 – 완전 관리형 서비스로 자체적으로 모니터링, 로드밸런싱, 보안, CDN, SSL 등등 알아서 함 프리티어 – 12개월 제한된 리소스 안에서 무료 사용 가능 자체 도메인 제공 – 도메인을 구매하지 않아도 자체 생성된 도메인 제공
22. AWS App Runner 간편한 배포 – 컨테이너 이미지만 업로드 하면 알잘딱깔센 확장성, 가용성 – 컨테이너 완전 관리형 서비스로 자체적으로 모니터링, 로드밸런싱, 보안, CDN 등등 알아서 함 저렴한 비용 – 딱 쓴만큼만 내면 됨! 결론 -> AWS Amplify와 EC2에 직접 CI/CD 세팅하는 것의 중간 녀석
23. Vercel 간편한 사용 – 레포지토리와 연동만 하면 알잘딱깔센 확장성, 가용성 – 완전 관리형 서비스로 자체적으로 모니터링, 로드밸런싱, 보안, CDN, SLL 등등 알아서 함 저렴 할수도 있는 비용 – 깃헙 조직을 사용하지 않거나 유저가 적다면 무료일지도…PRO플랜은 다소 부담스러운 가격 자체 도메인 제공 – 도메인을 구매하지 않아도 자체 생성된 도메인 제공
24. Apple App Store Review © 2023, Amazon Web Services, Inc. or its affiliates.
25. 악명높은 App Store Review… 기존 웹이랑 다른게 뭐냐? 유저의 네트워크가 불안정 한 경우 핸들링 처리 해야한다 커뮤니티가 있다면 숨김, 차단, 신고기능, 탈퇴 넣어라 권한 받는 이유 상세하게 써라 소셜로그인 넣을거면 애플 꼭 넣어라 Apple로 시작하기면 원터치 로그인 되어야지 추가적인 정보 왜받냐 개발, 테스트, 준비중 등등 테스트성 단어 심사 중인데 배포 해서 깜빡거림 스토어 이미지 우리 기준에 안맞음 이 외 다수….
26. Q&A © 2023, Amazon Web Services, Inc. or its affiliates.
27. Contact KakaoTalk : hyeon0411 Email : hyeon120411@gmail.com Github : https://github.com/ChanghyeonYoon LinkedIn : https://linkedin.com/in/yooniversedev Blog : https://changhyeon.net
28. Thank you! © 2023, Amazon Web Services, Inc. or its affiliates.