[React Native] 윈도우에서 개발환경 세팅 (react-native-cli)

참고: 리액트 네이티브 공식 문서 => https://reactnative.dev/docs/environment-setup

Setting up the development environment · React Native

리액트 네이티브의 CLI는 크게 Expo와 React Native로 나뉜다. 

그 중 React Native CLI를 사용하는 개발환경 세팅에 대해 요약하여 정리해보기로 했다.

 

• Develop OS : Windows
• Target OS : Android

 

1. Chocolatey 설치

Node를 설치하기 위해 윈도우에서 사용되는 패키지 관리자인 Chocolatey를 먼저 설치한다.

•  https://chocolatey.org/

Chocolatey - The package manager for Windows

Powershell을 관리자 권한으로 실행한 후, 다음 명령어를 입력한다.

 

@"%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"

설치가 완료되면 powershell을 재실행하여 설치가 잘 되었는지 확인한다.

choco -version

이렇게 뜨면 다음단계로~!

 

2. Node와 JDK 설치

이제 Chocolatey를 통해 Node를 설치할 준비가 완료되었다.

12버전 이상의 Node와 8 이상의 JDK가 필요하다.

cmd(명령 프롬프트)를 관리자 권한으로 실행하고 다음 명령을 실행한다.

choco install -y nodejs.install openjdk8

Nodejs 설치가 완료되면 다음 명령어를 통해 설치가 잘 되었는지 확인한다.

node -v

Nodejs의 패키지 매니저인 npm(Node Package Manager)의 설치 여부 또한 확인한다.

npm -v

 

안드로이드 앱을 빌드하기 위해 필요한 JDK를 설치한다.

 

choco install -y jdk8

그리고 이 또한 잘 설치되었는지 확인하기~!

java -version

3. Python 설치

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

Download Python

파이썬 홈페이지에 접속한 후 바로 보이는 "Download Python (최신버전)"을 설치한다!

 

python --version

 

4. React Native CLI 설치

이제 npm을 통해 리액트 네이티브 cli를 설치한다.

npm install -g react-native-cli

그리고 잘 설치되었는지 확인하기!

react-native --verison

 

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

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

Download Android Studio and SDK tools  |  Android Developers

위 사이트에서 안드로이드 스튜디오를 설치한다.

• Android SDK
• Android SDK Platform
• Android Virtual Device

"SDK Components Setup" 에서 이 항목들이 모두 체크되어 있는지 확인한다.

 

안드로이드 스튜디오 설치가 완료되면 안드로이드 SDK를 설치한다.

오른쪽 아래 Configure -> SDK Manager를 클릭한다.

"SDK Platforms" 에서 "Android 10 (Q)" 또는 "Android 11"을 선택하고

오른쪽 아래 "Show Package Details"를 누르면 다음과 같은 화면이 나온다.

아래와 같은 항목들이 선택되어있는지 확인하고, 그렇지 않으면 선택하여 설치한다.

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

그리고, "SDK Tools"를 클릭하고 "Show Package Details"를 클릭하여

Android SDK Build-Tools에 29.0.2를 체크한다.

 

마지막으로 환경변수 등록을 한다.

1. 윈도우 탐색기에 "시스템 환경 변수 편집" 을 입력하고 시스템 속성을 실행한다.

2. "고급" - "환경 변수" 를 클릭하고 "새로 만들기" 를 눌러 다음 환경변수를 추가한다.

 

• 변수 이름 : ANDROID_HOME
• 변수 값 : (sdk 지정한 경로)

-> 일반적으로 위와 같은 경로에 설치된다.

그 다음 "환경 변수" - "시스템 변수" - "Path"를 클릭하고 편집 버튼을 누른 다음 platform-tools 경로를 추가한다.

• 변수 값 : (sdk 지정한 경로)\platform-tools

 

cmd를 실행한 후 아래 명령어를 입력하여 정상적으로 결과가 출력되는지 확인한다.

adb --version

여기까지 따라왔다면 리액트 네이티브를 이용하여 개발할 준비는 끝났다!