문제점에 앞서 metro 정의를 해보자면
"리액트 네이티브를 위한 자바스크립트 번들러로 js 파일을 읽어서 순서에 맞게 하나의 파일로 합쳐주고 앱에서 실행 준비를 해준다."
라고 구글에 나온다.
그래서 js파일을 읽을 때 그래서 opencv의 기본 환경설정 및 실행 코드들 역시
metro가 전부 읽어버려서 앱은 중지되어 실행되지 않는 문제점.
아래는 opencv.js 코드의 일부
이 텍스트 포맷으로 된 코드를 RN에 부착시키려면 gpt 선생님은 service worker를 사용해서 하라는데 감을 못잡겠다. 또한 웹과 앱환경 사이의 호환되지 않는 문제점 때문에 이렇게 direct로 코드를 변환시키는 방식은 어려울 것같다고 결론을 내림.
아래는 chatgpt의 답변
1. 환경 차이: OpenCV.js는 웹 브라우저 환경에서 실행되도록 설계된 코드입니다. 하지만 React Native는 네이티브 모바일 환경에서 실행됩니다. 두 환경의 차이로 인해 웹 브라우저에서 동작하는 OpenCV.js 코드를 그대로 React Native에서 실행하는 것은 어려울 수 있습니다.
2. 네이티브 모듈 사용 필요: React Native 앱에서 OpenCV 기능을 활용하려면 네이티브 모듈을 사용하여 네이티브 코드와 상호작용해야 합니다. React Native에서는 JavaScript와 네이티브 코드 간의 인터페이스를 활용하여 네이티브 기능을 호출하고 결과를 받아옵니다.
3. UI 통합: OpenCV.js로 구현된 코드가 웹 브라우저 환경에서는 HTML DOM 요소와 상호작용하며 UI를 구성합니다. React Native 앱에서는 React 컴포넌트를 사용하여 UI를 구성하므로, OpenCV 기능을 React Native UI와 통합해야 합니다.
4. 성능 이슈: OpenCV.js는 웹 브라우저에서 동작하기 위해 최적화되어 있으며, React Native 네이티브 코드보다는 성능 면에서 느릴 수 있습니다.
5. 코드 변환과 호환성: OpenCV.js 코드를 React Native 코드로 변환하는 과정에서 웹 브라우저에 종속된 함수나 기능을 React Native에서 사용할 수 없는 경우가 있을 수 있습니다.
6. 외부 모듈 의존성: OpenCV.js 코드가 외부 모듈에 의존하는 경우, React Native에서 해당 모듈과의 통합 문제가 발생할 수 있습니다.
이러한 문제들로 인해 OpenCV.js 코드를 직접 React Native 앱에 통합하는 것은 일반적으로 까다로울 수 있습니다. 대신에, react-native-opencv3
패키지와 같이 React Native용 OpenCV 라이브러리를 활용하는 것을 추천합니다. 이러한 패키지는 React Native 환경에 맞게 최적화되어 있고, 네이티브 모듈과 JavaScript 모듈을 조화롭게 결합하여 OpenCV 기능을 사용할 수 있도록 도와줍니다.