[React Native] Github 협업 프로젝트 clone 받아 사용하기 (with 안드로이드 실기기)

 

 

 

안드로이드 개발자 외길인생을 걷고자 했지만

인생은 내 뜻대로 되지 않기에

 

이번 리액트 네이티브 프로젝트를 진행하면서

(미래의 내가 리액트 네이티브 개발자가 될 수도 있으니까)

배워나가는 내용 하나씩 정리해나가려 한다.

 

 

---

 

 

1. Github 프로젝트 받아오기

$ git clone [저장소 URL]

 

 

2. 프로젝트 폴더로 이동

$ cd [폴더 이름]

 

 

3. npm 설치

npm 은 자바스크립트를 위한 패키지 매니저로,

React.js, React native 모두 npm 을 통해 설치ㆍ제거할 수 있다.

 

npm 은 node.js 의 패키지 관리자이기에, 이를 사용하기 위해 node.js 를 설치해야 한다.

아래 페이지에서 자신의 운영체제에 맞는 버전을 설치하면 된다.

 

https://nodejs.org/ko/download/

다운로드 | Node.js

 

설치를 마친 후 버전 확인을 통해 정상적으로 설치된 것을 확인할 수 있다.

/* node.js 버전 확인 */
$ node -v

/* npm 버전 확인 */
$ npm -v

 

 

4. 의존성 패키지 설치

아래 명령어를 실행하면 package.json 에 포함된 의존성 패키지들이 일괄적으로 설치된다.

$ npm install

 

더불어 React-Native-Cli 를 설치해준다.

$ npm install -g react-native-cli

 

 

5. 안드로이드 adb 설치 및 설정

Android ADB (Android Debug Bridge)는 PC와 스마트폰 간에 통신을 할 수 있는 명령어 도구이다.

디버깅 목적뿐만 아니라 스마트폰 화면을 PC로 미러링할 수 있는 앱에서도 ADB를 사용한다.

 

(1) PC에서 ADB Tool 다운로드

아래 링크에서 다운로드 가능하며, 다운로드한 zip 파일을 압축 해제 하면 된다.

https://developer.android.com/studio/releases/platform-tools?hl=ko 

SDK 플랫폼 도구 출시 노트  |  Android 개발자  |  Android Developers

 

(2)  PC 에서 ADB Path 를 환경 변수에 추가

임의의 폴더에서도 adb 를 실행할 수 있도록 환경 변수 PATH 에 ADB 설치 경로를 추가한다.

다음과 같은 프로세스로 환경 변수에 추가하는 작업을 진행한다.

https://kibua20.tistory.com/165

 

(3) 스마트폰에서 USB 디버깅 연결 활성화

 

(4) adb 명령어를 통해 연결된 기기 확인

$ adb devices

(5) 기기 포트를 8081 로 변경

$ adb reverse tcp:8081 tcp:8081

 

이 쯔음에서 발생하는 오류 하나🐱‍💻 : 이 시스템에서 스크립트를 실행할 수 없으므로 파일을 로드할 수 없습니다.
이는 스크립트 실행 권한이 제한되어 있는 상태라는 의미이며,
스크립트 실행 권한을 변경하기 위해서는 Windows PowerShell을 관리자 권한으로 실행해 변경해줘야 한다.

/* 어떤 권한을 설정할 수 있는지 확인 */
> get-help Set-ExecutionPolicy

/* RemoteSigned으로 정책 설정 */
> Set-ExecutionPolicy RemoteSigned

 

 

6. android studio 프로젝트 확인

이 사항은 프로젝트에 따라서 생략해도 된다.

필자의 경우는 안드로이드 프로젝트 자체가 디버깅이 안되었던 상황이라 오류가 발생하였기에,

실제 react native 앱을 구동시키기 전에 안드로이드 스튜디오를 켜서

프로젝트가 올바른지 확인하는 과정을 거치길 바란다.

Build - Make Project
Build - Clean Project

 

이 쯔음에서 발생하는 오류 둘 🐱‍💻 : Build 시 Java Heap Size 부족
말그대로 용량이 부족하다는 의미인데, 이에 대한 설정은 gradle.properties 파일에서 할 수 있다.
필자의 경우에는 아래 코드가 주석 처리되어 있어 용량이 부족했던 것인데,
다른 경우라면 2048 <- 의 크기를 더 크게 조절하는 등의 임시방편으로 해결할 수 있다.

org.gradle.jvmargs=-Xmx2048m -Dfile.encoding=UTF-8

 

 

7. 프로젝트 실행

$ react-native run-android

 

이 쯔음에서 발생하는 오류 셋 🐱‍💻 : JDK 위치 확인 불가
영어로 장황하게 뜬 오류였는데, (어제 일인데) 한 마디도 기억이 안나서 저렇게 적어두었다.
암튼, 자바 JDK 설치 후 설정하면 된다.

 

(1) 오라클 공식 홈페이지에서 JDK 다운로드 후 설치

 

(2) 시스템 변수 설정

 

시스템 변수 "JAVA_HOME"

 

시스템 변수 "CLASSPATH"

 

PATH 편집 - 새로 만들기

 

 

이 쯔음에서 발생하는 오류 넷 🐱‍💻 : 안드로이드 스튜디오 위치 확인 불가
아래와 같이 ANDROID_HOME 시스템 변수를 등록함으로써 해결했다.

 

시스템 변수 "ANDROID_HOME"

 

 

 

---

 

 

 

산 넘어 산이다.

무수히 많은 오류들을 해결하고

$ react-native run-android

실행에 성공했으나, 이번에는 리액트 네이티브 코드 분석이라는 큰 산이 남았다.

일단 앱 화면이 뜨면 좋겠는데, WebView 에 대한 이해도가 부족하여

아직 리액트 네이티브 디폴트 화면만 뜬다 . . 🤦‍♀️

 

 

 

 

 

맙쉬다 고양이 프로님들의 힘을 잔뜩 받아

얼른 앱 화면 띄워내고 말겠다는 다짐과 함께

이번 포스팅은 여기까지 . .

 

 

 

 

 

© 참고

https://c17an.netlify.app/blog/node.js/npm-install-%EC%A0%95%EB%A6%AC/article/ (npm install, 이제는 알고 쓰자)

https://kibua20.tistory.com/165 (안드로이드 adb 설치 및 설정 방법)

https://velog.io/@maliethy/RN-run-on-android-device (안드로이드 실제 기기 연결하기)

https://singa-korean.tistory.com/21 (VSCode 터미널 오류 : 스크립트 실행)

https://limkydev.tistory.com/23 (Build 시 Java Heap Size 부족 해결법)

React-native android 실제 기기 연결하기