[React-native 기록] 3. React Native 개발 환경 준비하기

리액트 네이티브를 개발하기 위해 공통적으로는 Node.js , JDK , 안드로이드 스튜디오 를 설치해야 합니다.

그외에 맥에서는 왓치맨 과 Xcode의 추가설치가 필요하며 

윈도우에서는 파이썬의 설치가 필요로 합니다.

 

리액트 네이티브 환경 구성이 조금 준비 할게많아 글이 조금 길어집니다.

 

* 저는 윈도우 개발환경 이기 때문에 윈도우 기준으로 글을 올립니다.

 

---

Node.js 설치

Node.js를 설치하면 노드 패키지 매니저인 npm도 함께 설치가 됩니다.

npm을 통하여 전 세계 수많은 개발자들이 만든 패키지를 설치하고 사용할 수 있습니다.

 

우선 윈도우의 환경에서는 하단의 Node.js 사이트에서 LTS 버전을 선택해 

환경에 알맞은 파일을 다운로드 받아 파일을 실행합니다.

 

 

다운로드 | Node.js

 

Node.js 다운로드 페이지에서 본인의 환경에 맞게끔 파일 설치

 

이후 명령 프롬프트 창을 열고 

node --version

을 입력하여 설치가 잘 되었는지 확인해 보시길 바랍니다.

---

Python 설치

리액트 네이티브는 빌드할 때 파이썬이 필요합니다. 파이썬은 현재 3 버전이 제공되고 있지만,

리액트 네이티브에서는 파이썬 2 버전을 사용하므로 파이썬 2 버전을 설치해야 합니다.

 

Python Release Python 2.7.18

파이썬 또한 사용자의 환경에 맞는 파일을 다운로드 받아 설치해 주세요

---

JDK설치

 

안드로이드 개발을 위한 안드로이드 개발 언어인 JDK를 설치 하겠습니다.

* 해당 글에선 JDK14 버전 기준으로 하겠습니다.

 

Java Archive Downloads - Java SE 14

 

다운로드 받은 파일을 실행해서 JDK 설치가 완료되면 환경변수를 설정합니다 .

 

먼저 윈도우 검색에서 => 시스템 ▶ 환경변수 ▶  시스템 변수 ▶ 새로만들기 

 

를 통하여 JAVA_HOME 이라는 이름의 시스템 변수를 추가하고 그 값으로 앞에서 설치한 JDK 의 경로를 지정합니다.

시스템 변수 추가

추가 가 완료되었다면 시스템 변수에서 Path를 선택하고 편집을 통해

%JAVA_HOME%\bin

으로 수정합니다.

 

환경변수 설정이 완료되면 확인을 눌러 저장하고 명령프롬프트 에서 두 명령어로 설치가 잘 되었는지 확인해봅니다.

 

java -version
javac -version

---

안드로이드 스튜디오 설치

이번엔 안드로이드 스튜디오 설치입니다.

안드로이드 개발을 위한 공식 IDE 이며, iOS의 Xcode 와 같은 역할이라고 생각하면 됩니다.

하단의 링크에서 안드로이드 스튜디오를 다운로드 받을 수 있습니다.

안드로이드 스튜디오 다운을위한 developer 사이트

Download Android Studio & App Tools - Android Developers

 

안드로이드 스튜디오를 설치하면서 진행하다보면 SDK Components Setup 화면이 나타납니다.

해당화면에서는 다음 목록들을 선택하고 계속 진행합니다.

• Android SDK
• Android SDK Platform
• Performance (Intel ® HAXM)
• Android Virtual Device

이후 나머지 설정은 기본 설정을 유지한 채로 진행 하고

SDK Manager 로 이동하여 우측하단의 Show Package Details 를 클릭하고 필요 항목을 선택하여 설치합니다.

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

그리고 SDK Tools 탭에서도  Android SDK Build-Tools  29.0.2를 선택하고 설치 해줍니다.

완료가 되었다면 아까와 같이 윈도우 검색에서

시스템 ▶ 환경변수 ▶  사용자 변수 ▶ 새로만들기 에서 안드로이드 스튜디오의 환경 변수 설정을 하겠습니다.

 

* 아까전 JDK 설정시에는 '시스템 변수(하단)' 이었고 현재는 '사용자 변수(상단)' 입니다.

 

• 변수이름 : ANDROID_HOME
• 변수 값: %LOCALAPPDATA%\Android\Sdk

위 와같이 사용자 변수에서 새로만들기를 통해 추가 해줍니다.

값에는 안드로이드 SDK 위치를 정확하게 지정해주어야 합니다.

정확한 값은 SDK Manager 메뉴의 Android SDK Locations에서 확인이 가능합니다.

 

ANDROID_HOME 사용자 변수 추가가 완료되면 시스템 변수에 있는 Path를 편집하겠습니다.

 

• 환경 변수 편집 : %LOCALAPPDATA%\Android\Sdk\platform-tools

이렇게 환경 변수 설정이 완료되면 명령 프롬프트 에서 명령어를 이용해 설치 확인을 합니다.

adb --version

---

에뮬레이터(가상머신)

이제 에뮬레이터를 통한 안드로이드 테스트를 위해 가상기기 를 만들어 줍니다.

안드로이드 스튜디오에서 Configure ▶ AVD Manager 로 이동하면 가상 기기를 관리하는 화면을 볼 수 있습니다.

* 또는 상단 네비게이션에서 Tools ▶ Device Manager ▶ Create device로 이동합니다.

 

저는 Pixel 3 으로 선택하고  진행하겠습니다.

가상 하드웨어 선택후에 x86 images에선 해당이미지를 선택하겠습니다.

모든 선택이 완료되면 가상 에뮬레이터를 사용할 수 있습니다.

 

이상 React Native를 사용하기전 필요한 환경 구축하는 방법(윈도우 기준) 이었고요 

다음장에는 Expo로 리액트 네이티브 프로젝트 만드는 법 을 작성 하겠습니다.

 

긴 글 보시느라 수고하셨습니다.

감사합니다