해당 글에서는 React-native에서 페이지 별 이동을 위한 Navigation 구성에 대해 이해를 돕기 위해 작성한 글입니다.  1) React Native Navigation 💡 React Native Navigation- React Native 애플리케이션의 ‘페이지 이동’을 하는 내비게이션을 관리하고 구현하는 데 도움이 되는 라이브러리입니다. 이 라이브러리는 React Native의 다양한 기능을 활용하여 내비게이션을 관리하며, iOS와 Android를 모두 지원합니다.- Stack Navigation, Tab Navigation 및 Drawer Navigation과 같은 다양한 타입의 네비게이션을 제공합니다. 각각의 내비게이션 타입은 사용자의 요구에 따라 선택할 수 있습니다. - 또한 Re..

해당 글에서는 react-native-cli 환경에서 expo-cli에서 제공하는 모듈을 사용하는 방법에 대해서 공유합니다. 1) 사용 취지 💡 expo-cli 환경에서 개발을 하다가 react-native-cli 환경으로 바꾸게 되는 경우가 발생하였고 expo 모듈을 react-native-cli 환경에서 사용을 하게 되는 경우가 발생하였습니다. 이에 따라서 react-native-cli 환경에서 expo-cli 모듈을 사용하는 방법을 공유합니다. 해당 환경에서는 expo 모듈인 expo-camera를 호출해오는 것을 목표로 합니다. [참고] react-native-cli / expo-cli 개발 환경의 차이에 대해 이전에 작성한 글을 공유드립니다. [RN] React Native 이해하기 및 개발 방..

해당 글에서는 디바이스에 탑재되어 있는 자이로 센서를 이용하는 expo-sensors 라이브러리를 활용하여 자이로스코프(Gyroscope)와 디바이스 모션(DeviceMotion)을 이해하고 값을 추출하는 방법을 이해하기 위한 글입니다. 1) 라이브러리 사용 목적💡 사용자가 디바이스를 어떠한 각도에서 카메라로 측정을 하고 있는지에 대한 값을 추출하고 이를 계산하여 각도 값을 도출하여 최적의 디바이스의 카메라 각도를 파악하기 위해서 이를 추출 및 계산하여 데이터를 적재하는 것을 목적으로 하고 있습니다 2) 자이로 센서(Gyrosensor)와 자이로스코프(Gyroscope) 정의💡 ‘자이로(Gyro)’라는 단어는 라틴어로 ‘회전하는 것’이라는 의미로 회전하는 물체의 회전각 센서를 통해 디바이스의 위치를..

해당 글은 Tensorflow.js에 대해 메모리를 확인하는 방법과 메모리를 관리 및 개선하는 방법에 대한 글입니다.    1) Tensorflow 메모리 정리가 필요한 이유💡 Tensorflow 메모리 정리가 필요한 이유- 공식 사이트 내에 아래와 같은 글이 있습니다.- "WebGL 백엔드를 사용할 때 한 가지 주의해야 할 점은 명시적인 메모리 관리가 필요하다는 것입니다. 텐서 데이터가 궁극적으로 저장되는 WebGLTextures는 브라우저에서 자동으로 가비지 모음이 되지 않습니다.”- 즉, Tensorflow 모델 및 연산에 사용한 데이터에 대해서는 메모리에 남아있고, 이에 대한 정리를 하지않으면 메모리에 대한 부하가 발생할 수 있다는 말입니다. - 이를 기반으로 구성한 프로젝트에서 메모리 관리를 ..

해당 글은 React-native 내에서 AppState 라이브러리를 적용하는 사용법을 설명한 글입니다.1) 문제점💡 프로젝트를 진행하는 도중에 안드로이드 디바이스에서 홈 버튼을 눌렀다가 다시 앱으로 돌아오는 경우 아래와 같은 문제점이 발생하였습니다. ​해당 문제는 TensorCamera(expo-camera)를 사용하고 있는데, 앱을 벗어나는 경우에 'Unmount'를 수행하지 않고 나가고 다시 돌아온 경우에 발생하는 오류로 판단이 되었습니다.parameter specified as non-null is null: method kotlin.o0.d.t.e, parameter settings                         2) 해결책💡 이는 사용자가 앱을 벗어나는 경우에 TensorCam..

해당 글은 React-native 환경에서 Tensorflow.js의 blazeface 모델을 이용하여 얼굴을 감지하는 것에 대한 주제로 기초 환경설정하는 부분에서부터 개발과정에 대해서 설명하는 글로 작성하였습니다. 1) 기초 환경 설정1. 프로젝트 생성해당 프로젝트는 React-native의 'expo-cli' 개발 방법을 선택하였으며 Typescript 기반으로 환경을 구성하였습니다.# expo-cli 기반 React Native TypeScript 프로젝트 생성$ expo init rn-tfjs-face-detection -t expo-template-blank-typescript 2. 라이브러리 구성해당 라이브러리 구성은 얼굴 감지를 위한 Tensorflow.js 관련 라이브러리를 설치하였으며, ..

해당 글은 Expo-cli 프로젝트(React-native) 내에 데이터베이스로 사용되는 Sqlite에 대한 이해를 하고 환경설정을 위한 연결하기 위한 expo-sqlite 라이브러리를 적용하는 가이드입니다. 💡 필자는 해당 개발환경을 아래와 같이 구성하였습니다.{ "dependencies": { "react-native": "0.64.3", "expo": "^44.0.6", "expo-sqlite": "~10.1.0", "react": "17.0.1" }, "devDependencies": { "typescript": "~4.3.5" }} 1) expo-sqlite 설명1. expo-sqlite 정의💡 SQLite는 설치나 설정이 필요하지 않은 내장형 파일 기반의 ..

웹 상에 캔버스를 통해서 그림, 도형들을 그리는 동작들을 해주는 KonvaJS를 이해하기 위한 목적이며, 해당 작성글은 초기 구조 이해와 용어에 대해 익히기 위한 목적임. 1) KonvaJS 구조 이해 1. KonvaJS 정의 💡 Konva는 HTML5 2D Context를 확장한 Canvas JavaScript framework입니다. Konva는 또한 애니메이션, 전환, 노드 중첩, 계층화, 필터링, 캐싱, 데스크톱 및 모바일 애플리케이션에 대한 이벤트 처리 등을 제공해줍니다 2. Konva 구조 💡Stage, Layer, Group, Shape는 HTML 페이지 내의 가상의 DOM 노드로 구성이 되어서 화면상에 그려집니다. 💡 대략적인 구조는 Stage안에 각각에 Layer를 가지고, 그 안에 Gr..