[React Native] 윈도우 개발 환경 설정 하기.

 

윈도우에서 React Native를 개발하기 위해서는 노드, Python, 안드로이드 스튜디오, Java JDK 등을 설치해야 합니다.

 

  Javascript를 활용하지만 궁극적으로 마지막에는 iOS, 안드로이드 앱을 배포해야 하기 때문에 그에 맞는 빌드 구성이 필요합니다. 그래서 IOS의 경우에는 MacOS가 아니면 빌드가 되지 않습니다. 왜냐하면 MaxOS에서 지원하는 Xcode 빌드 툴이 있어야지만 IOS용 앱을 빌드 할 수 있습니다. 그렇다고 IOS용 앱 테스트를 못하는 것은 아닙니다. 리액트 네이티브는 JavaScript로 개발해 웹툴로 개발의 전반적인 테스트가 가능하기 때문입니다.

 

그럼 윈도우에서 안드로이드 앱을 빌드 구성 및 개발 구성을 설치해 보겠습니다.

 

1.node 설치 방법

 

리액트 네이티브는 자바스크립트 기반으로 동작하기 때문에 자바스크립트 런타임인 노드가 필요합니다.

 

저는 nvm을 활용해서 node를 설치하는 것을 선호합니다.

동일한 pc에 다양한 node 버전을 사용하기 위해서입니다.

 

제가 이전에 정리한 nvm을 윈도우에 설치하는 방법은 아래 포스팅을 통해 확인할 수 있습니다.

 

https://firework-ham.tistory.com/69?category=868006

[node] windows nvm 으로 node 설치하기

설치를 완료하였다면 아래 방법으로 한 번도 버전 체크를 해주세요.

 

node -v

npm -v

 

2. open jdk 설치 방법

 

안드로이드 앱을 빌드하기 위해 필요한 Java OpenJDK를 설치해보겠습니다.

 

https://www.azul.com/downloads/zulu-community/?version=java-8-lts&os=windows&architecture=x86-64-bit&package=jdk

Download OpenJDK Java Linux Windows macOS Alpine Java 11 Java 8

위 사이트에서 Java 8, Windows, 64-bit, JDK를 선택하시고 msi 다운로드를 진행합니다.

그리고 실행하여 설치를 진행하세요.

 

커맨드 창을 다시 닫았다 실행합니다.

 

다음 명령어를 실행하여 정상적으로 java 버전이 표시되는지 확인합니다.

java -version

 

3. python 설치

 

리액트 네이티브 빌드 시스템은 python에 의존합니다.

그래서 python을 먼저 설치해 주어야 합니다.

 

https://www.python.org/downloads/

Download Python

파이썬 공식 홈페이지에서 최신 python을 다운로드하여 설치합니다.

 

python-3.8.3.exe를 실행하여 설치하고 cmd 창을 다시 열어 아래 커맨드로 정상 표시되는지 확인합니다.

python --version

 

4. 리액트 네이티브 CLI 설치

 

리액트 네이티브 CLI를 설치하기 위해 노드 패키지의 npm을 사용합니다.

npm install -g react-native-cli

-g 옵션은 전역으로 설치한다는 의미입니다.

 

설치가 완료되었다면 다음 명령어로 설치 확인합니다.

react-native --version

react-native-cli: 2.0.1
react-native: n/a - not inside a React Native project directory

 

5. 안드로이드 스튜디오 설치

 

이제 안드로이드 앱 빌드를 위한 안드로이드 스튜디오를 설치합니다.

 

https://developer.android.com/studio/index.html

Download Android Studio and SDK tools  |  Android 스튜디오

 

안드로이드 스튜디오 설치 파일을 다운로드합니다.

다운로드가 완료되면 바로 실행하여 설치를 진행합니다. 설치 파일을 실행하면 조금 늦게 화면이 뜰 수 있으니 기다려주세요. Next를 눌러주다 아래 화면이 나오면 설치하고자 하는 원하는 위치를 정하세요.

 

설치가 완료되고 Finish를 눌러주면 안드로이드 스튜디오가 실행됩니다.

Do not import settings 이 클릭되어 있는 상태에서 OK를 눌러줍니다.

 

Next를 눌러 진행합니다.

Custom을 누른 뒤 Next를 누릅니다.

위와 같이 아까 설치한 JDK 경로를 설정해 준 뒤 Next를 누릅니다.

테마는 원하는 테마를 선택해준 뒤 SDK Components Setup에서 모두 체크해주시고 SDK 경로는 원하시는 경로로 선택해주세요.

 

위와 같이 설정하고 Next 그리고 나머지는 모두 Next로 넘어갑니다.

설치가 완료되면 Android Studio 창이 뜹니다.

 

아래 Configure를 클릭하고 SDK Manager를 선택합니다.

여기서 원하는 Android 버전을 선택하여 적용하시면 되고 기본적으로 설치되어 있는 10.0을 사용할 예정이니 그대로 넘어갑니다.

 

이제 환경 변수를 등록해줍니다.

윈도우 탐색기에서 "시스템 환경 변수 편집"라고 검색하여 시스템 속성을 실행합니다.

 

환경 변수를 클릭하고 새로 만들기를 하여 아래 항목을 등록해줍니다.

 

변수 이름 : ANDROID_HOME

변수 값 : <sdk 지정한 폴더 경로>

 

 

그리고 Path 경로에 sdk 지정한 경로 밑에 platfrom-tools를 등록해줍니다.

<sdk 지정한 폴더 경로>/platfrom-tools

 

이제 터미널(cmd)를 실행하여 아래 명령어가 실행되는지 확인합니다.

adb --version

Android Debug Bridge version 1.0.41
Version 30.0.1-6435776
Installed as E:\programs\AndroidSdk\platform-tools\adb.exe

이제 리액트 네이티브를 개발하기 위한 준비는 끝났습니다.

 

리액트 네이티브는 JavaScript 개발 IDE로 개발이 가능합니다.

저는 개인적으로 비주얼 코드(Visual Code)를 추천드립니다.

 

MS에서 배포하는 IDE로 무료이고 다양한 플러그인도 많아 현재 많이 사용되고 있는 툴입니다.

 

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

 

이상 리액트 네이티브 윈도우 개발 세팅이었습니다.

 

[2022-12-10 추가 수정 사항]

 

시스템 환경 변수에 아래와 같이 등록을 해주어야 초기 android 실행시 정상 구동 됩니다.

변수 : ANDROID_SDK_ROOT

값 : <SDK 설치 폴더>

 

Path에 아래와 같이 등록합니다.

%ANDROID_SDK_ROOT%