React Native
-
[Flutter 메뉴 도입] Start. 기획, 설계 과정 기록 및 회고록React Native 2025. 1. 7. 10:17
- 가장 처음 직면한 문제.프로토타입 개발 시 공통클래스가 없다 !!그동안 회사에서 개발할때는 공통UI가 있기 때문에 이걸 가져다 쓰면 되는데 신규 플랫폼으로 개발하려니공통위젯이 없다는 점에서 막힘..>> 역할을 나누어 공통위젯과 스타일을 정의하는게 우선 >> 개발 시간 보다는 기획과 설계에 더 많은 시간을 할애하여 재사용성과 확장성을 확보하고자 함 [ 1. 도입 기술 검토 ]React Native와 Flutter의 개발 편의성, 확장 가능성, 네이티브 코드와의 통합 용이성 등을 비교 분석하여 Flutter 채택 1) RN vs Flutter 플랫폼간 특징 비교 (참고: https://soultreemk.tistory.com/260) 2) 기존 네이티브 소스코드에 크로스플랫폼 프로젝트 통합 ..
-
[Flutter 메뉴 도입] 1. UI 청사진 그리기React Native 2024. 12. 17. 12:30
💡 🚩 setState는 결국 사용성이 떨어짐. State클래스에 종속되어 있기 때문에, 클래스 외부의 함수나 별도의 위치로 옮기면 접근 불가따라서, 함수나 위젯을 분리하고 싶을 경우 클래스 내부 메서드로 선언하거나, 콜백 함수를 통해 상태를 업데이트해야함Gesture Detector는 State클래스 내부에 구현되어 있어 setState사용이 가능하나, 이걸 별도 클래스로 정의하려면우측 CustomToggleButton의 콜백함수처럼 구현해야함 이렇게 별도 위젯으로 구성하면, Botton Widget내에서 setState를 사용할수 없음. ==> 따라서, Provider 상태관리 패키지를 사용하여 전환 ChangeNotifier 클래스: 상태를 관리하는 클래스ChangeNotifierProvid..
-
iOS네이티브 프로젝트에 Flutter 병합하기 - 1React Native 2024. 11. 28. 09:40
[ 1. Flutter 모듈 생성 ] document에 나온대로 진행하는데 처음부터 삽질한 부분...create module 을 생성해야 하는데 일반 프로젝트를 생성해서 .ios 폴더가 생성되지 않았던 것 ㅠㅠ *** Flutter 모듈 프로젝트와 일반 Flutter 프로젝트는 역할이 다르다 ***1. Flutter 모듈 프로젝트는 기존 네이티브 프로젝트에 Flutter 화면을 추가하는 용도로 생성 - .ios 폴더가 생성되며, 이는 Flutter 모듈 프로젝트에서 iOS 네이티브 코드를 구성하기 위해 사용됨. - .ios폴더 내의 podhelper.rb 파일은 Flutter 모듈 프로젝트에서 iOS 네이티브 프로젝트의 Podfile과 Flutter 모듈 간 의존성을 연결하..
-
iOS 네이티브 프로젝트에 통합 - RN, Flutter 환경셋팅 비교React Native 2024. 11. 20. 19:09
결론: RN은 초기설정이 말이 안된다.온갖 third-party 라이브러리 설치 뿐아니라, 종속성 지옥.. 설치할게 단순히 많은걸 넘어 신경써야할게 한두가지가 아님삽질 끝에 결국 Flutter로 전환..[ iOS프로젝트에 React Native 통합하기 ] 개발환경: react-native-cli: 2.0.1react-native: 15.0.1cocoapod: 1.16.2ruby 3.3.6 Node.js 및 npm은 기본 설치되어있다고 가정. 1. React Native 프로젝트 생성:npx react-native init ReactNativeModule>> 이때 생성된 프로젝트 폴더는 복붙, 나중에 iOS 네이티브 프로젝트와 통합 2. RN프로젝트에서 cocoaPods설치React Native 프로젝..
-
네이티브앱 통합 관점에서 RN vs FlutterReact Native 2024. 11. 19. 12:07
요약) 가장 중요한 차이는RN은 JavaScript 런타임과 네이티브 의존성을 따로 관리 하는 반면, Flutter는 자체 내장 엔진에서 모든 의존성을 자체 관리 React NativeFlutter의존성관리JavaScript 런타임과 네이티브 의존성을 Podfile로 따로 관리- 모듈 생성시 생성된 .ios/Flutter/podhelper.rb를 통해 CocoaPods 의존성을 자동으로 관리- Flutter 모듈의 모든 네이티브 의존성을 캡슐화통합방식기존 iOS 프로젝트의 Podfile과 RN의 Podfile을 병합해야 함Why? )React Native는 JavaScript 코드를 실행하기 위해 React, React-Core, React-RCTBridge 등 다양한 네이티브 모듈에 의존CocoaPod..
-
왜 네이티브 개발에는 상태관리 개념이 없는가?React Native 2024. 11. 18. 15:30
iOS네이티브만 하다 플러터로 넘어가니 상태관리 개념이 매우 생소했다. 네이티브에서는 전혀 접하지 않았기 때문.. 요점: Imperative Programming(명령형 프로그래밍) vs Declarative Programming(선언형 프로그래밍) 차이에 의한 것 1. iOS 네이티브 개발의 전통적 방식iOS 네이티브 개발은 Imperative Programming(명령형 프로그래밍) 방식이 방식에서는 상태를 명시적으로 관리하기보다는, 이벤트나 액션에 따라 UI를 직접 업데이트하고 로직을 구현주요 특징:상태와 UI 업데이트가 명령형으로 이루어짐.UILabel.text를 직접 수정하거나, UIView의 속성을 변경하는 방식.특정 이벤트가 발생하면 그에 맞는 UI 업데이트를 명령으로 작성.ViewCon..
-
[iOS 네이티브 앱에 RN화면 접목하기]React Native 2024. 11. 11. 17:26
** 중요한 고려사항: 통신은 네이티브모듈을 따를수 밖에 없는 상황 (API미제공)에서 네이티브 의존도를 낮추어야 함!!** And/iOS 모두 접목하려면…. 데이터 주고받는 규격 같은게 단순하고 통일성 있어야함 - React Native에서 네이티브 코드와 통신하려면, **React Native의 네이티브 모듈(Native Modules)**을 직접 구현하는 방식이 필요- React Native는 웹뷰 없이 JavaScript와 네이티브 간의 직접 통신을 지원하지 않기 때문에, WKWebView의 스크립트 메시지 기능과 유사하게 사용하려면 네이티브 모듈을 설정해야 함1. 네이티브 모듈 생성iOS 네이티브 모듈을 작성하여, React Native에서 호출할 수 있는 함수를 제공합니다. 이 함수는 네이..