[React Native] Windows에 React Native 개발 환경 구축하기

Chocolatey 설치

Chocolatey는 windows에서 필요한 패키지를 설치하고 관리하는 Windows용 패키지 관리자이다.

Chocolatey를 설치하기 위해, 명령 프롬프트(cmd)를 관리자 권한으로 실행하고, 아래 명령어를 실행한다.

@"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"

설치가 잘 되었는지 확인한다.

choco -version

 

Node.js 설치

react-native는 JavaScript 기반이므로 JavaScript의 런타임인 Node.js가 필요하다.

• Node.js: https://nodejs.org/

명령 프롬프트(cmd)를 관리자 권한으로 실행 후, 아래 Chocolatey 명령어를 통해 Node.js를 설치한다.

choco install -y nodejs.install

설치가 잘 되었는지 확인한다.

node --version

Node.js를 설치하면, 기본적으로 Node.js의 패키지 매니저인 npm(Node Package Manager)도 같이 설치된다. npm도 잘 설치되었는지 확인한다.

npm --version

 

Python 설치

react-native의 빌드 시스템은 python을 사용한다. Python이 설치되어 있는지 확인한다.

choco install -y python2
python --version

 

React Native CLI 설치

react-native로 앱을 개발하기 위해 필요한 React Native CLI를 설치한다.

npm install -g react-native-cli
npx react-native --version

문제 없이 설치되었다면, react-native-cli의 버전을 확인할 수 있다.

 

JDK 설치

react-native로 안드로이드 앱을 개발하기 위해서는 JDK(Java Development Kit)를 설치해야 한다.

명령 프롬프트(cmd)를 관리자 권한으로 실행한 후, Chocolatey 명령어를 실행하여 JDK를 설치한다.

choco install -y jdk8
java -version

JDK를 설치하면 Java 컴파일러도 같이 설치된다. 아래 명령어를 통해 Java 컴파일러도 잘 설치되었는지 확인한다.

javac -version

 

Android Studio 설치

아래 Android Studio 사이트로 이동하고, 설치 파일을 다운로드 한다.

• Android Studio: https://developer.android.com/studio

설치 시, Android Virtual Device도 함께 설치해준다.

 

Android Studio SDK 설정

Android Studio Chipmunk 2021.2.1 기준으로 작성되었다.

Cusomize > All settings로 들어ㅏ Appearance & Behavior > System Settings > Android SDK를 선택한다.우측 하단의 Show Package Detail를 누르면 상세 패키지 리스트가 표시된다. 여기서 아래 내용을 찾아 선택한 후, OK 버튼을 눌러 선택한 내용을 설치한다.

• Android SDK Platform 31
• Intel x86 Atom_64 System Image
• Google APIs Intel x86 Atom_64 System Image

위 패키지는 Android 12.0 기준의 패키지이므로, 버전에 따라서 적절하게 설치하면 된다.

 

Android Studio 환경 변수 설정

Android Studio 환경 변수 등록을 위해, window 검색 창에서 시스템 환경 변수 편집을 검색해서 들어간 후 환경 변수 메뉴를 클릭한다.

상단에 있는 사용자 변수 섹션의 새로 만들기 버튼을 선택하여 아래와 같이 환경 변수를 추가한다.

• 변수 이름: ANDROID_HOME
• 변수 값: C:\Users\bulgen\AppData\Local\Android\Sdk

안드로이드 SDK 위치가 어디인지 모르는 경우에는, Andorid Studio SDK 설정 화면으로 이동(Settings > Appearance & Behavior > System Settings > Android SDK)하여 Android SDK Location에서 위치를 확인할 수 있다.

그리고 사용자 변수 섹션에서 Path를 선택하고, 환경 변수 편집 창에서 아래 경로를 추가해준다.

• C:\Users\bulge\AppData\Local\Android\Sdk\platform-tools

여기까지 설정이 완료되었다면 CLI에서 아래 명령어를 실행하여 환경 변수가 잘 설정되었는지 확인한다.

adb

Android Debug Bridge version 1.0.41
Version 33.0.1-8253317
Installed as C:\Users\bulge\AppData\Local\Android\Sdk\platform-tools\adb.exe

 

react-native 프로젝트 생성 및 확인

React Native CLI 명령어를 통해 react-native 프로젝트를 생성한다.

npx react-native init <프로젝트명>

안드로이드에서 확인

프로젝트 폴더로 이동한 다음, android emulator를 실행한다.

cd <프로젝트명>
# react-native run-android
npm run android

혹은 아래 명령어로도 프로젝트를 생성할 수 있다.

react-native init <프로젝트명>
cd <프로젝트명>
react-native run-android