[RN/Short] React Native 자주 사용하는 명령어 package.json scripts로 구성하기 : Run, Build

해당 글에서는 react-native에서 자주 사용하는 명령어들을 pacakge.json 파일 내에서 scripts로 구성하여서 편하게 이용하기 위한 방법을 확인해 봅니다.

 

1) Run

---

 

1. Android

---

💡Android 실행 명령어

- 해당 실행 명령어는 연결되거나 혹은 안드로이드 시뮬레이터를 실행하기 위한 스크립트입니다.

- 기본적으로 “npx react-native run-android” 명령어를 통해서 안드로이드를 실행하는 명령어로 구성되었습니다.
- --port 8081 옵션을 통해서, 개발 서버를 8081 포트로 실행하도록 지정하였습니다. 이는 일반적으로 사용하는 8080 로컬 서버와의 충돌을 피하기 위해 지정하였습니다.
- APP_ENV=local은 dotenv에서 지정한 환경 파일을 불러오기 위해 애플리케이션 환경 변수를 local로 설정하였습니다.

"scripts": {
	"an": "npx react-native run-android --port 8081 APP_ENV=local",
}

 
 

💡[참고] dotenv에 대해 궁금하시면 아래의 글을 참고하시면 도움이 됩니다.

[RN] react-native dotenv 이해하고 설정하기 : Typescript와 함께 사용

 

2. iOS

---

💡iOS 실행 명령어

- 해당 실행 명령어는 연결되거나 혹은 iOS 시뮬레이터를 실행하기 위한 스크립트입니다.

- 기본적으로 “npx react-native run-ios” 명령어를 통해서 iOS를 실행하는 명령어로 구성되었습니다.
- --port 8081 옵션을 통해서, 개발 서버를 8081 포트로 실행하도록 지정하였습니다. 이는 일반적으로 사용하는 8080 로컬 서버와의 충돌을 피하기 위해 지정하였습니다.
- APP_ENV=local은 dotenv에서 지정한 환경 파일을 불러오기 위해 애플리케이션 환경 변수를 local로 설정하였습니다.

"scripts": {
	"ios": "react-native run-ios --port 8081 APP_ENV=local",
}

 
 

2) Build Clean

---

 

1. React-Native 빌드 파일 정리 : react-native —reset-cache

---

💡React-Native 빌드 파일 정리 : react-native —reset-cache

- 해당 실행 명령어를 통해 이전의 빌드의 캐시를 삭제하고 재 실행하는 스크립트입니다.

- 기본적으로 “npx react-native start” 명령어를 통해서 특정 플랫폼에 국한되지 않고 연결된 플랫폼에서 실행을 수행합니다.
- --port 8081 옵션을 통해서, 개발 서버를 8081 포트로 실행하도록 지정하였습니다. 이는 일반적으로 사용하는 8080 로컬 서버와의 충돌을 피하기 위해 지정하였습니다.
- --reset-cache 옵션을 통해서, 이전에 빌드된 캐시를 초기화합니다.

"scripts": {
	"clean": "npx react-native start --port 8081 --reset-cache",
}

 
 

[ 더 알아보기 ]

💡 npx react-native start --reset-cache 명령어를 수행하면 삭제되는 캐시들은 무엇인가

캐시 종류	설명
Metro 번들러 캐시	JavaScript 코드와 관련된 캐시가 삭제됩니다. 이는 코드 변경사항이 즉시 반영되도록 합니다.
Babel 변환 캐시	JavaScript 코드의 Babel 변환 결과물 캐시가 삭제됩니다.
Haste 모듈 맵 캐시	React Native의 모듈 시스템에서 사용하는 캐시가 초기화됩니다.
Hot Module Replacement (HMR) 캐시	실시간 코드 업데이트와 관련된 캐시가 삭제됩니다.
Asset 캐시	이미지, 폰트 등 애셋 파일과 관련된 캐시가 초기화됩니다.

 

