분류 전체보기

해당 글은 React의 ‘함수형 컴포넌트’의 ‘생명주기’를 이해하기 위한 글입니다. 💡 [참고] 이전에 작성한 ‘클래스 컴포넌트의 생명주기'를 이해하고 오시면 더 쉽게 이해가 가능합니다 [React] 클래스 컴포넌트 생명주기(lifecycle) 해당 글은 React의 '클래스형 컴포넌트'의 '생명주기(lifecycle)'를 이해하기 위한 글입니다. 1) React의 생명주기 용어 용어 설명 ~ will 어떤 작업을 수행하기 전에 실행되는 메서드와 관련된 용어입니 adjh54.tistory.com 1) 함수형 컴포넌트 생명주기 💡 함수형 컴포넌트는 React Hook 이라고도 하며 React 16.8 버전 이후부터 React 요소로 추가가 되었으며, 해당 글에서는 React 17 이상 버전을 기준으로 작성..

해당 글은 React의 '클래스형 컴포넌트'의 '생명주기(lifecycle)'를 이해하기 위한 글입니다. 1) React의 생명주기 용어 용어 설명 ~ will 어떤 '작업을 수행하기 전에 실행되는 메서드와 관련된 용어입니다. ~ did 어떤' 작업을 수행한 이후'에 실행되는 메서드와 관련된 용어입니다. mount 컴포넌트 내에서 'DOM이 생성'되고 웹 브라우저 상에 나타는 메서드와 관련된 용어입니다. unmount 컴포넌트 내에서 'DOM을 제거'되고 웹 브라우저 상에 사라지는 메서드와 관련된 용어입니다. update 컴포넌트 내에서 '변화'가 발생하였을때 수행하는것을 의미합니다. ex) props, state, 부모 컴포넌트의 리 렌더링, forceUpdate를 통해 강제로 변경하는 경우 2) 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)’라는 단어는 라틴어로 ‘회전하는 것’이라는 의미로 회전하는 물체의 회전각 센서를 통해 디바이스의 위치를..

해당 글의 목적은 타입 스크립트(Typescript)란 무엇이며, 왜 써야 하는지에 대해 이해를 돕기 위해서 작성한 글입니다. 1) 기술 동향 하단의 사진은 ‘Stack Overflow’ 커뮤니티에서 조사한 자료로 2020년과 2021년에 가장 인기 있는 언어에 대해서 조사한 자료입니다. 해당 그래프를 확인해보면, 2020년에 타입 스크립트는 25.4%라는 많은 관심을 받는 언어에서 근래 2021년에 와서는 30.19%라는 더 많은 관심을 받는 언어로 선택 되었습니다.이는 Node.js, java를 압도할 만큼의 관심을 갖는 언어가 되었습니다. [출처] StackOverflow 커뮤니티 Survey Stack Overflow Developer Survey 2020Nearly 65,000 took this..

해당 글은 자바스크립트/타입 스크립트 내에서 의존성에 대해서 이해를 하고 상황에 따라 의존성을 설치해야 하는 이유에 대해 이해하고 관리하기 위한 방법과 관련된 글입니다. 1) 라이브러리 의존성 관리 💡 Javascript 내에서 라이브러리의 의존성 관리를 위한 종류는 3가지로 나뉩니다. 종류 설명 dependencies 현재 프로젝트를 실행하는데 필수적인 라이브러리들이 포함이 됩니다. 이는 컴파일을 수행하고 런타임 단계에서 수행되는 라이브러리들이 이에 해당 됩니다. devDependencies 현재 프로젝트를 개발하고 테스트를 하는데 사용되지만, 런타임에는 필요 없는 라이브러리들이 포함이 됩니다. 이는 런타임 단계에서는 수행되지 않고 이전 컴파일 단계에서까지만 수행되는 라이브러리가 해당 됩니다. ex) ..

해당 글은 Javascript 내에서 함수의 실행시간을 측정하는 방법들을 설명하는 글입니다. 1) Date()를 이용한 측정방식 💡 해당 방식은 함수 시작전에 도출한 new Date() 값과 함수 종료후에 도출한 new Date() 값을 이용하여 두개의 차이를 계산하여 함수 수행속도를 측정하는 방식입니다. 해당 방식은 '밀리초(ms)' 단위로 경과한 시간을 반환해 줍니다. const fn_methodDate = () => { let sum: number = 0; let loopCnt: number = 10000000; // 루프 수행 횟수 const _startTime: number = new Date().getTime(); // 시작시간 for (let i = 0; i < loopCnt; i++) { ..

해당 글은 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..

해당 글은 Mac OS 기반의 React-native-cli 기반 환경설정 방법입니다. 1) 필수 프로그램을 설치합니다.1. homebrew💡 macOS 용 패키지 관리자입니다. HomebrewThe Missing Package Manager for macOS (or Linux).brew.sh # 설치 이후 버전 확인$ brew -v  2. node💡 homebrew를 통해서 설치해도 가능하며, 아래 링크를 통해 다운로드를 하여도 무관합니다.# node install$ brew install node# node check$ node -v Node.jsNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org  3..