React-native 셋팅하기 (Window OS)

만들고 싶은 주제의 어플이 생겨서 앱개발 공부를 해볼까했다.

네이티브 앱의 경우 2개의 기술(IOS는 Swift, 안드로이드는 코틀린)을 배워야하기에 부담이 컸기에

이미 어느정도 알고있는 자바스크립트 환경에서 개발할 수 있는 React-native를 배워서 어플의 프론트단을 만들어보기로 결심했다.

 

나는 슬프게도 MacBook이 없기에 Window환경에서 셋팅을 진행해보았다.

 

React-native 셋팅은 공식 문서에 아주 잘 나와있다.

환경셋팅 공식문서 URL : https://reactnative.dev/docs/environment-setup

Setting up the development environment · React Native

 

나는 React Native CLI를 선택했다. 이유는 Expo CLI의 경우 굉장히 편하다는 장점이 있지만 

추후 확장성을 고려할 때 좋지 못하다고 한다. (카카오 연동 등의 기능)

 

우여곡절 끝에 셋팅을 했다... 공식문서에 그대로 있고 유투브에도 셋팅하는 방법은 자세히 나와있음!!

 

1. 윈도우의 패키지 매니저인 choco를 이용해서 node.js와 openjdk8을 설치한다. node는 12버전 이상이여야하고 jdk는 8버전 이상이여야 한다.

명령어 : choco install -y nodejs.install openjdk8

 

2. 안드로이드 스튜디오를 설치한다.

설치 후 오른쪽 하단에 Configure -> SDK Manager를 클릭함

SDK Platforms 탭에서 Show Package Details를 오른쪽 하단에서 체크 후 Android 10 (Q)에서 다음의 항목을 체크한다.

• Android SDK Platform 29
• Intel x86 Atom_64 System Image or Google APIs Intel x86 Atom System Image

3. 안드로이드 환경셋팅

내PC 오른쪽 클릭 -> 속성 -> 고급 시스템 설정 -> 환경변수 클릭 -> 사용자변수 -> 새로 만들기 

변수 이름 : ANDROID_HOME

변수 값 : 다운로드 경로 (디폴트는 C:\Users\{사용자PC}\AppData\Local\Android\Sdk)

 

사용자 변수에서 Path 더블클릭 -> 새로 만들기

패스 경로 : C:\Users\{사용자PC}\AppData\Local\Android\Sdk\platform-tools << 디폴트값임. 경로를 다르게 설치했으면 변경해서 저장하세요

 

4. React-native 프로젝트 생성하기

명령어 : npx react-native init AwesomeProject

 

5. 생성된 프로젝트 폴더로 cd 이동 후 

명령어 : npx react-native run-android

 

이러면 에뮬레이터가 실행되면서 핸드폰 화면이 나오고 React-native 초기화면이 나온다!!

이 화면은 App.js의 내용이 나오는것이다~

 

 

*****

나는 첫 환경셋팅 후 빌드하기까지 무려 2일이나 걸렸슴.. 나의 삽질 기록을 위해 글을 씀

아래의 내용은 내가 보기위해 작성한 것이니 읽지않아도 괜찮습니다!!

 

***안드로이드 스튜디오에서 node가 안먹었음 -> 해결방안 : node path를 환경변수에 추가해주고 재부팅 -> 해결완

***react-native run-android를 하면 빌드가 너무 오래걸리고 30s넘어가서 warn뜸

명령어 : npm install --save-dev jetifier

명령어 : npx jetifier

후에 react-native run-android 하면 됨 -> 매번 저 명령어를 입력하기 귀찮으므로

package.json에 다음과 같이 함.

"scripts": {
"preandroid": "npx jetify",
"android": "react-native run-android",
},

 

***안드로이드 에뮬레이터 초기화 방법

C:\Users\(사용자명)\.android\avd\Pixel_2_API_(버전).avd 폴더의 userdata-qemu.img 파일을 삭제하면 에뮬레이터가 초기화된다.

 

***adb kill-server : 에뮬레이터 응답없을 때