2. 안드로이드 빌드 파일 정리 : gradle clean

---

💡안드로이드 빌드 파일 정리 : gradle clean

- 안드로이드 AAB(Android App Bundle) 파일을 빌드하는 명령어입니다.
- 첫 번째 명령어가 실패하면 두 번째 명령어를 실행하도록 합니다. (|| 연산자를 통해서 이를 구성하였습니다)

1. 첫 번째 명령어: cd android 2>/dev/null && ./gradlew bundleRelease

- 현재 디렉터리에서 android 폴더로 이동합니다. 2>/dev/null은 오류 메시지를 무시합니다.
- android 폴더로 이동에 성공하면, ./gradlew bundleRelease 명령을 실행하여 AAB를 빌드합니다.

2. 두 번째 명령어: (cd .. && cd android && ./gradlew bundleRelease)

- 현재 디렉터리에서 상위 디렉터리로 이동한 후 (cd ..), android 폴더로 이동합니다.
- android 폴더로 이동 후, ./gradlew bundleRelease 명령을 실행하여 AAB를 빌드합니다.

"scripts": {
	"an:clean": "cd android 2>/dev/null && ./gradlew clean || (cd .. && cd android && ./gradlew clean)",
}

 

[ 더 알아보기 ]

💡./gradlew clean 명령어를 수행하면 삭제되는 캐시들

삭제 항목	설명
build 디렉토리	프로젝트의 컴파일된 클래스 파일, 리소스 파일, 중간 빌드 결과물 등이 삭제됩니다.
.gradle 디렉토리	Gradle의 작업 디렉토리로, 빌드 캐시와 임시 파일들이 제거됩니다.
generated 파일들	빌드 과정에서 자동 생성된 파일들(예: R.java)이 삭제됩니다.
Gradle 데몬 캐시	Gradle 데몬이 사용하는 캐시가 초기화됩니다.
의존성 캐시	로컬에 저장된 라이브러리 의존성 캐시가 제거될 수 있습니다.

 
 

3. ios 빌드 파일 정리 : pod clean

---

 💡iOS 빌드 파일 정리 : pod clean

- iOS 빌드 파일 정리를 위한 pod clean 명령어입니다.
- 첫 번째 명령어가 실패하면 두 번째 명령어를 실행하도록 합니다. (|| 연산자를 통해서 이를 구성하였습니다)

1. 첫 번째 명령어: cd ios 2>/dev/null && pod cache clean --all

- 현재 디렉터리에서 ios 폴더로 이동합니다. 2>/dev/null은 오류 메시지를 무시합니다.
- ios 폴더로 이동에 성공하면, pod cache clean --all 명령을 실행하여 pod 캐시를 정리합니다.

2. 두 번째 명령어: (cd .. && cd ios && pod cache clean --all)

- 현재 디렉터리에서 상위 디렉터리로 이동한 후 (cd ..), ios 폴더로 이동합니다.
- ios 폴더로 이동 후, pod cache clean --all 명령을 실행하여 pod 캐시를 정리합니다.

"scripts": {
    "ios:clean": "cd ios 2>/dev/null && pod cache clean --all || (cd .. && cd ios && pod cache clean --all)",
}

 
 

[ 더 알아보기 ]

💡 pod cache clean --all 명령어를 통해 삭제되는 캐시들

캐시 종류	설명
Pod 스펙 캐시	CocoaPods가 다운로드한 Pod 스펙 파일들이 삭제됩니다.
Pod 소스 캐시	다운로드된 Pod 소스 코드 캐시가 제거됩니다.
Pod 메타데이터 캐시	Pod 버전 정보, 의존성 정보 등의 메타데이터 캐시가 삭제됩니다.
Pod 검색 인덱스	Pod 검색을 위한 인덱스 파일이 초기화됩니다.
Pod 다운로드 캐시	이전에 다운로드된 Pod 아카이브 파일들이 제거됩니다.

 

