[React-Native] react-native-cli 환경 구축

https://reactnative.dev/docs/getting-started

https://reactnative.dev/docs/components-and-apis

 

Node.js 설치

https://nodejs.org/en

v20.11.0

 

Jdk 설치

• OpenJDK 8

https://www.azul.com/downloads/?version=java-8-lts&os=windows&architecture=x86-64-bit&package=jdk#zulu

• openJDK17 (권장)

https://www.azul.com/downloads/?version=java-17-lts&os=windows&architecture=x86-64-bit&package=jdk#zulu

 

jdk8.0.402

 

react-native-cli 설치

cmd > 

npm install -g react-native-cli

npm install -g react-native

 

안드로이드 스튜디오 설치

https://developer.android.com/studio?hl=ko

https://developer.android.com/studio/archive?hl=ko

https://plugins.jetbrains.com/docs/intellij/android-studio-releases-list.html#2023

 

• 나머지 모두 Next, Accept

설치 후

• More Actions > SDK Manager > Show Package Details 선택 > 필요한 sdk 설치

 

• Android 최신 버전 2개 정도 설치 권장

 

환경 변수 설정

 

환경변수 > 새로 만들기

변수 이름 : ANDROID_HOME

변수 값 : sdk 경로

• SDK 경로 찾기

android studio > More Actions > SDK Manager > 상단 Android SDK Location

 

사용자 변수 > Path 편집

새로 만들기 > SDK 경로\platform-tools

 

환경 변수 < 새로 만들기 x

변수 이름 : ANDROID_SDK_ROOT

변수 값 : SDK 설치 폴더

 

사용자 변수 > Path > 편집 > %ANDROID_SDK_ROOT% 추가

 

확인

cmd > adb

 

visual studio code 설치

https://code.visualstudio.com/

 

참고

https://firework-ham.tistory.com/103

https://solbel.tistory.com/1012

https://myung-ho.tistory.com/70

---

프로젝트 세팅

프로젝트 생성

프로젝트명은 camelCase 또는 '-' 만 포함하게 만들어야 함.

cmd > react-native init [프로젝트명]

 

vsCode > npx react-native init project1

• typescript 프로젝트가 생성됨

 

cli.init 오류

• react-native-cli 삭제 후 재설치

 

javascript로 변경하고 싶은 경우

• App.tsx 파일명을 App.js 로 변경

• 빨간 줄 뜨는 부분 삭제

 

---

프로젝트 실행

Android Studio 에서 androidProject 실행

Open

 

프로젝트 내 android 폴더를 open (mac 인 경우 ios 폴더 open)

 

자동으로 gradle build가 됨

 

열린 폴더 구조

 

Settings > jdk 버전 변경

 

AVD 실행

 

cmd > react-native doctor 명령어로 상태 확인

 

metro 시작

• vscode > npm start

 

둘 중 하나로 애플리케이션 시작

• cmd > react-native run-android --terminal powershell.exe
• vscode > npm run android (실행 전 package.json > scripts > android 뒤에 –terminal 옵션 추가)

• a 선택

• emulator 에 프로젝트가 보임

• 이후부터 android studio는 종료해도 됨
• vscode 에서 npm start 로 실행 가능
• android studio를 종료하지 않는다면 studio의 애뮬레이터로 실행
• 종료한다면 vscode 에서 npm start 시 애뮬레이터가 실행됨

 

debugging

• 프로젝트가 실행된 상태에서 react-devtools 실행