React Native(Expo CLI)의 환경 구축을 공식 문서에 따라 해본다

이 기사는 React Native 공식 문서의 절차에 따라 환경을 구축합니다. 영어에 저항하지 않는 분은, 공식 문서를 읽어 환경 구축해 보세요.

운영 환경

Mac OS X 10.14.6

React Native 0.62

Node v12.8.0

소개

React Native에는 2종류의 개발 툴이 준비되어 있어 공식 문서에서는 이하와 같이 추천되고 있습니다.

Expo CLI 　　　 　 모바일 개발 경험을 처음으로 추천합니다.

React Native CLI 모바일 개발 경험이있는 분에게 추천

자세한 차이점은 여기 react-native 초학자가 학습을 시작하기 전에 알아야 할 6 tips에서 취급하고 있으므로 흥미있는 분은 읽어보십시오!

이번은, 필자 본인도 모바일 개발 경험이 없기 때문에, Expo CLI 로 환경 구축을 실시해 보겠습니다.

개발 환경 구축 (Expo CLI)

Expo CLI 명령 줄 설치

$ npm install -g expo-cli

Unhandled rejection Error: EACCES: permission denied

npm ERR! cb() never called!

npm ERR! This is an error with npm itself. Please report this error at:
npm ERR!     <https://npm.community>

에러라면, 이 에러가 된 분은 여기 를 참고로 sudo chown -R $(whoami) ~/.npm 를 실행하고 나서, 다시 install 를 실행해 보세요.

설치가 완료되었는지 확인해 봅시다.

$expo --version
ERROR: Node.js version 11.12.0 is no longer supported.

expo-cli supports following Node.js versions:
* >=10.13.0 <11.0.0 (Active LTS)
* >=12.0.0 <13.0.0 (Active LTS)
* >=13.0.0 <14.0.0 (Current Release)

또 에러라면, , , 아무래도 버전에 문제가 있는 것 같다.

$ nodebrew use v12.8.0
use v12.8.0

$ nodebrew ls
v8.9.4
v11.12.0
v12.8.0

current: v12.8.0

좋아! 그리고는 다음의 커멘드를 칠 뿐입니다.

$ expo init AwesomeProject
zsh: command not found: expo

왜,,,,
아무래도 PATH가 다니지 않았던 것 같습니다. 필자는 zsh 입니다만, bash 의 분은 ~/.bash_profile 에 PATH를 통해 둡니다.
react-native: command not found

$ echo 'export PATH="/usr/local/Cellar/node/13.5.0/bin/:$PATH"' >> ~/.zshrc

다시 expo init AwesomeProject를 실행하면 ...

$ expo init AwesomeProject
? Choose a template: (Use arrow keys)
  ----- Managed workflow -----
❯ blank                 a minimal app as clean as an empty canvas
  blank (TypeScript)    same as blank but with TypeScript configuration
  tabs                  several example screens and tabs using react-navigation
  ----- Bare workflow -----
  minimal               bare and minimal, just the essentials to get you started
  minimal (TypeScript)  same as minimal but with TypeScript configuration

마침내 잘 작동했습니다! !

Managed Workflow와 Bare Workflow의 차이은 문서에 나와 있습니다.


특징
Managed workflow
Bare workflow


JavaScript/TypeScript만으로 유니버설 앱 개발
✔

Expo를 사용하여 iOS 및 Android를 빌드하기 　　　　
✔

Expo 푸시 알림 서비스 사용
✔
✔

Expo의 무선 업데이트 기능 사용
✔
✔

Expo 클라이언트 앱으로 개발
✔
✔

Expo SDK 액세스
✔
✔

맞춤 네이티브 코드를 추가하고 네이티브 종속성 관리

✔

Xcode 및 Android Studio에서 개발

✔


문서에서 설명한 것처럼 초보자는 Managed workflow 사양을 권장합니다.

그리고는 디렉토리를 이동해, 기동시킬 뿐입니다.

$ cd AwesomeProject
$ yarn web // yarn ios or yarn android

성공하면 화면이 표시됩니다.

참고 기사

이하의 기사를 본 기사 집필시에 참고로 했습니다. 선인의 지식 님입니다! !

react-native 초학자가 학습을 시작하기 전에 알아야 할 6 tips