Ubuntu에 React-Native-App/ Expo 환경 세팅 및 개발 방법

일단 여러분이 알아야 할 것이 iOS 개발은 기본적으로 Mac Os에서 가능하다고 보시면 됩니다. 

근데 그것을 다른 Os 환경에서도 가능하게 해주는 것이 Expo 환경입니다. 

1.  Node.js 설치

sudo curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -

sudo apt-get install -y nodejs

node -v

근데 여러분이 개발자라면 node는 대부분 설치 되어 있을겁니다. 

중요한 것은 node 버전을 관리해주는 프로그램입니다.

2. nvm 설치

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
# Zsh 사용자
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | zsh

버전에 따라 expo가 실행 안되는 경우가 있습니다. 17 버전 이상의 최신 버전 node를 사용하면 되겠습니다.

source ~/.bashrc
# Zsh 사용자
source ~/.zshrc

활성화해줍니다.

3.nvm 사용 명령어

nvm install node  # 최신 버전 설치
nvm install --lts # 최신 LTS 버전 설치
nvm install 16.14.0  # 특정 버전 설치
nvm install 16  # 특정 버전 16의 최신 릴리즈 설치

고정 사용 명령어

nvm run default --version # 현재 설정된 기본 노드 버전 확인
nvm alias default node # 최신 버전
nvm alias default lts/* # LTS 버전 -  Zsh은 'lts/*'
nvm alias default v16.14.0 # 16.14.0 버전
nvm alias default 16 # 16 버전 중 최신 릴리즈

임시 사용 명령어

nvm run node --version # 현재 실행 중인 노드 버전 
nvm use node # 최신 버전 
nvm use --lts # LTS 버전 
nvm use 16.14.0 # 16.14.0 버전 
nvm use 16 # 16 버전 중 최신 릴리즈

4.EXPO 설치

sudo npm install expo-cli --global

추가 설치

npm install --save-dev metro metro-core

npm i -g npm-check-updates

5.EXPO QUICK start

npx create-expo-app AwesomeProject

cd AwesomeProject
npx expo start

$ npx expo start
Starting project at /home/centumjoonho/joonho/mobile/development/AwesomeProject
Starting Metro Bundler
▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄
█ ▄▄▄▄▄ █▀▄█▀    ▄█ ▄▄▄▄▄ █
█ █   █ █▄   ▄███ █ █   █ █
█ █▄▄▄█ █ ▀█▀█ ▀ ▀█ █▄▄▄█ █
█▄▄▄▄▄▄▄█ ▀▄█ █ ▀ █▄▄▄▄▄▄▄█
█▄ █ █▀▄▄▀█ ▀▄ ▀██▀  ▄▀▄▄▀█
██▀   ▀▄▀▀▄▄█▄  ██▄▀ ▀▀█▄▄█
██▄▄▀▄ ▄▀▀█▀██▄ █▀█ ▄█ ██▀█
█▄▀█ ▀▄▄     ▄ ██ ▄▄ ▀▀██▄█
█▄▄█▄██▄█▀▀▀▀██▄  ▄▄▄ █ ▄ █
█ ▄▄▄▄▄ █▄█▀▀▄▄▄  █▄█  ▀▄ █
█ █   █ █▀▀█▄█ ▀▀▄ ▄▄ █▀▄██
█ █▄▄▄█ █▀ ▀██ ▄█  █▄  ▄█▄█
█▄▄▄▄▄▄▄█▄██▄█▄▄█▄███▄▄█▄▄█

› Metro waiting on exp://192.168.219.102:19000
› Scan the QR code above with Expo Go (Android) or the Camera app (iOS)

› Press a │ open Android
› Press w │ open web

› Press j │ open debugger
› Press r │ reload app
› Press m │ toggle menu

› Press ? │ show all commands

Logs for your project will appear below. Press Ctrl+C to exit.

이렇게 나오고 

휴대폰에 위 QR 코드를 읽히면  expo go 앱과 연동되어 앱이 실행된다. 

https://reactnative.dev/docs/environment-setup

Setting up the development environment · React Native