react-native로 앱을 개발하기 위해 윈도우(Windows)에서 개발 환경을 설정하는 방법에 대해서 알아보자.
윈도우즈(Windows)에서 react-native로 앱을 개발하는 방법으로 Expo CLI와 React Native CLI가 있다.
Expo CLI는 react-native로 앱을 개발할 때 자주 사용되는 네이티브 기능(위치 정보, 카메라 등)을 패키지로 묶어서 제공한다. 처음 시작은 Expo로 시작하면 편할 수 있지만, 사용하지 않은 네이티브 모듈로 인해, 앱 파일 사이즈가 커지는 문제와 Expo에서 제공하지 않은 네이티브 모듈을 추가할 때, 불편함 등이 있어 Expo 사용을 추천하지 않는다고 한다.
react-native로 앱을 개발하기 위해서는 Nodejs, Python, Android studio등을 설치해야 한다.
Chocolatey 설치
Chocolatey는 윈도우(Windows)에서 필요한 패키지를 설치하고 관리하는 윈도우용 패키지 관리자다. Chocolatey를 사용하면 윈도우에서 간단하게 필요한 패키지를 설치할 수 있다.
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"설치가 완료되었다면, 명령 프롬프트(cmd)를 재실행한 후, 아래에 명령어를 실행하여 설치가 잘 되었는지 확인한다.
choco –version설치가 잘 되었다면, 다음과 같이 Chocolatey의 버전을 확인할 수 있다.
Nodejs 설치
react-native는 Javascript이므로 Javascript의 런타임인 Nodejs가 필요하다.
명령 프롬프트(cmd)를 관리자 권한으로 실행한 후, 아래의 Chocolatey 명령어를 통해 Nodejs를 설치한다.
choco install -y nodejs.install설치가 완료되면, 명령 프롬프트(cmd)를 재실행한 후, 아래의 명령어를 통해 Nodejs가 제대로 설치되었는지 확인한다.
node -–versionNodejs가 문제없이 설치되었다면, 아래와 같이 Nodejs의 버전을 확인할 수 있다.
Nodejs를 설치하면, 기본적으로 Nodejs 패키지 매니저인 npm(Node Package Manager)도 같이 설치된다. npm도 잘 설치가 되었는지 확인하기 위해 아래의 명령어를 실행한다.
npm --versionnpm도 문제없이 잘 설치되었다면, 아래와 같이 npm의 버전을 확인할 수 있다.
Python 설치
리액트 네이티브의 빌드 시스템은 파이썬을 사용한다.
명령 프롬프트(cmd)를 관리자 권한으로 실행한 후 아래의 Chocolatey 명령어를 실행하여 Python을 설치한다.
choco install -y python2설치가 완료되면, Python을 사용하기 위해 컴퓨터를 재부팅해야 한다. 컴퓨터가 재부팅되었다면, 명령 프롬프트(cmd)에서 아래에 명령어를 실행하여 Python이 잘 설치되었는지 확인한다.
python --versionPython이 잘 설치되었다면, 아래와 같이 Python의 버전을 확인할 수 있다.
React Native CLI 설치
아래의 npm 명령어를 통해 React Native CLI를 설치한다.
npm install -g react-native-cli설치가 완료되었다면, 아래에 명령어를 실행하여 React Native CLI가 잘 설치되었는지 확인한다.
npx react-native -version문제없이 설치되었다면, 아래와 같이 React Native CLI의 버전을 확인할 수 있다.
JDK 설치
react-native로 안드로이드 앱을 개발하기 위해서는 JDK(Java Development Kit)를 설치해야 한다. 명령 프롬프트(cmd)를 관리자 권한으로 실행한 후, 아래에 Chocolatey 명령어를 실행하여 JDK를 설치한다.
choco install -y jdk8설치가 완료되었다면, 명령 프롬프트(cmd)를 재실행한 후, 아래에 명령어를 통해 Java가 잘 설치되었는지 확인한다.
java -versionJDK를 통해 Java가 잘 설치되었다면 아래와 같이 Java의 버전을 확인할 수 있다.
openjdk version "1.8.0_222"
OpenJDK Runtime Environment (AdoptOpenJDK)(build 1.8.0_222-b10)
OpenJDK 64-Bit Server VM (AdoptOpenJDK)(build 25.222-b10, mixed mode)JDK를 설치하면 Java 컴파일러도 같이 설치됩니다. 아래의 명령어를 통해 Java 컴파일러도 잘 설치되었는지 확인한다.
javac -versionJDK를 통해 Java 컴파일러도 잘 설치되었다면, 아래와 같이 Java 컴파일러의 버전을 확인할 수 있다.
javac 1.8.0_222안드로이드 스튜디오 설치
react-native로 안드로이드 앱을 개발하려면 안드로이드 스튜디오를 설치해야 한다. 아래에 링크를 통해 안드로이드 스튜디오 사이트로 이동하고, 설치 파일을 다운로드 한다.
안드로이드 스튜디오 설정
안드로이드 스튜디오 SDK 설정
File > settings > Android SDK 또는 오른쪽 상단의 톱니바퀴 모양 > SDK Manager를 누른다.
위의 화면과 같이 사용하고 싶은 기본 sdk를 설치한다.
위의 화면과 같이 사용할 SDK Tool을 설치한다.
안드로이드 스튜디오 환경 변수 설정
속성 메뉴를 선택하면, 아래와 같이 시스템 설정 화면을 볼 수 있습니다. 왼쪽에 있는 고급 시스템 설정을 선택한다.
고급 시스템 설정을 누르면, 아래와 같이 시스템 속성 화면을 확인할 수 있다. 상단에 있는 고급탭을 선택하고, 고급탭 하단에 있는 환경 변수 버튼을 선택한다.
환경 변수 버튼을 선택하면 아래와 같이 환경 변수를 설정하는 화면을 확인할 수 있다. 상단에 있는 사용자 변수 섹션의 새로 만들기 버튼을 선택한다.
위와 같이 새 환경 변수 추가 화면이 나오면 변수 이름에는 ANDROID_HOME을 입력하고, 변수값에는 자신의 안드로이드 스튜디오의 SDK 위치를 입력한다. 자신의 안드로이드 SDK 위치가 어디인지 모르는 경우, 아래와 같이 안드로이드 스튜디오 SDK 설정 화면으로 이동한다. 안드로이드 스튜디오 SDK 설정 화면의 제일 상단을 보면 Android SDK Location 항목에서 자신의 안드로이드 SDK 위치를 확인할 수 있다.
ANDROID_HOME 환경 변수를 추가하였다면, 안드로이드 스튜디오의 platform-tools를 설정한다. 사용자 변수 리스트에서 Path를 선택하여 환경 변수 편집 화면으로 이동한다.
위와 같이 편집 화면이 보인다면, 하단에 C:\Users\[사용자 이름]\AppData\Local\Android\Sdk\platform-tools와 같이 SDK가 설치된 폴더 하위에 있는 platform-tools 폴더를 입력하고 확인 버튼을 눌러 환경 변수를 수정한다.
명령 프롬프트(cmd)를 실행하고 아래에 명령어를 실행한다.
adb환경 변수 설정이 잘 되었다면, 아래와 같은 결과를 확인할 수 있다.
Android Debug Bridge version 1.0.41
Version 29.0.1-5644136
Installed as /Users/dev-yakuza/Library/Android/sdk/platform-tools/adbreact-native 프로젝트 생성 및 확인
React Native CLI 명령어를 통해 react-native 프로젝트를 생성한다.
npx react-native init SampleApp안드로이드에서 확인
안드로이드인 경우, 개발자 모드가 활성화된 디바이스를 USB로 연결한 상태 또는 안드로이드 스튜디오를 실행하고 에뮬레이터를 실행한 상태에서 아래에 명령어를 실행한다.
cd SampleApp
# react-native run-android
npm run android
문제없이 잘 실행되었다면 아래와 같은 화면을 확인할 수 있다.
참고