Cross Platform(react native)_팀스터디_20241025.pdf
0 likes61 views
Kit-Works Team Study
Cross Platform(react native)_팀스터디_20241025.pdf
- 1. 2024.10.25 인범진 Cross Platform React Native
- 2. 목차 • 크로스 플랫폼 이란? • 크로스 플랫폼 프레임워크 종류 • React Native vs Flutter • React Native Deep Dive • 크로스 플랫폼의 미래
- 3. 크로스 플랫폼 한 개의 프레임워크로 여러 플랫폼을 대응하는 개발방법 한 번의 개발로 여러 플랫폼을 대응하므로 내부 로직과 디자인이 동일 정의
- 4. 크로스 플랫폼 장단점 장점 - 하나의 언어로 여러 플랫폼에서 동작하는 개발이 가능 - 비용 절감 - 유지보수 용이 단점 - 네이티브 코드로 작성된 앱 보다 성능의 저하가 있음 - 라이브러리가 없는 경우 직접 네이티브 코드를 작성해야함
- 5. 크로스 플랫폼 종류
- 6. 크로스 플랫폼 종류 2023 2023 2018
- 7. 크로스 플랫폼 종류 Flutter • Google에서 개발하고 관리 • Dart 언어로 개발 • Widget 이라는 UI 구성요소로 이루어져 있음 • Skia가 포함된 렌더링 엔진을 통해 UI 렌더링
- 8. 크로스 플랫폼 종류 React Native • Meta(Facebook) 에서 개발 및 관리 • JavaScript로 개발 • 컴포넌트 단위로 구성하여 개발 • 네이티브 UI를 통해 컴포넌트 렌더링 • 코드푸시를 통해 빌드 없이 JavaScript 코드 수정 가능
- 9. 크로스 플랫폼 종류 Flutter vs React Native Flutter React Native Learning Curve High Low CoodePush X O Community Lower than RN But Growth Rapidly Extensive Performance High Lower than Flutter
- 10. 크로스 플랫폼 종류 React Native Architecture Flutter
- 11. 크로스 플랫폼 종류 Flutter vs React Native Performance
- 12. 크로스 플랫폼 종류 렌더링 방식의 차이 Flutter React Native
- 13. 크로스 플랫폼 종류 크로스 플랫폼으로 만들어진 앱 Flutter React Native
- 14. 크로스 플랫폼 종류 크로스 플랫폼으로 만들어진 앱 React Native
- 15. 크로스 플랫폼 종류 toss
- 16. 크로스 플랫폼 종류 toss
- 17. 크로스 플랫폼 종류 toss
- 18. 크로스 플랫폼 종류 toss
- 19. React Native Deep Dive 동작방식 (Old Architecture)
- 20. React Native Deep Dive 동작방식 (New Architecture)
- 21. React Native Deep Dive Bridge(Fabric / Turbo Modules)
- 22. React Native Deep Dive Old Architecture vs New Architecture Component Type Number of Components Old Architecture Time (ms) New Architecture Time (ms) Performance Difference View 1,500 282 258 ~8% faster View 5,000 1088 1045 ~4% faster Text 1,500 512 505 ~1% faster Text 5,000 2156 2089 ~3% faster Image 1,500 406 404 similar Image 5,000 1414 1370 ~3% faster Component Type Number of Components Old Architecture Time (ms) New Architecture Time (ms) Performance Difference View 1,500 137 117 ~15% faster View 5,000 435 266 ~39% faster Text 1,500 324 284 ~13% faster Text 5,000 1009 808 ~20% faster Image 1,500 212 172 ~19% faster Image 5,000 673 451 ~33% faster Android IOS
- 23. 크로스 플랫폼의 미래
- 24. 출처 • https://cleancommit.io/blog/cross-platform-app-development-developing-an- application-for-maximum-exposure • https://wezom.com/blog/the-best-frameworks-for-cross-platform- development - https://levelup.gitconnected.com/deep-dive-into-react-natives-architecture-legacy-vs-new-e078d45186bd