기존 프로젝트에서 React-Native-CLI 실행하기 (+Window, Android Studio, VScode)

선배님들이 만드셔서 대대로 학생들이 개발, 운영하고 있는 약 7000명의 이용자가 있는 학교 자체 커뮤니티 앱 개발 FE팀에 합류하게 되었다. 내 학창시절 로망(?)이 학교 학생들이 만들고 실제로 운영되고 있는 서비스의 개발을 하는 것이었다. 이 꿈을 나름 빨리 이룰 수 있게 된 것 같아 기분이 날아갈 듯 했다. 실행을 하기 전까지...

 

이 서비스가 React-Native로 만들어진 건 들어오기 전부터 알고 있던 사실.

"React-Native를 해본 적은 없지만 여태 그래 왔듯 열심히 할 수 있습니다!"

React는 해봤으니까 뭐 별 다른게 있겠어? 라는 마음으로,,포부만 넘쳤지,,, 실제로 운영되고 있는 서비스의 프로젝트 용량과 실행은 호락호락하지 않았다.

 

시간상은 3일동안 트슈를 겪고, 다른 프로젝트에서는 세팅을 슈슈슉! 하기 위해 적는 회고로 적는다. 나와 같은 상황에 놓인 다른 분들에게 작은 도움이라도 되길..!

 

1. C 드라이브 용량 체크하기

용량을 30GB이상은 꼭 확보하도록 하자. 예전 문서, 사진, 캡처, 실습 파일, 툴들 모두 삭제해서 45GB를 확보했는데, 지금 또 빨간 신호를 보내고 있다..

 

Window 설정 > 시스템 > 저장소>임시 파일 

처음 정리하는 사람이라면 삭제할 파일이 꽤 많다. 필요 없다면 [휴지통] 도 비워준다.

---

2. 프로젝트에서 필요한 프로그램 버전 "모두" 확인하기

내가 참여한 프로젝트에서는 아래와 같은 버전을 활용했다. 프로젝트를 실행하기 위해서는 모든 버전이 맞아야 오류가 없다. 나는 버전을 맞추는 과정에서 많은 트슈를 겪었다.

 

1) jdk 11.0.23

2) react-native-cli 2.0.1
3) npm 8.19.4, node 16.20.0 

4) gradle 4.2.1

 

2-1) jdk 11.0.23 설치하기

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

Download the Latest Java LTS Free

 

회원이 아니라면 오라클 회원가입을 진행하고 다운하면 된다. 다운 완료하고 환경변수에 설정을 해두어야 한다.

 

2-2) react-native-cli 2.0.1 설치하기

Expo는 Android Studio 설치 없이 간편하게 빠르게 앱을 실행할 수 있다고 한다.

하지만 Expo SDK에서 지원하는 라이브러리와 도구만 사용해야 한다는 제약이 있다. 그래서 프로젝트 규모가 커지면 react-native-cli를 사용한다.

 

> npm install -g react-native-cli

 

2-3) nvm 1.1.12 설치 후, node 16.20.0 사용하기

버전을 무시한 채로 실행시키려고 하면 같은 에러 반복 > 해당 에러 해결 > 다른 에러 발생의 무한 굴레..

내가 쓰고 있는 node 버전을 유지한채로 다른 node 버전을 사용하고 싶다면 nvm을 사용해서 버전을 관리할 수 있다.

 

> nvm install 16

> nvm use 16

 

2-4) gradle 6.7.1 설치하기

이 프로젝트를 통해서 처음 알게 된 도구이다.

Gradle는 다양한 언어로 작성된 프로젝트를 빌드, 테스트, 배포 및 관리할 수 있는 오픈 소스 빌드 자동화 도구라고 한다.

처음에 다운 받지 않고 프로젝트 실행시키니 gradle 부분에서 에러가 발생하였다.

버전을 보지 않고 다운 받았는데, 이 버전도 사용이 가능하기에 설치하였다. 

 

