[React Native] React-Native-Cli 개발환경 구축하기(1)

 

아래 블로그를 참고하여 리액트 네이티브 안드로이드 개발환경을 구축하였다.

리액트 네이티브 개발을 위해서는 Expo와 React-Native-Cli을 사용한다고 하는데 여기서는 React-Native-Cli 설치로 진행할 예정이다.

https://yun5o.tistory.com/entry/React-Native-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%84%A4%EC%9D%B4%ED%8B%B0%EB%B8%8C-%EA%B0%9C%EB%B0%9C%ED%99%98%EA%B2%BD-%EC%84%A4%EC%A0%951-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0

[React Native] 리액트 네이티브 개발환경 설정(1/6) - 시작하기

---

1. Node.js 설치

https://nodejs.org/en/

Node.js — Run JavaScript Everywhere

그냥 계속 Next를 클릭하여 설치한 후 잘 설치되었는지 확인하기 위해 cmd창을 열어 아래와 같이 입력하여 버전이 잘 나오면 잘 설치 된 것이다.

---

2. React-Native-Cli 설치

vs-code에서 Terminal > New Terminal을 열러 아래의 명령어를 입력해준다.

npm install -g react-native-cli

그리고 잘 설치되어 있는지 확인해준다.

react-native -v

---

3. JDK 설치

https://www.oracle.com/java/technologies/downloads/#java11-windows

Download the Latest Java LTS Free

위 링크로 들어가서 첫 번째를 JAVA11을 설치해주었다.

그리고 나는 기존에 설치되어 있던Java8을 이용해 경로 설정을 했기 때문에 Java8이 설치되어 있지 않으면 나중에 필요하게 되어 설치해두는게 좋다.

https://www.oracle.com/java/technologies/downloads/#java8-windows

Download the Latest Java LTS Free

아래 사진에서 두 번째 것을 설치하였다.

---

4. JDK 환경변수 설정

내 PC > 우클릭 속성 > 고급 시스템 설정으로 들어와 환경변수를 클릭하고 User에 대한 사용자 변수에 새로 만들기를 클릭하여 아래와 같이 만들어준다.

그 다음 시스템 변수에 있는 Path변수 편집 > 새로 만들기를 눌러 %JAVA_HOME%\bin을 추가해준다.

잘 설치되었는지 확인하기 위해 vs code 터미널에 아래와 같이 입력해서 버전이 잘 출력되는지 확인한다.

java -version

---

❗해결 오류

* 만약 자바버전을 확인했을 때 11이 아닌 경우

고급 시스템 설정 보기 > 환경 변수 > 시스템 변수의 Path 변수 편집 > %JAVA_HOME%\bin을 javapath 위로 이동

https://yun5o.tistory.com/entry/JAVA-%EC%9E%90%EB%B0%948%EC%97%90%EC%84%9C-%EC%9E%90%EB%B0%9411%EB%A1%9C-%EB%B2%84%EC%A0%84-%EB%B3%80%EA%B2%BD%ED%95%98%EA%B8%B0

[JAVA] 자바8에서 자바11로 버전 변경하기

---

 

5. 안드로이드 스튜디오 설치

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

Android 스튜디오 및 앱 도구 다운로드 - Android 개발자  |  Android Studio  |  Android Developers

위 사이트로 들어가 Android 스튜디오 Jellyfish 다운로드를 클릭하고 다 Next를 클릭해 다운로드를 진행한다.

---

6. 안드로이드 스튜디오 환경변수 설정

안드로이스 스튜디오를 설치하고 나오는 첫 화면에서 SDK Manager > Android SDK에서 Android SDK Location을 복사해준다.

그리고 고급 시스템 설정에 와서 시스템 변수의 ANDROID_HOME의 변수 값을 동일하게 설정해준다.

User에 대한 사용자 변수에서 Path 편집 > 새로만들기 > %ANDROID_HOME%\platfom-tools를 추가해준다.

잘 설치되었는지 확인하기 위해 vs code 터미널에 아래와 같이 입력해준다.

adb --version

---

❗해결 오류

* 'adb'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다.

위 에러가 발생할 경우 환경변수 설정을 다시 한 번 꼼꼼히 확인해보면 된다.

https://curiousengineer.tistory.com/12

'adb'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다.