[react-native] 그냥 화면만 띄워 보려다 발생한 삽질들

react-native가 뭔지 그냥 순수한 궁금증에 설치하고 화면만 띄워보려다가 발생한 삽질 리스트이다.

 

필수

node.js설치

npm 설치

jdk 설치

 

일단 안드로이드로 띄우기 위해서 나는 설치를 했다.

안드로이드 설치(안드로이드 개발 시)

 

 

처음 시작은 공식 사이트를 보고 열심히 설정을 했었다...

https://reactnative.dev/docs/environment-setup 

Setting up the development environment · React Native

모든 설치를 마치고 나면 나타나는것은

  Run instructions for Android:
    • Have an Android emulator running (quickest way to get started), or a device connected.
    • cd "E:\react-native\AwesomeProject" && npx react-native run-android

  Run instructions for Windows:
    • See https://aka.ms/ReactNativeGuideWindows for the latest up-to-date instructions.

 

 

명령어로 실행을 하란다. 그런데 나는 에러가 뜨네??

 

일단 첫번째 오류인데 몇가지 시도를 해봤었다.

 

1 : gradle-wrapper.properties, build.gradle 수정
 - https://genie247.tistory.com/158
 - 실패

2. node_modules폴더를 백업한 뒤(삭제나 폴더명 변경) npm install로 modules를 새로 설치

3. npm install axios --save   axios를 설치...? 왜???
 - 실패

4. npm install webpack-cli@3.3.12 --save-dev 설치..왜?
 - 실패

5. node_modules폴더, package-lock.json.파일 삭제 후 npm cache clean --force로 npm 캐시 삭제 후 npm install
 - 실패

6. 폴더를 한글이나 스페이스 등 이 없는곳으로 이동

 

5번또는 6번으로 해결이 될 것이다. 그래도 안 된다면 1번을 해볼것! 2,3,4는 그냥 잘못된 것이었다.. 나의 경우에는 6번으로 해결이 되었음(...)

 

 

위를 해결하고 잘 넘어가는 듯 했으나 새로운 오류가 발생!

자바 버전이 안 맞단다.....그래서 맞춰서 open jdk11로 설치를 하고 환경변수의 폴더를 바꿔줘서 해결되었다.

 

이러고 또 다른 오류 발생!!

ANDROID_SDK_ROOT 라는 이름으로의 환경 변수가 없단다..

ANDROID_HOME으로 만들어라고 해서 만들었는데....저 에러가 나왔다(...) 그래서 변수명 변경해줘서 해결...

 

이후에는 디바이스에 연결을 하고 잘 실행이 되고 있다.

 

다른 부분들이야 읽어보고 해결하면 잘 되었지만...첫번째 문제는 정말...매번 느끼지만 역시 폴더는 영어로만 해야지(...)

 

참고 : 안드로이드 sdk 버전은 react-native 프로젝트 안에 android/build.gradle파일 안에 targetSdkVersion으로 설치 해야한다.