React Native로 앱개발 하기 (1) 시작, 개발 환경 만들기

React Native를 이용하여 2개정도 앱을 출시하고 구글 애드몹을 이용해서 광고까지 낸 후 모든 실전 노하우나 에러 해결 과정들을 하나하나 찬찬히 복기하여 모두 블로그에 기록해 보려고 합니다.

 

React Native는 React에 비하여 상대적으로 자료가 부족하여 국내외 인터넷 사이트를 수천번 보아 해결방법을을 찾았을 때의 기쁨에 대해서 조금이나마 보답하는 길도 되겠지요.

 

철저히 실전 위주로 그리고 군더더기 없는 설명을 하겠습니다.

 

React Native로 앱개발을 할 때는 당연히 Visual Studio Code같은 프로그램을 이용하여 설치합니다. 하지만 사전에 설치해야 하는 프로그램이 있습니다. 바로 Node.JS와 안드로이드 스튜디오 입니다.

여기서 모든 기준은 안드로이드 앱 제작입니다.

 

1-1. Node.js : https://nodejs.org/ko/ 안전성/신뢰도가 높은 버전을 설치합니다.

 

1-2. 설치 후 부가프로그램을 설치할꺼냐고 물어보는데 무조건 설치합니다. (파이썬 최신버전도 새로 깔아주는데 그냥 그런가보다 합시다.)

 

2-1. 안드로이드 스튜디오 : https://developer.android.com/ 안드로이드 앱을 제작할 때 쓰는 프로그램이지만 여기서는 앱을 모두 만들고 안드로이드 애뮬레이터로 테스트 하기 위해서 설치합니다.

 

2-2. 안드로이드 스튜디오를 설치 및 실행하여 필수 프로그램을 설치해 줍니다.

저 위의 원 안 두 아이콘 중 오른쪽 SDK Manager에 들어가서 Android SDK - SDK Tools 탭으로 들어가서 아래와 같이 필수 프로그램을 설치합니다.(사실 거의 다 돼 있을겁니다.)

다음엔 안드로이드 에뮬레이터를 설치합니다.

2-3. 그리고 중요한 PATH 설정입니다. PATH를 추가해 놓으면 어디서나 안드로이드 에뮬레이터를 실행할 수 있으니 나중에 VSC에서 앱을 만들어 돌릴 때 볼 수 있습니다. (하지만 전 에뮬레이터를 쓰지 않고 직접 제 휴대폰을 개발자 모드로 바꿔 사용합니다.)

 

내 컴퓨터의 아래 경로는 안드로이드 스튜디오 설치 후 각종 데이터가 저장되는 곳이며 PATH 설정을 해야합니다.

C:\Users\내계정ID\AppData\Local\Android\Sdk (내계정ID는 꼭 영문이어야 합니다.)

 

위 경로를 PATH지정하기 위하여 윈도우10 기준 왼쪽 검색에서 '시스템 환경 변수 편집'을 검색해서 실행합니다.

'고급' 탭에 맨 아래 '환경변수'에 들어간다음 상단 사용자 변수의 Path를 '편집' 합니다. 그리고 아래 빨간 사각형의 경로를 추가해 줍니다.

안드로이드 스튜디오 프로그램의 SDK(Software Development Kit) 및 맨아래 내가 추가한 에뮬레이터 폰의 경로를 추가합니다.

 

2-4. 안드로이드 스튜디오의 avd manager로 가서 아까 추가한 안드로이드 폰을 실행해 놓습니다.

 

일단 이렇게 모든 세팅을 해놓고 Visual Studio Code에 들어가서 react native 앱을 바로 만들어 봅시다.

 

3-1. VSC 안의 터미널 창에서 npm install -g react-native-cli 를 입력하여 react-native를 설치합니다.

 

3-2. 앱을 만드려는 폴더에 가서 npx react-native init 앱이름(폴더가 생성되고 폴더명으로 생성)

 

3-3. cd 폴더명

 

3-4. npx react-native run-android 

그럼 위와 같이 node.js 창과 오른쪽에는 휴대폰 화면에 앱이 실행된 화면이 보입니다.

저는 수정해서 저런 화면이 나오지만 실제로는 아래와 같은 화면이 나옵니다.

저같은 경우는 안드로이드 에뮬레이터를 사용하지 않습니다. 일단 너무 느리고 또 그래서 뚝뚝 끊겨서 정상적인 테스트가 불가할 정도입니다. 그래서 예전에 사용한 삼성 갤럭시노트 5와 지금 사용하는 엘지 V50 두개 폰을 번갈아 가며 이용하며 사용합니다.

 

4. 일단 내 휴대폰을 개발자 모드로 만듧니다. 이부분은 인터넷에 수많은 설명이 있어서 넘어가도록 하겠습니다. 대신 개발자 모드 설정 이 후 꼭 설정의 개발자 옵션에 들어가 사용 설정 후 USB 디버깅을 켜 놓습니다.

 

5. 그리고 이제 컴퓨터에 안드로이드 USB 드라이버를 설치합니다. 앞서 2-2.에서 Android SDK - SDK Tools 에서 Google USB Driver를 설치 했는지 확인 후 아래 웹페이지에 들어갑니다.

https://developer.android.com/studio/run/oem-usb?hl=ko#InstallingDriver 

OEM USB 드라이버 설치  |  Android 개발자  |  Android Developers

페이지 아래로 쭉~ 내리면 각 휴대폰 회사들이 나오고 삼성 휴대폰 화면에 들어가 다운로드 후 설치합니다.

참고로 엘지 폰은 없는데 제가 가진 엘지 V50 휴대폰의 경우 아래 인터넷 주소에서 드라이버를 다운 받을 수 있습니다.

https://gsmusbdriver.com/lg-v50-thinq-5g

LG V50 ThinQ 5G USB Driver (Official Tested Driver)

두번째 adb driver를 다운받아 설치하면 됩니다.

아마 다른 제품의 휴대폰도 인터넷에 '휴대폰 기종' + Android USB Driver 나 ADB Driver 등으로 검색하면 웬만한 건 다 찾을 수 있을 듯 합니다.

 

이제 굳이 에뮬레이터를 실행할 필요 없이 휴대폰을 연결한 후 위에 설명한 3-4. 항의 npx react-native run-android 를 실행하면 내 휴대폰에 앱이 실행됩니다.

 

이렇게 실행한 앱은 개발을 종료 후에도 남게 되어 배포전이라도 사용할 수 있어서 유용합니다.

 

실제로 앱개발 한 건 없는데 거의 시작이 반인 것 같습니다.ㅎ