React & React Native/이해하기

[RN] React Native 빌드 캐시 초기화 및 최신 버전 설치 명령어 : react-native-cli, yarn, watchman, metro, gradle, adb

adjh54 2023. 9. 11. 17:13
728x170
해당 글에서는 react-native에서 빌드 중 충돌이 발생한 경우 캐시를 초기화하거나 최신버전으로 설치하는 방법에 대해 공유합니다.

 

 

1) react-native-cli 


💡 react-native-cli

- React Native 애플리케이션을 더 쉽게 개발할 수 있도록 도와주는 명령 줄 인터페이스(CLI)입니다.

 

 

1. react-native-cli 최신버전 설치


 

 

@react-native-community/cli

React Native CLI. Latest version: 11.3.7, last published: a month ago. Start using @react-native-community/cli in your project by running `npm i @react-native-community/cli`. There are 79 other projects in the npm registry using @react-native-community/cli

www.npmjs.com

# 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
디바이스 안드로이드 버전 확인

 

 

 

 

오늘도 감사합니다. 😀

 

 

 

 

그리드형