본문 바로가기

React Native

(6)
React-Native-Camera Face 정보가 반환되지 않는 문제 React Native 프로젝트 진행 중 얼굴인식 기능이 필요해서 react-native-camera:3.43.6을 설치했습니다. IOS, Android 두 기종에서 얼굴의 위치정보를 얻어 얼굴 영역만 이미지로 얻어야 했습니다. 문제 얼굴 인식은 Firebase의 ML 데이터를 사용하는 것 같은데, 이게 여러 이슈를 발생시켰습니다. RNCamera에 faceDetectionMode를 설정하면 ref.takePictureAsync() 함수를 호출했을 때 faces 정보가 함께 반환됩니다. 문제는 개발하던 중간부터 faces 정보가 반환되지 않았을 때였는데, IOS 쪽은 반환이 잘되는 상황이었습니다. 해결 ref.takePictureAsync 함수를 호출할 때 options 인자를 넘길 수 있었습니다. 당황..
React Native - 에러 조치 회사에서 React Native 처음 사용했을 때 당시 이해하기 어려웠던 에러가 많았습니다. 지금에야 좀 눈에 익숙해지긴 했지만 혹시 모르니 조금씩 기록해두기 위해 작성했습니다. * Android 기준으로 작성되었습니다. Error 목록 Error: Command failed: gradlew.bat app:installDebug -PreactNativeDevServerPort=8081 SDK location not found. Define location with an ANDROID_SDK_ROOT ... SDK 경로를 찾지 못해서 발생한 에러. 프로젝트 내 android 폴더 내에 local.properties 파일 생성 sdk.dir = {sdk location} 예시 [USER_PROPILE 은 계..
React Native 시작 - 기본구성(2) 이전 포스트 React Native 시작 - 기본 구성(1) 이전 포스트 React Native 개발환경 셋팅(2) 이전 글 React Native 개발환경 (tistory.com) 이번 포스팅에선 프로젝트를 생성 및 실행해보도록 하겠습니다. 다음과 같은 기준으로 작성되었으며, React Native의 pcloud.tistory.com 이전 포스트에 이어 구현에 대해 설명하겠습니다. 구현 Component를 구현하는 다양한 방법이 존재합니다. 기본적인 방법인 Class Component와 Function Component에 대해 설명하겠습니다. 두 방식은 구현 방식 외에도 다양한 차이가 존재합니다. 구현 방식에 대해 소개 후, 두 방식이 어떤 점에서 차이가 나고 성능 면에서 어떤 차이를 나타내는지 확인하..
React Native 시작 - 기본 구성(1) 이전 포스트 React Native 개발환경 셋팅(2) 이전 글 React Native 개발환경 (tistory.com) 이번 포스팅에선 프로젝트를 생성 및 실행해보도록 하겠습니다. 다음과 같은 기준으로 작성되었으며, React Native의 목표인 Android / IOS 개발 통합을 위해 염 pcloud.tistory.com React Native는 Android와 IOS의 네이티브 앱 개발을 하나의 프로젝트를 할 수 있다는 특징이 있습니다. 이는 프로젝트 진행 시 개발 생산성을 높히는데 큰 기여를 하게 됩니다. 기본적으로 한번 코드를 작성해도 동시에 두 가지 결과물이 나온다는 장점이 있으며, Android 개발자와 IOS 개발자가 일정을 맞추는 등의 행동이 필요없게 됩니다. * 단 Windows 환..
React Native 개발환경 셋팅(2) 이전 글 React Native 개발환경 (tistory.com) 이번 포스팅에선 프로젝트를 생성 및 실행해보도록 하겠습니다. 다음과 같은 기준으로 작성되었으며, React Native의 목표인 Android / IOS 개발 통합을 위해 염두하고 작성하였습니다. Windows10 환경 VSCode IDE Android MAC에선 Android와 IOS 동시 개발이 가능하지만, Windows 쪽은 IOS 확인이 힘들다는 점 기억해주세요. 프로젝트 생성 npx를 사용하여 프로젝트를 생성해볼 것입니다. VSCode 실행 및 생성할 폴더로 이동 터미널에 npx react-native init 을 입력 ex) npx react-native init RNSample 새로 폴더를 생성하지 않고 처음 생성한 폴더에 파..
React Native 개발환경 셋팅(1) Windows 10 기준 환경에서 React Native Build를 위해선 아래의 프로그램을 설치해야 합니다. https://www.python.org/download/releases/2.7/ Python 2.7.0 Release The official home of the Python Programming Language www.python.org https://nodejs.org/en/blog/release/v12.13.0/ Node v12.13.0 (LTS) | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org https://github.com/ojdkbuild/ojdkbuild oj..