[React Native] 개발환경 세팅

사이드 프로젝트로 안드로이드, iOS 환경에서 모두 구동 가능한 모바일 애플리케이션을 개발하기 위해 리액트 네이티브를 사용하고자 한다.

1. Node.js 및 React Native CLI 설치

하기 링크에서 설치 파일을 다운로드한다.

Node.js — Run JavaScript Everywhere

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

모든 설정은 디폴트 값으로 install 한 뒤 cmd창에서 하기 1, 2번째줄 명령어를 입력해 정상 설치된 것을 확인한다.

그리고 마지막 명령어를 통해 React native CLI 를 설치한다.

node -v
npm -v
npm install -g react-native-cli

2. JDK 설정

필자는 JAVA 기반 개발환경인 JDK가 이미 설치되어 있어 환경설정만 추가해주었다.

내PC > 우클릭 속성 > 고급 시스템 속성 > 환경변수에서 하기와 같이 환경변수와 JDK 경로를 추가해준다.

사용자 변수를 새로 추가한 뒤, 하단 시스템 변수의 변수 'Path'에도 '%JAVA_HOME%bin'을 추가한 뒤 저장한다.

3. 안드로이드 스튜디오 환경설정

안드로이드 스튜디오 또한 설치가 되어 있어 개발환경만 변경하였다.

설치 파일은 하기 링크에서 다운로드 가능하다.

Android 스튜디오 및 앱 도구 다운로드 - Android 개발자 | Android Studio | Android Developers

Android Studio provides app builders with an integrated development environment (IDE) optimized for Android apps. Download Android Studio today.

developer.android.com

안드로이드 환경설정은 JDK 와 동일하게 내PC > 우클릭 속성 > 고급 시스템 속성 > 환경변수에서 시스템 변수를 변경해준다.

시스템 변수에서는 변수 이름 'ANDROID_HOME'으로 설정 후, 안드로이드 스튜디오 내에서 Android SDK 설치 디렉토리를 찾아 기입하였다.

디렉토리는 File > Settings > Appearance & Behavior > System Settings > Android SDK 에서 확인 가능하다.

이후 사용자 변수에서도 Path에 들어가 'ANDROID_HOME%\platform-tools' 를 추가 후 저장한다.

cmd 창에서 adb --version 커맨드를 쳐보면 설치 잘 되어 있는 것 확인 가능하다.

이후 node.js 프로젝트를 만들어준다.

npx react-native init 'project_name'

만약 버전 문제가 발생한다면 하기 커맨드로 다시 프로젝트를 생성해본다.

npx react-native init 'project_name' --version 0.68.2

그리고 생성해준 프로젝트 디렉토리에서 안드로이드를 실행해준다.

dir 'project_name'

npm run android

이렇게 리액트 네이티브 설치 및 프로젝트 생성까지 개발환경이 갖춰진다.

one step at a time!