React Native 프로젝트 생성하기(윈도우, 안드로이드)Init React Native Project(Windows, Android)
📅
🚀
들어가기 전에 🔗
React-Native는 페이스북에서 개발한 오픈소스 모바일 앱 개발 프레임워크로, 자바스크립트와 리액트를 사용하여 iOS와 안드로이드 앱을 개발할 수 있게 해준다.
React-Native 개발환경 설치를 위해 필요한 환경을 구축하는 방법을 알아보자.
필자는 Windows 환경에서 진행하였다.
Expo CLI, React Native CLI 두 가지 방법으로 설치할 수 있다.
이 포스팅에서는 React Native CLI를 사용하여 설치하는 방법을 다룬다.
설치 전 필수적으로
Node.js
, JDK
, Android Studio
를 설치해야 한다.🚀
Node.js 설치 🔗
Node.js는 자바스크립트 런타임 환경으로, React Native 개발을 위해 필수적으로 설치해야 한다.
Node.js 공식 홈페이지에서 LTS 버전을 다운로드 받아 설치한다.
Node.js 공식 홈페이지↗
설치가 완료되면 다음 명령어를 통해 버전을 확인한다.
node -v🚀
JDK 설치 🔗
JDK는 자바 개발 환경으로, React Native 개발을 위해 필수적으로 설치해야 한다.
Oracle JDK 또는 OpenJDK 중 하나를 설치한다.
Oracle JDK 다운로드(추천)↗
OpenJDK 다운로드↗
🖐️
JDK 20이하 버전 다운로드를 해야 한다✅
환경변수 설정 🔗
JDK 설치 경로를 환경변수에 등록한다.
- 제어판 > 시스템 및 보안 > 시스템 > 고급 시스템 설정 > 환경변수
- 시스템 변수에서 새로 만들기를 클릭하여 변수 이름에 JAVA_HOME, 변수 값에 JDK 설치 경로를 입력한다.
- 기본:
C:\Program Files\Java\jdk-버전
- 기본:
- 시스템 변수 중 Path를 선택하고 편집을 클릭한다.
- 새로 만들기를 클릭하여 %JAVA_HOME%\bin을 입력한다.
- 확인을 눌러 설정을 저장한다.
설치가 완료되면 다음 명령어를 통해 버전을 확인한다.
java -version🚀
Android Studio 설치 🔗
Android Studio는 안드로이드 앱 개발을 위한 통합 개발 환경으로, React Native 개발을 위해 필수적으로 설치해야 한다.
Android Studio 공식 홈페이지에서 다운로드 받아 설치한다.
Android Studio 공식 홈페이지↗
✅
환경변수 설정 🔗
- 실행 후, More Action > SDK Manager를 클릭하여 sdk 경로를 확인한다.
- 제어판 > 시스템 및 보안 > 시스템 > 고급 시스템 설정 > 환경변수
- 시스템 변수에서 새로 만들기를 클릭하여 변수 이름에 ANDROID_HOME, 변수 값에 SDK 경로를 입력한다.
- 기본:
C:\Users\사용자명\AppData\Local\Android\Sdk
- 기본:
- 시스템 변수 중 Path를 선택하고 편집을 클릭한다.
- 새로 만들기를 클릭하여 %ANDROID_HOME%\platform-tools를 입력한다.
- 확인을 눌러 설정을 저장한다.
설치가 완료되면 다음 명령어를 통해 버전을 확인한다.
adb --version🚀
React Native 설치 🔗
✅
React Native 프로젝트 생성 🔗
다음 명령어를 통해 React Native 프로젝트를 생성한다.
npx react-native init {프로젝트명}✅
Android Studio 실행 🔗
Android Studio를 실행하여 AVD(Android Virtual Device)를 생성한다.
- More Actions > VD Manager를 클릭한다.
- Create Virtual Device를 클릭하여 원하는 디바이스를 선택한다.
- Next를 클릭하여 시스템 이미지를 선택한다.
- Finish를 클릭하여 VD를 생성한다.
- VD가 생성되면 Start를 클릭하여 실행한다.
✅
프로젝트 실행 🔗
프로젝트 폴더로 이동하여 다음 명령어를 통해 프로젝트를 실행한다.
npm start선택 창이 나오면
a를 눌러 안드로이드 앱을 실행한다.
AVD가 실행되면 앱이 설치되고 실행된다.
🚀
문제 발생 및 해결 🔗
✅
빌드 에러 java.io.UncheckedIOException 🔗
java.io.UncheckedIOException: Could not move temporary workspace
아래를 참고해 파일을 수정하여 gradle 버전을 8.5로 변경한다.
distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists
distributionUrl=https\://services.gradle.org/distributions/gradle-8.5-all.zip # 8.6 -> 8.5로 변경
networkTimeout=10000
validateDistributionUrl=true
zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists🚀