React Native - React Native 개발환경 세팅, 실행해보기

in REACT on React Native, Real device, Emulator, Android studio, Adb


이미 받아져 있는 React Native 프로젝트를 Expo 없이 실행시켜 보았다. 연습할 때는 Expo를 이용해서 아주 편하게 기기에서 시연이 가능했지만, Expo가 실제 배포 과정에서 문제가 생기는 부분(아마 특정 모듈과 연동이 안되거나 충돌이 난다고 생각한다)이 있어서 Expo 없이 기기/emulator를 이용해서 시연해보는 것을 해보았다.

  • Real device : 실제 기기를 USB로 컴퓨터에 연결 시켜 Test한다.
  • emulator : 가상의 안드로이드 기기라고 생각하면 된다. Virtual machine이랑 비슷하다고 생각한다. 실제 기기가 필요가 없다.

먼저 할 일은 다음과 같다.

React Native 공식 홈페이지에서 React Native CLI QuickStart를 클릭해서 나온 대로 실행해도 된다. 그런데 실제로 해봤을때 내가 잘못한건지 뭔지는 모르겠지만 안되는 부분이 있어서 다시 실제로 해서 된 단계를 적어보려고 한다.

  1. Chocolatey 다운받기

cmd창을 열어 powershell이라 친다. 이렇게 치면 powershell이 실행되면서 powershell 커맨드를 입력할 수 있게 된다.

그 상태에서 또

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

라고 친다. 이러면 chocolatey가 다운받아졌을 것이다. 잘 설치되었는지 확인하려면 cmd창을 닫고 새로운 cmd창을 열어 choco라고 치면 확인할 수 있다.

  1. Node, Python2, JDK 다운받기

위의 Chocolatey를 다운받은 것은 이것들을 다운받기 위해 한 것이다.

cmd 창에

choco install -y nodejs.install python2 openjdk8

커맨드를 친다. 에러가 나면 관리자 권한으로 cmd창을 실행시켰는지 다시 확인해보자.

  1. Android Studio 다운받기

[안드로이드 스튜디오 다운받기] : 여기서 안드로이드 스튜디오를 다운받으면 된다.

안드로이드 스튜디오 설치 및 초기 세팅은 [여기]에 자세하게 나와있으니 여기에서 참고하는 것이 좋다. 설치까지 완료되었다면 이제 안드로이드 SDK를 다운받아야 한다.

  1. 안드로이드 SDK 다운받기

안드로이드 스튜디오를 실행시키면 하단 오른쪽에 톱니바퀴 아이콘과 Configure 버튼이 있을 것이다. 그걸 클릭해서 나오는 드롭다운 메뉴에서 SDK 매니저를 선택해준다. 만약 이런 화면 배치가 아니라면 File>Settings 를 타고 들어가면 같은 화면이 나온다.

image

아래의 “Show Packages Details” 체크박스를 체크하면 이전 화면에 비해 뭐가 되게 자세하게 많이 나올 것이다.

image

위에 체크한 것들이 꼭 체크가 되어있는지 확인하고 체크하고 Ok 혹은 Apply를 눌러준다.

SDK Platform메뉴 말고도 옆에 있는 SDK Tools에서도 마찬가지로 똑같이 “Show Packages Details” 메뉴를 선택해주고, 29.0.2가 선택이 안되어있으면 해주고 OK를 해주자.

image

그럼 이제 SDK 세팅은 완료되었다.

  1. ANDROID_HOME 환경 변수 세팅하기

환경 변수 세팅하는 법은 제어판>사용자계정>사용자계정>(왼쪽메뉴의)환경 변수 변경 을 누르면 환경 변수를 만들고 설정할 수 있는 부분이 나온다.

위의 부분에서 “새로 만들기” 를 누르고 변수 이름에 ANDROID_HOME 을 입력하고, 경로에는 안드로이드 SDK 폴더 경로를 넣어줘야 한다. 안드로이드 SDK 폴더 경로는 좀 전에 SDK 설정했던 화면에서 상단에 보면 “Android SDK Location : 경로” 라고 경로가 나와있을 것이다. 그대로 복사해서 환경 변수의 경로에 붙여넣어준다.

또, 환경 변수 목록을 보면 “Path”라는 애가 있을 것이다. Path를 더블 클릭하면 또 새 창이 뜨면서 환경 변수 편집 창이 나온다. 거기서 또 “새로 만들기”를 누르고 아까 복사한 경로뒤에 \platform-tools를 붙여서 추가해준다. 즉 SDK 폴더 경로에 platform-tools 폴더의 경로를 복사해서 붙여넣어주면 된다는 소리다.

emulator로 React Native 앱 실행하기

React Native