리액트 네이티브 - 개발환경 구축 (Windows)

 

리앤트 네이티브는 Windows / Mac OS에도 모두 사용 가능하지만, iOS향 앱을 빌드하기 위해 필요한 X-Code는 Mac OS에서만 설치가 가능한 관계로 대부분 Mac OS 사용을 권장한다. (강의도 Mac OS가 대부분이다. 쳇!!!)

 

하지만 수십년(?) 전 처음 PC라는 것을 접할때부터 Windows만 고집한 진성 Windows 유저임으로 (사실 Mac이 없다.ㅠㅠ) 이번에도 Windows를 기준으로 개발환경을 구축하고자 한다.

 

1. Node.JS 설치

React 및 Javascript 라이브러리 실행을 위한 필수 요소로 아래 주소에서 최신 버전 다운/설치 필요

https://nodejs.org/ko/download/

다운로드 | Node.js

Node.JS를 설치하면 NPM(Node Package Manager)로 node.js에서 사용하는 모듈들을 패키지로 만들어 관리하고 배포할 수 있는 표준 패키지 관리도구로 Python의 pip나 Ruby의 gem과 같은 역할을 한다.

React Native 개발환경도 대부분 NPM을 이용하여 구축 가능하지만, 필요한 경우 Yarn을 추가로 설치하여 패키지들을 설치할 수 있다. 

 

기본 코드 편집기가 없는 경우, Visual studio Code 설치가 필요하다. 

Download Visual Studio Code - Mac, Linux, Windows

VSCode 추천 익스텐션과 세팅 (VSCode Recommended Extensions and Settings)

 

2. Expo 설치 및 가입

Expo는 React Native 개발을 위한 도구로 React native 초기 설정과 배포 과정을 단순화 시켜주는 오픈소스 프로젝트로 Expo XDE에는 React Native가 포함되어 있음으로 별도 설치가 불필요하다. 

 

이유는 모르겠지만 Expo를 설치하더라도 npm을 통해 React-Native-Cli 설치가 필요했다.
설치를 위해서는 콘솔에 'npm install -g react-native-cli' 라고 입력하면 된다. 

 

https://github.com/expo/xde/releases

expo/xde

위 주소에서 설치 파일을 다운로드 받아 설치 가능하지만, npm이 정상적으로 설치되어 있다면

콘솔에 아래 명령어를 통한 설치도 가능하다.

npm install -g expo-cli

 

Expo XED 사용을 위해서는 Expo 계정이 필요하며, 아래 주소에서 가입 가능하다.

https://expo.io

Expo

Expo를 이용한 서비스 배포 프로세스에 대한 자세한 내용은 아래 URL에서 확인할 수 있다.

[EXPO(react-native-create-app) 프로젝트 배포] 1. EXPO를 이용한 배포 과정 살펴보기

 

※ Expo를 이용하지 않을 경우, 직접 React native에 접속하여 패키지를 다운받아 설치할 수도 있다.

https://facebook.github.io/react-native/

React Native · A framework for building native apps using React

 

3. Android Studio 설치 (iOS는 Mac에서 X-Code설치 필요)

Expo 사용 시, PC에서 Virtual mobile 화면을 사용하기 위해서는 Android Studio 설치가 필요하다.

단, 실물 모바일 기기를 연결해서 개발을 진행할 경우에는 설치할 필요가 없다. 

 

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

Download Android Studio and SDK tools

 

참고자료
- https://codinghub.tistory.com/47
- https://hankkuu.tistory.com/54