React Native CLI를 이용한 React Native App

기운찬곰·2020년 9월 23일

react native

React Native

목록 보기

3/6

시작하기에 앞서서...

이 시리즈는 유데미의 React Native - The Practical Guide [2020 Edition] 강의를 듣고 정리한 글입니다.

이번 시간에는 React Native App 설치환경을 구성을 위한 두번째 방법인 React Native CLI를 이용해보도록 하겠습니다.

🚀 React Native CLI 사용하기전 준비사항

Chocolatey 설치

Chocolatey는 윈도우(Windows)에서 필요한 패키지를 설치하고 관리하는 윈도우(Windows)용 패키지 관리자입니다. (우분투에서의 apt-get과 비슷하다고 할 수 있습니다)

따로 일일이 찾아다니면서 설치파일을 다운로드하는 과정, 업데이트하는 과정을 apt-get 처럼 효과적으로 할 수 있다는 것이 장점입니다.

설치 방법 : https://chocolatey.org/install

PowerShell을 관리자 권한으로 실행해줍니다. 그리고 다음 명령어를 입력합니다.

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

설치가 완료되었다면 choco -version이 제대로 동작하는지 확인합니다.

v0.10.15라고 잘 나오는 것을 알 수 있습니다.

간단하게 사용방법에 대해서 집고 넘어가도록 하겠습니다.

패키지 검색 : choco search 패키지명
패키지 설치 : choco install 패키지명 (-y)
설치된 패키지 확인 : choco list --localonly
업데이트 : choco upgrade 패키지명
패키지 삭제 : choco uninstall 패키지명

추천 패키지명 : jdk8, mysql, mariadb, nodejs, vscode, git, python3(혹은 2) 등 다수
그 외 : https://chocolatey.org/packages

Nodejs, Python2, JDK 설치

react-native는 Javascript이므로 Javascript의 런타임인 Nodejs가 필요합니다. 공식사이트에서는 10 이상을 설치하라는 군요.
리액트 네이티브의 빌드 시스템은 파이썬을 사용합니다. (근데 왜 아직도 2버전을 쓰냐고...3버전은 안되는건가?)
react-native로 안드로이드 앱을 개발하기 위해서는 JDK(Java Development Kit)를 설치할 필요가 있습니다.

설치는 choco를 이용해 한번에 할 수 있답니다.

choco install -y nodejs.install python2 openjdk8

Android Studio 설치

react-native로 안드로이드 앱을 개발하려면 안드로이드 스튜디오를 설치해야 합니다. 저번시간에 설치해봤으니 빠르게 지나가겠습니다.

🪁 React Native CLI 시작하기

React Native CLI 설치

아래의 npm 명령어를 통해 React Native CLI를 설치합니다.

$ npm install -g react-native-cli

프로젝트 생성과 실행

프로젝트를 생성해보겠습니다.

$ react-native init SecondApp

Expo 프로젝트와는 그 구조가 좀 다릅니다. android와 ios 폴더로 나눠져있는 것도 그렇고요. 궁금해서 찾아보니까 android와 ios의 네이티브 모듈을 담당하고 있는 부분이고, react native에서 제공해주지 않는 기능을 사용하기 위해서는 네이티브 모듈을 직접 구현해줘야 하는부분이라고 하네요.

한번 실행시켜보겠습니다. 처음이라 그런지 좀 오래걸리네요...