3) Build

---

 

1. apk 파일로 빌드

---

💡apk 파일로 빌드

- 첫 번째 명령어가 실패하면 두 번째 명령어를 실행하도록 합니다. (|| 연산자를 통해서 이를 구성하였습니다)

1. 첫 번째 명령어 : cd android 2>/dev/null && ./gradlew assembleRelease

- 현재 디렉터리에서 android 폴더로 이동합니다. 2>/dev/null은 오류 메시지를 무시합니다.
- android 폴더로 이동에 성공하면, ./gradlew assembleRelease 명령을 실행하여 APK를 빌드합니다.

2. 두 번째 명령어 : (cd .. && cd android && ./gradlew assembleRelease)

- 현재 디렉터리에서 상위 디렉터리로 이동한 후 (cd ..), android 폴더로 이동합니다.
- android 폴더로 이동 후, ./gradlew assembleRelease 명령을 실행하여 APK를 빌드합니다.

"scripts": {
	"build:apk": "cd android 2>/dev/null && ./gradlew assembleRelease || (cd .. && cd android && ./gradlew assembleRelease)",
}

 
 
 

2. aab 파일로 빌드

---

💡aab 파일로 빌드

- 첫 번째 명령어가 실패하면 두 번째 명령어를 실행하도록 합니다. (|| 연산자를 통해서 이를 구성하였습니다)

1. 첫 번째 명령어 : cd android 2>/dev/null && ./gradlew bundleRelease

- 현재 디렉터리에서 android 폴더로 이동합니다. 2>/dev/null은 오류 메시지를 무시합니다.
- android 폴더로 이동에 성공하면, ./gradlew bundleRelease 명령을 실행하여 AAB를 빌드합니다.

2. 두 번째 명령어 : (cd .. && cd android && ./gradlew bundleRelease)

- 현재 디렉토리에서 상위 디렉토리로 이동한 후 (cd ..), android 폴더로 이동합니다.
 - android 폴더로 이동 후, ./gradlew bundleRelease 명령을 실행하여 AAB를 빌드합니다.

"scripts": {
	"build:aab": "cd android 2>/dev/null && ./gradlew bundleRelease || (cd .. && cd android && ./gradlew bundleRelease)"
}

 
 

4) 최종 구성 스크립트 정리

---

구성 명령어(npm)	구성 명령어(yarn)	설명
npm an	yarn an	8081 포트에서 안드로이드 기기에 실행합니다
npm ios	yarn ios	8081 포트에서 iOS 기기에 실행합니다.
npm clean	yarn clean	캐시를 제거하고 8081 포트로 재 실행합니다.
npm an:clean	yarn an:clean	Gradle 빌드된 파일들의 캐시를 초기화합니다.
npm ios:clean	yarn ios:clean	iOS 빌드된 파일들을 초기화합니다.
npm build:apk	yarn build:apk	안드로이드 기기를 빌드하여 .apk 확장자의 파일을 생성합니다.
npm build:aab	yarn build:aab	안드로이드 기기를 빌드하여 .aab 확장자의 파일을 생성합니다.

"scripts": {
	"an": "npx react-native run-android --port 8081 APP_ENV=local",
	"ios": "react-native run-ios --port 8081 APP_ENV=local",
	"clean": "npx react-native start --port 8081 --reset-cache",
	"an:clean": "cd android 2>/dev/null && ./gradlew clean || (cd .. && cd android && ./gradlew clean)",
	"ios:clean": "cd ios 2>/dev/null && pod cache clean --all || (cd .. && cd ios && pod cache clean --all)",
	"build:apk": "cd android 2>/dev/null && ./gradlew assembleRelease || (cd .. && cd android && ./gradlew assembleRelease)",
	"build:aab": "cd android 2>/dev/null && ./gradlew bundleRelease || (cd .. && cd android && ./gradlew bundleRelease)"		
}

 
 
 
 
오늘도 감사합니다. 😀