위 4가지 항목을 다운 받으면 4번에서 가장 중요한 환경 변수 설정 작업을 해야 한다.

 

---

3. Android Studio 다운 받고, SDK 설정하기

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

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

 

build.gradle 파일에서 compileSdkVersion과 targetSdkVersion을 통해 버전을 SDK 버전을 확인한다. 

• compileSdkVersion: 프로젝트의 build.gradle 파일에서 설정한 SDK 버전. 이 SDK 버전에 맞추어 에뮬레이터의 SDK 버전을 선택해야한다. 
• minSdkVersion: 앱이 지원할 최소 Android 버전. 이 버전보다 낮은 SDK 버전의 에뮬레이터는 필요하지 않다.

 

Device Manager > Create Virtual Device 에 들어가서 하드웨어 사이즈를 정해준다.

 

나는 파일에 따르면 API 31 버전을 설치하고 설정 완료해야한다.

아래는 다른 블로그에서 검색하면서 설정해야 하는 이미지들이다. 용량은 많고 뭘 다운 받아야 할지도 모르겠다면 해당 버전에 맞는거 다 다운 받으면 된다..

 

- Android SDK Platform 31
- Sources for Android 31
- Intel x86 Atom System Image
- Intel x86 Atom_64 System Image
- Google APIs Intel x86 Atom_64 System Image
- Google Play Intel x86 Atom System Image

 

설치하는데 몇 십분 걸리기 때문에 이거 하면서 환경 변수 설정하면 된다.

설치 완료 되면 에뮬레이터가 생긴 것!

---

4. 각 프로그램마다 환경 변수 설정하기

'시스템 환경변수 및 편집' 에 들어가서 [새로 만들기] 클릭 후 환경 변수를 설정한다.

 

> JAVA_HOME : jdk 다운 경로 

> Path 에 JAVA_HOME 추가하기

> Path 에 gradle 경로 추가하기

 

> ANDROID_HOME : 안드로이드 다운 경로 

> Path 에 %ANDROID_HOME%\bin 추가하기

> Path 에 Android\Sdk\platform-tools 추가하기

> Path 에 Android\Sdk\tools 추가하기

> Path 에 Android\Sdk\build-tools 추가하기

> Path 에 Android\Sdk\emulator 추가하기

---

5. React-Native 프로젝트 실행하기

> react-native run-android

해당 명령을 통해 빌드 과정을 지켜본다. 환경 변수를 다 설정해주지 않았을 때는 처음에는 1,2분만에 fail했었고, 설정이 다 됐다고 생각했을 때는 80%까지 가서 sdk 가 연결되어 있지 않다고 fail하기도 하였다. 여러 트슈를 거치고 약 30분동안 빌드 과정을 파리처럼 손을 싹싹 비비면서 기도했다. '제발 되게 해주세요. 개발 때려치우지 않게..' 

 

(아래는 2번째 빌드. 그래도 꽤나 오래 걸리군..)

 

이후로 다른 터미널을 열고, 아래 명령을 입력한다.

 

> react-native start

그럼 나의 에뮬레이터에 내가 알고, 기대하던 서비스의 UI 화면이 뜨고, VScode 에서 코드 수정을 하면 느리게 반영이 된다. 나만 안스 버버벅거리나..? 컴을 바꿔야 하나 ㅎ

다 가려놓고 뭘 보여주는지..

 

공개 불가일 것 같아 꽁꽁.. 이제부터 본격 3개월 이상은 개발해야 하는 서비스. 전면 리뉴얼이라 너무 기대가 된다.

유저가 많고, 수익화에 대해 고민하고 있는 서비스이기에 더 책임감이 넘치는 개발 활동을 할 수 있을 것 같다.

리액트 네이티브 처음인데 꽤나 난이도 있는 프로젝트를 하는 것 같아 걱정도 되지만.. 이미 저지른걸..

해야지 뭐.. 세팅 완료 했으면 반이라도 한거다!!