React Native를 사용해서 안드로이드 및 애플 앱을 개발할 때, expo를 사용하면 편하게 앱을 만들 수 있는 장점이 있지만, 아주 간단한 기능을 가진 앱을 만들 때에도 기본적으로 앱 크기가 15메가 정도로 커지게 됩니다. 그래서 앱 용량을 줄이기 위해 React Native CLI를 사용해서 개발하고자 설치 및 테스트하고 후기를 남김니다.
제가 아래에서 진행한 설치 절차는 아래 링크에 영문으로 나와있으니 참고 부탁 드립니다.
React Native 설치 공식 문서 ↓↓↓
https://facebook.github.io/react-native/docs/getting-started
참고로 제가 React Native CLI를 설치할 때는 공식문서에서 추천한 Chocolatey를 이용해서 설치하지 않고, 각각의 파일들을 따로따로 설치했습니다. Chocolatey를 설치할때 오류가 나더군요.
우선, 설치 과정입니다. 설치에 필요한 파일은 다음과 같습니다.
Node, Python2, JDK(Java SE Development Kit), Android Studio
1. Node 다운로드 및 설치
https://nodejs.org/en/download/
Node를 설치하면, npm 명령어를 사용할 수 있습니다.
2. Python 다운로드 및 설치
https://www.python.org/downloads/
버전 3이 아닌 2를 받으라고 공식 문서에 있어서 2를 추가로 설치하였습니다. 참고로 버전 3은 이미 설치된 상태이고 path에 추가 되었습니다. 버전 2는 사용자 변수에 path를 따로 추가하지 않았습니다.
3. JDK 다운로드 및 설치
https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
윈도우 64비트 Java SE Development Kit 8u201를 설치했습니다.
4. Android Studio 설치
https://developer.android.com/studio/index.html
5. 사용자 변수 ANDROID_HOME 생성해서 Android SDK 디렉토리 경로를 지정합니다.
6. 사용자 변수 Path에 Platform Tools 디렉토리 경로를 추가합니다.
다음으로는 앱을 생성하고 애뮬레이터로 테스트하는 과정입니다.
1. CMD창에서 앱 파일을 생성할 폴더를 찾아 들어간 후, react-native init AwesomeProject 명령어를 실행시킵니다.
$ react-native init AwesomeProject
2. Android Studio를 열어서 방금 위에서 만들었던 AwesomeProject 폴더를 엽니다.
3. AVD Manager 아이콘을 눌러서 위 이미지 처럼 API 28, Android 9.0 애뮬레이터를 실행합니다. 실행이 다 될때까지 기다립니다. 실행 도중에 다음으로 넘어가면 오류화면이 보여지게 됩니다.
4. CMD창에서 cd AwesomeProject 명령어를 실행해서 생성된 폴더로 들어간 다음, react-native run-android 명령어를 실행해서 앱을 실행합니다.
$ cd AwesomeProject
$ react-native run-android
5. 그러면 다음과 같이 애뮬레이터에서 React Native으로 생성되어진 앱의 초기화면을 확인할 수 있습니다.
* 위와 같이 Unable to load script 오류화면이 보이는 경우, Android Studio 프로그램에서 생성된 앱 폴더에서 android 폴더안의 build.gradle 파일을 열고, targetSdkVersion = 28 부분을 targetSdkVersion = 27 로 업데이트 합니다.
* 참고로 위와 같이 코드 수정을 통해 업데이트 해서 애뮬레이터를 성공적으로 돌릴 수 있었습니다. 나중에 targetSdkVersion = 28 로 다시 업데이트 했는데 이상없이 애뮬레이터를 성공적으로 돌릴 수 있었으니 참고 부탁 드립니다.
추가 오류사항은 다음글을 참고 부탁 드립니다.
- React Native compileDebugJavaWithJavac 오류 해결방법
- React Native Application has not been registered error 오류 해결
해당 글이 유용하셨다면, 공감 버튼 클릭 부탁 드립니다.
궁금하신 점이 있으시다면, 아래 댓글로 남겨주세요.
댓글