반응형
해당 글에서는 react-native 내에 활용하였던 라이브러리, 환경설정, 앱 배포와 관련하여서 중간정리를 하기 위한 목적으로 작성한 글입니다.
1) 라이브러리 총 정리
💡 라이브러리 총 정리
- 지금까지 react-native 프로젝트를 수행하면서 사용하였던 라이브러리와 이와 관련되어 링크를 포함하여 정리하였습니다.
- 라이브러리는 react-native 내부에서 제공해 주는 라이브러리, 써드파티 라이브러리를 이용한 외부 라이브러리, Expo Modules에서 사용하는 라이브러리들로 구성되어 있습니다.
| 라이브러리 명 | 사용처 | 라이브러리 활용처 | 링크 |
| AppState | 사용자의 앱 상태 확인에 사용 | - 사용자가 앱을 사용하고 있는 상태(active)이거나 앱을 벗어난 상태(background) 상태일때의 관리를 하여 각각 상황에 따른 처리에 활용할 수 있음 | https://adjh54.tistory.com/35 |
| Logbox | 개발자 경고 로그창 관리에 사용 | - 사용자에게 개발자 로그(Logbox)가 출력되는 부분을 관리하기 위한 용도로 활용할 수 있음 | https://adjh54.tistory.com/211 |
| BackHandler | 사용자의 디바이스 뒤로가기 버튼 막기 위해 사용 | - 사용자가 뒤로가기 버튼을 이용하는 것이 아닌 뒤로가기 아이콘으로 제공함으로써 활용할 수 있음. | https://adjh54.tistory.com/289 |
| Modal | 모달 팝업 출력 및 백그라운드 디자인 처리를 위해 사용 | - 사용자에게 모달 팝업을 출력하며 기본 값을 사용하면 모달창이 띄어지고 백그라운 전체를 가릴 수 있기에 이에 대한 추가 활용을 할 수 있음 | https://adjh54.tistory.com/300 |
| StatusBar | 앱 내의 StatusBar 공간의 디자인 처리를 위해 사용 | - 앱 내에서 StatusBar의 공간에 대해 디자인 활용을 할 수 있음 | https://adjh54.tistory.com/308 |
| install-expo-modules | react-native-cli 내에 expo 모듈을 사용 | - react-native-cli 내에서 expo 모듈을 이용해야 하는경우 이를 설치하여 활용 할 수 있음 | https://adjh54.tistory.com/41 |
| expo-camera | Camera로 측정된 얼굴을 기반으로 Tensor 값으로 반환받는 목적으로 사용 | - 앱에서 촬영되는 얼굴을 기반으로 Tensor 값으로 반환받는데 활용할 수 있음. | https://adjh54.tistory.com/28 |
| expo-keep-awake | 앱 사용중 꺼짐에 대해 방지 목적으로 사용 | - 앱이 실행되는 동안에 앱이 꺼지지 않는 상황을 유지하는데 활용할 수 있음. | https://adjh54.tistory.com/295 |
| expo-sensor | 디바이스의 위치 값을 활용 목적으로 사용 | - 앱의 각도에 따른 처리를 활용할 수 있음. | https://adjh54.tistory.com/40 https://adjh54.tistory.com/357 |
| Axios | 모바일과 API 간의 통신 방법으로 사용 | - 앱에서 API로 데이터를 요청하고 응답받기 위한 용도로 활용할 수 있음 | https://adjh54.tistory.com/208 |
| Lodash | 버튼 중복 처리를 막기 위한 용도로 사용 | - 앱에서 버튼의 중복 터치를 막기 위해 Debounce 모듈을 이용하여 활용할 수 있음 | https://adjh54.tistory.com/471 |
| @react-navigation/stack | 모바일 내부에 유지되는 저장소로 사용 | - 앱에서 캐시를 삭제하거나 앱을 지우지 않는 이상 유지되는 데이터에 대해 저장소에 저장하여 관리하여 활용할 수 있음 | https://adjh54.tistory.com/209 |
| @react-navigation/bottom-tabs | 모바일 페이지 간의 이동 및 하단 UI 구성에 사용 | - 페이지간의 이동을 위한 Router의 역할로 사용하거나 하단의 메뉴를 출력하는 형태의 UI를 구성하기 위한 용도로 활용할 수 있음 | https://adjh54.tistory.com/202 https://adjh54.tistory.com/218 |
| react-native-calendar | 모바일 내에 캘린더 UI로 사용 | - 모바일 내에서 캘린더를 사용하기 위한 용도로 활용할 수 있음. | https://adjh54.tistory.com/316 |
| react-native-version-check | 모바일 내의 버전 관리 목적으로 사용 | - 모바일 내의 목적이나 구글 플레이 스토어의 버전을 확인하여 체크하는 용도로 활용할 수 있음. | https://adjh54.tistory.com/455 |
| react-native-permissions | 모바일 내의 권한을 관리하는 목적으로 사용 | - 모바일 내에서 권한을 요청하고 관리하는 용도로 활용할 수 있음 - Android 특정 버전에 따른 권한 예외 처리를 하는 용도로 활용할 수 있음 | https://adjh54.tistory.com/206 https://adjh54.tistory.com/465 |
| react-native-dotenv | 개발/운영 환경에 따른 각각 다른 환경 파일을 이용하는 용도로 사용 | - 개발환경이나 운영환경에서 사용되는 변수를 .env 파일 기준으로 분리하여 상황에 따라 활용할 수 있음 | https://adjh54.tistory.com/230 |
| @react-native-community/netinfo | 모바일 기기의 네트워크 연결 상태를 체크하는 용도로 사용 | - 모바일 내에서 네트워크 연결이 끊겼을 경우에 대한 처리가 필요한 경우에 해당 라이브러리를 통해 캐치하여 경고창을 띄어주는 용도로 활용할 수 있음 | https://adjh54.tistory.com/210 |
| @notifee/react-native | firebase의 FCM 메시지를 출력하기 위한 목적으로 사용 | - firebase의 FCM 메시지를 수신 받음에 따라 사용자에게 띄어주기 위한 목적으로 활용할 수 있음 | https://adjh54.tistory.com/433 https://adjh54.tistory.com/434 |
| com.facebook.fresco:animated-gif | gif 파일을 불러오기 위한 목적으로 사용 | - .gif 파일을 불러오기 위한 환경 설정으로 활용할 수 있음 | https://adjh54.tistory.com/299 |
| firebase | firebase 환경 파일을 분리하기 위한 목적으로 사용 | - firebase의 프로젝트가 개발/운영으로 분리됨에 따라서 빌드에 따라 각각 맞는 환경파일을 불러오는 목적으로 활용할 수 있음 | https://adjh54.tistory.com/297 |
| @react-native-firebase/app @react-native-firebase/analytics | firebase의 Crash Log를 확인하기 위한 목적으로 사용 | - firebase의 Crash Log 발생에 따른 로그 추적을 위한 목적으로 활용할 수 있음 | https://adjh54.tistory.com/254 |
| @react-native-firebase/messaging | firebase의 FCM 메시지를 이용하기 위한 목적으로 사용 | - firebase의 FCM 메시지를 이용하기 위한 목적으로 활용할 수 있음 | https://adjh54.tistory.com/431 |
| onnxruntime-react-native | ONNX Model을 불러오는 목적으로 사용 | - ONNX 파일로 구성한 모델을 불러오는데 활용하며 이에 대한 메모리 쌓임 증상을 해결하고 앱 배포시 발생하는 문제에 대해 활용할 수 있음 | https://adjh54.tistory.com/203 https://adjh54.tistory.com/205 https://adjh54.tistory.com/309 https://adjh54.tistory.com/327 |
| @tensorflow/tfjs @tensorflow/tfjs-core @tensorflow/tfjs-react-native @tensorflow/tfjs-backend-webgl @tensorflow-models/face-landmarks-detection | TensorImage에 대한 연산처리 목적으로 사용 | - 카메라로 측정되는 이미지에 대한 연산 처리 및 Tenosor로 전달받은 정보에 대한 이미지 파일로 변환하는 용도로 활용할 수 있음 | https://adjh54.tistory.com/36 https://adjh54.tistory.com/236 |
2) 사용 편의 관련 총 정리
💡 사용 편의 관련
- 해당 부분에서는 실제 개발 부분이 아닌 편의상 도움이 되었던 부분에 대해서 링크를 포함하여 정리한 부분입니다.
| 분류 | 사용목적 | 링크 |
| 초기 개발환경 구성 | - react-native-cli를 기반하여 Typescript Template을 활용하여 초기 프로젝트를 구성하는 용도로 사용되었음. | https://adjh54.tistory.com/34 |
| 기기 빌드 속도 올리는 구성 | - 안드로이드의 빌드 속도를 올리기 위한 목적으로 gradle.properties 파일을 변경하여 속도를 올리는 용도로 사용됨. | https://adjh54.tistory.com/215 |
| 캐시 초기화 | - react-native에서 빌드때 캐시를 초기화 하는 목적으로 사용됨. | https://adjh54.tistory.com/247 |
| APK 파일 생성 방법 : keystore | - react-native를 빌드하여 apk를 추출하는 과정에서 이에 대한 설정으로 ‘keystore'를 통해서 구성하는데 사용됨. | https://adjh54.tistory.com/252 |
| 개발자 모드 활성화 방법 | - 갤럭시, 포코폰에 대해 개발자 모드를 활성화 하는 방법. | https://adjh54.tistory.com/259 https://adjh54.tistory.com/260 |
| 상세 디버깅 방법(Logcat, Profiler, App Insepction) | - 앱에 대한 CPU, MEMORY, ENERGY 사용량에 대한 측정 방법. | https://adjh54.tistory.com/296 |
3) 앱 배포 관련 총 정리
💡 앱 배포 관련 총 정리
- react-native에서 Andriod Google Playstore로 앱 배포를 위한 과정 부분을 링크를 포함하여 정리한 부분입니다.
| 분류 | 사용목적 | 링크 |
| Google Play Store 등록 방법 -1 | - 빌드 최적화 및 빌드 파일 구성, 안드로이드 개발자 가입 방법 | https://adjh54.tistory.com/301 |
| Google Play Store 등록 방법 -2 | - Google Play Console 초기 구성 방법 | https://adjh54.tistory.com/306 |
| Google Play Store 등록 방법 -3 | - 프로덕션 구성 및 출시 | https://adjh54.tistory.com/307 |
| 내부 테스트 시작 방법 | - 앱을 배포하기 이전에 내부 테스트를 구성하는 방법 | https://adjh54.tistory.com/330 |
| 내부 테스트 종료 방법 | - 앱을 배포하기 이전에 내부 테스트 진행에 따른 종료 구성 방법 | https://adjh54.tistory.com/331 |
오늘도 감사합니다. 😀
반응형