반응형
해당 글에서는 react-native에서 빌드 중 충돌이 발생한 경우 캐시를 초기화하거나 최신버전으로 설치하는 방법에 대해 공유합니다.
1) react-native-cli
💡 react-native-cli
- React Native 애플리케이션을 더 쉽게 개발할 수 있도록 도와주는 명령 줄 인터페이스(CLI)입니다.
1. react-native-cli 최신버전 설치
# react-native-cli의 버전을 확인합니다.
$ npx @react-native-community/cli --v
# react-native-cli 삭제
$ yarn global remove @react-native-community/cli
# react-native-cli 최신 버전 설치
$ yarn global add @react-native-community/cli
# react-native-cli의 특정 버전 설치
$ yarn global add @react-native-community/cli@[버전]
2. react-native-cli 캐시 삭제
# 리액트 네이티브 CLI 캐시를 삭제하는 명령어입니다.
$ rm -rf $TMPDIR/react-*
# react-native-cli 캐시를 초기화 하고 시작합니다.
$ yarn start --reset-cache
2) yarn
💡 yarn
- 프로젝트에 필요한 패키지를 설치하거나 업데이트할 수 있습니다.
1. yarn 최신버전 설치
# yarn 버전 확인
$ yarn -version
# yarn 버전 업그레이드
$ yarn upgrade
2. yarn 캐시 초기화
# yarn 캐시 디렉터리를 삭제합니다.
$ yarn cache clean
# yarn 패키지를 새롭게 다운로드하고 의존성 트리를 다시 구성하게 됩니다.
$ rm yarn.lock & yarn
3) watchman
💡 watchman
- 개발한 파일을 감시하고 변경될 때 작업을 트리거하는 도구입니다. React Native와 함께 사용하여 개발 서버의 파일 감시 기능을 개선하는 데 자주 사용됩니다.
1. watchman 최신버전 설치
# watchman 버전 확인
$ watchman version
# watchman 최신버전 설치
$ brew update
$ brew install watchman
2. watchman 캐시 초기화
# watchman 서버를 종료합니다.
$ watchman shutdown-server
# watchman 캐시 초기화
$ watchman watch-del-all
# watman 재가동
$ watchman
4) metro
💡 metro
- 앱의 번들링과 패키징을 담당하는 JavaScript 번들러입니다.
- React Native CLI를 사용하여 React Native 프로젝트를 시작하면 Metro가 자동으로 실행되어 JavaScript 파일을 번들링 하고 앱을 실행할 때 필요한 번들을 생성합니다.
1. metro 최신 버전 설치
# metro 버전확인
$ npx metro --version
# metro 최신 버전 설치
$ npx react-native start --reset-cache
5) Andriod Gradle
💡 Gradle
- React Native 프로젝트에서 Gradle을 초기화하면 안드로이드 기기 또는 에뮬레이터에서 앱을 빌드하고 실행하기 위한 필수 파일과 구성이 설정됩니다.
# andriod 폴더로 이동합니다.
$ cd andriod/
# 실행중인 gradle 데몬을 중지합니다.
$ ./gradlew --stop
# 빌드 캐시를 지우고 빌드 아웃 디렉토리를 삭제합니다.
$ ./gradlew clean
# 빌드 캐시 디렉토리를 삭제합니다.
$ ./gradlew cleanBuildCache
6) adb(Android Debug Bridge)
💡 adb(Android Debug Bridge)
- 안드로이드 디바이스와 컴퓨터를 연결하여 디바이스를 제어하고 다양한 작업을 수행하는 도구입니다.
# adb 설치
$ brew install --cask android-platform-tools
# 현재 연결된 디바이스를 확인합니다.
$ adb devices
# 연결된 디바이스에서 8080 포트를 사용하는 서버에 로컬 컴퓨터에서 접속할 수 있도록 포트 포워딩을 설정합니다.
$ adb -s xxx reverse tcp:8080 tcp:8080
# 현재 모든 연결된 디바이스를 분리합니다.
$ adb disconnect
# 로컬 컴퓨터에서 사용하는 8081 포트를 디바이스에서 사용하는 8081 포트로 전달합니다.
$ adb reverse tcp:8081 tcp:8081
# 현재 설정된 포트 포워딩 및 리버스 포트 포워딩 목록을 확인합니다.
$ adb reverse --list
# adb 서비스 다시 실행
$ adb start-server
# adb 서비스 종료
$ adb kill-server
# 디바이스 아키텍처 확인 명령어
$ adb shell getprop ro.product.cpu.abi
# 디바이스 안드로이드 버전 확인 명령어
adb devices
adb -s <장치 시리얼 번호> shell getprop ro.build.version.release
명령어 | 설명 |
brew install --cask android-platform-tools | adb 설치 |
adb devices | 현재 연결된 디바이스 확인 |
adb -s xxx reverse tcp:8080 tcp:8080 | 로컬 컴퓨터에서 연결된 디바이스의 8080 포트 포워딩 설정 |
adb disconnect | 현재 모든 연결된 디바이스 분리 |
adb reverse tcp:8081 tcp:8081 | 로컬 컴퓨터에서 사용하는 8081 포트를 디바이스로 전달 |
adb reverse --list | 설정된 포트 포워딩 및 리버스 포트 포워딩 목록 확인 |
adb start-server | adb 서비스 다시 실행 |
adb kill-server | adb 서비스 종료 |
adb shell getprop ro.product.cpu.abi | 디바이스 아키텍처 확인 |
adb devices adb -s <장치 시리얼 번호> shell getprop ro.build.version.release |
디바이스 안드로이드 버전 확인 |
오늘도 감사합니다. 😀
반응형
'React & React Native > 이해하기' 카테고리의 다른 글
[RN] React Native Android 12 알림 권한 체크 및 권한 요청 방법 : react-native-permission (0) | 2024.04.05 |
---|---|
[RN] React Native Android Studio 디버깅 이용방법: Logcat, Profiler, App Inspection (0) | 2023.10.25 |
[React] 캐시 무효화(Cache Busting) 이해하고 적용하기 (2) | 2022.10.14 |
[React] router / router-dom v5 → v6 버전 업 이해하기 (2) | 2022.06.29 |
[React] 함수형 컴포넌트 생명주기(lifecycle) 이해하기 (2) | 2022.06.12 |