반응형
해당 글에서는 React-native 환경에서 Android Studio의 디버깅 툴(Locat, Profiler, App Inspection)을 사용하는 방법에 대해 알아봅니다.
1) Android Studio 디버깅 주요 기능
1. Logcat
💡 Logcat
- 안드로이드 스튜디오에서 제공하는 디버깅 도구이며, 애플리케이션에서 발생하는 로그 및 디바이스 로그 메시지를 표시해 줍니다
- 이를 통해 로그 출력을 모니터링하고 필터링하여 앱을 디버깅하기 쉽게 도와줍니다.
2. Profiler
💡 Profiler
- 안드로이드 스튜디오의 성능 분석 도구이며, 앱의 ‘CPU’, ‘메모리’, ‘배터리 사용량’ 등 다양한 측면에서 성능을 모니터링하고 분석할 수 있습니다.
- 이를 통해 앱의 성능 문제를 식별하고 최적화 할 수 있습니다.
3. App Inspection
💡 App Inspection
- 애플리케이션의 성능과 동작을 분석하는 도구이며, 애플리케이션의 데이터베이스, 네트워크, 백그라운드 작업 등을 모니터링하고 성능 문제를 식별할 수 있습니다.
- 이를 통해 애플리케이션의 레이아웃과 리소스 파일을 시각적으로 검사하고 수정할 수도 있습니다.
2) 기본 설정 과정
1. Andriod Studio를 설치합니다.
💡 [참고] MacOS의 경우는 homebrew를 통해서 설치가 가능합니다
# homebrew update 및 안드로이드 스튜디오 설치
$ brew update & brew install --cask andriod-studio
💡 [참고] Homebrew 명령에 대해 궁금하시면 아래의 글을 참고하시면 도움이 됩니다.
2. local.properties를 설정합니다.
💡 android 폴더 바로 아래에 local.properties 파일을 생성하여 아래 코드와 같이 구성합니다.
💡코드는 ’lee’라고 작성한 해당하는 부분을 각각 환경에 맞추어 구성하시면 됩니다
sdk.dir=/Users/lee/Library/Android/sdk
💡 [참고] 구성한 소스코드의 폴더에 들어가보면 Andriod의 SDK를 확인할 수 있습니다.
[ 더 알아보기 ]
💡 local.properties를 구성해야 하는 이유는 뭘까?
- 프로젝트의 루트 디렉토리에 위치한 파일입니다. 이 파일은 주로 개발 환경에 대한 구성을 저장하는 데 사용됩니다.
예를 들어, SDK 경로, 디버그 키, API 키 등을 설정할 수 있습니다. 이 파일은 보안상의 이유로 버전 관리 시스템에 포함되지 않아야 합니다. 프로젝트를 공유하거나 협업하는 경우, local.properties 파일의 존재와 중요성을 이해하고 적절한 설정을 유지하는 것이 중요합니다.
💡 또한 아래와 같이 디바이스를 연결해 둔 상태여도 Andriod Studio에서 연결을 못하는 상황입니다.
3. Android Studio에서 구성한 react-native 프로젝트 중 ‘android’ 폴더를 엽니다.
4. 프로젝트 내에 연결된 디바이스를 확인합니다.
3) Logcat 수행과정
💡 Logcat 수행과정
- 해당 Locat의 과정은 디바이스를 연결하고 Metro Bundler로 빌드가 된 상태라면 즉시 상세한 로그를 확인할 수 있습니다.
1. View - Tool Windows - Logcat 탭을 눌러서 Logcat을 확인합니다.
2. Logcat 탭에서 상세한 로그가 확인이 가능합니다.
3. ReactNative 관련 메시지만 보고 싶으면 “ReactNativeJS” 필터를 걸어주면 콘솔 출력에 대한 로그만 확인이 가능합니다
4) Profiler 수행과정
1. 터미널에서 React-native Metro를 수행시킵니다.
2. Android Studio에서 Run - Profile... 을 누릅니다
3. app - Run을 선택하여 빌드를 하면 Profiler가 활성화 됩니다
4. View - Tool Windows - Profiler 탭을 열어둡니다.
[참고] 만약에 No debuggable processes detected 상태라면 해결방법
💡 현재 켜져있는 ‘앱을 종료하고 다시 앱을 키면’ 해당 문제가 해결되는것을 확인할 수 있습니다.
💡 또한, 종종 profile 빌드가 켜지지 않은 상태로 있을수 있으니 항상 켜져있는지 확인합니다.
5. 탭 내에서 자동으로 연결되거나 혹은 + 기호를 눌러서 연결된 디바이스로 확인을 합니다.
6. 현재 수행중인 앱에 대한 CPU, MEMORY, ENERGY 값을 실시간으로 확인할 수 있습니다.
5) App Inspection 수행과정
1. 터미널에서 React-native Metro를 수행시킵니다.
2. Android Studio에서 Run - Profile... 을 누릅니다
3. app - Run을 선택하여 빌드를 하면 App Inspection가 활성화 됩니다
4. View - Tool Windows - App Inspection 탭을 열어둡니다.
[참고] 만약에 No debuggable processes detected 상태라면 해결방법
💡 현재 켜져있는 앱을 종료하고 다시 앱을 키면 해당 문제가 해결되는것을 확인할 수 있습니다.
💡 또한, 종종 profile 빌드가 켜지지 않은 상태로 있을수 있으니 항상 켜져있는지 확인합니다.
5. 현재 수행중인 앱에 대한 Database Inspector, Network Inspector, Background Task Inspector를 확인할 수 있습니다
99) 참고 : 오류노트
1. Unable to determine application id: cohttp://m.android.tools.idea.run.ApkProvisionException
Unable to determine application id: com.android.tools.idea.run.ApkProvisionException: Error loading build artifacts from: /Users/lee/Desktop/workspace/xxxx/xxxx/android/app/build/intermediates/apk_ide_redirect_file/debug/redirect.txt
💡 해결방법 :Clean Project, Rebuild Project, Invalidate Caches..를 수행합니다.를 수행합니다.
💡 Build - Clean Project 를 수행합니다.
💡 Build - Rebuild Project를 수행합니다.
💡 File - Invalidate Caches.. 를 수행합니다.
오늘도 감사합니다. 😀
반응형
'React & React Native > 이해하기' 카테고리의 다른 글
[React/RN] Axios Interceptor 동작 방법 이해하고 활용하기: JWT, 특정 URL 제외 (0) | 2024.10.19 |
---|---|
[RN] React Native Android 12 알림 권한 체크 및 권한 요청 방법 : react-native-permission (0) | 2024.04.05 |
[RN] React Native 빌드 캐시 초기화 및 최신 버전 설치 명령어 : react-native-cli, yarn, watchman, metro, gradle, adb (0) | 2023.09.11 |
[React] 캐시 무효화(Cache Busting) 이해하고 적용하기 (2) | 2022.10.14 |
[React] router / router-dom v5 → v6 버전 업 이해하기 (2) | 2022.06.29 |