📱 React Native CLI로 안드로이드 앱 개발 환경 구축

오늘은 제가 React Native 앱을 직접 만들어보기 위해,
Windows 환경에서 React Native CLI 기반의 개발 환경을 세팅해보았습니다.
CLI 기반은 설정이 다소 복잡할 수 있지만, 네이티브 영역까지 다룰 수 있어서
이번 프로젝트에 딱 맞다고 판단했어요 😊

---

✅ 개발 환경 정보

• 운영체제: Windows 11
• React Native CLI
• Android Studio + AVD (에뮬레이터)
• Node.js (LTS)
• JDK 17 (Adoptium)
• VS Code (코드 편집기)

---

1️⃣ Node.js 설치

React Native는 Node.js 위에서 동작하기 때문에,
먼저 Node.js LTS 버전을 설치해주었습니다.

node -v
npm -v

버전 확인까지 잘 되면 OK!

---

2️⃣ JDK 설치

안드로이드 빌드에는 Java JDK가 필수라
Adoptium에서 JDK 17을 설치했어요.
설치 후에는 환경 변수 설정도 해줬습니다:

JAVA_HOME = C:\Program Files\Eclipse Adoptium\jdk-17.x.x

---

3️⃣ Android Studio 설치

에뮬레이터와 SDK, CLI 빌드 도구를 위해 Android Studio를 설치했습니다.
설치 후에는 아래 항목들을 꼭 확인했어요:

• Android SDK
• Command-line Tools
• Android Emulator
• AVD (가상 기기)

그리고 환경 변수도 추가해줍니다:

ANDROID_HOME = C:\Users\<YourName>\AppData\Local\Android\Sdk

---

4️⃣ React Native 프로젝트 생성

본격적으로 CLI를 사용해서 프로젝트를 생성했습니다.

npx @react-native-community/cli init MyApp
cd MyApp

---

📦 다양한 템플릿으로 시작하기

React Native CLI는 다양한 템플릿 옵션을 지원합니다. 필요에 따라 선택해보세요!

✅ TypeScript 템플릿

npx @react-native-community/cli init MyApp --template react-native-template-typescript

✅ Blank 템플릿 (기본)

npx @react-native-community/cli init MyApp

✅ Navigation 포함 템플릿

커뮤니티에서 제공되는 템플릿 중에는 React Navigation이 세팅된 것도 있어요:

npx react-native init MyApp --template @react-navigation/native-stack

템플릿은 개발 초기 구조와 설정을 간편하게 만들어줘서 정말 유용해요!

---

5️⃣ 안드로이드 에뮬레이터 실행

Android Studio의 AVD Manager에서 가상 기기를 하나 만들어두고,
CLI에서도 바로 실행 가능하다는 걸 알게 되어 아래 명령어도 써봤습니다:

emulator -list-avds
emulator -avd Pixel_5_API_33

---

6️⃣ 앱 실행하기

이제 드디어 앱을 에뮬레이터에서 실행해봤어요!

npx react-native run-android

에뮬레이터에 앱이 딱 뜨는 순간, 정말 기분이 좋았습니다 😊

---

📁 프로젝트 구조 요약

MyApp/
├── android/
├── ios/
├── App.tsx
├── package.json
└── ...

---

🧹 .gitignore 설정

Git에 불필요한 빌드 캐시나 환경 파일이 올라가지 않도록 .gitignore도 설정해두었습니다.

# 공통
node_modules/
*.log
*.env
.DS_Store

# Android 빌드
App/android/.gradle/
App/android/app/build/
App/android/.cxx/
App/android/app/.cxx/
App/android/app/Debug/

# iOS 빌드
App/ios/build/
*.keystore
*.jsbundle

---

✅ 마무리하며

이번에 React Native CLI로 안드로이드 앱을 만들기 위한 첫걸음을 뗐습니다.
환경 구성은 조금 손이 가지만, 직접 세팅하면서 네이티브 앱 구조에 대해 이해할 수 있어서 좋았어요.

다음엔 WebView를 붙이고, 백엔드 FastAPI 연결까지 도전해볼 예정입니다!
필요하신 분들께 도움이 되면 좋겠고, 궁금한 점은 언제든 댓글로 주세요 🙌

---