React-native 시작하기

지옥의 환경셋팅

homebrew 설치

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

brew version 확인

brew --version

정상적으로 설치가 되었으면 아래와 같이 버전 확인이 가능하다.

환경 변수 등록

~/.zshrc 파일을 열어 환경변수를 등록한다.

export PATH=$PATH:/opt/homebrew/bin

node 설치

brew install node

설치가 정상적으로 되었다면 아래와 같이 node와 npm 버전 확인이 가능하다.

watchman 설치

Watchman은 특정 폴더나 파일을 감시하다가 변화가 생기면, 특정 동작을 실행하도록 설정하는 역할을 합니다. react-native에서는 소스코드의 추가, 변경이 발생하면 다시 빌드하기 위해 Watchman을 사용하고 있습니다.

watchman: https://facebook.github.io/watchman/

brew install watchman 명령으로 설치

설치가 정상적으로 되었다면 아래와 같이 버전 확인이 가능하다.

(인터넷에서는 조금 다르게 동작하던데 이게 맞는건진 잘 모르겠다. 근데 도움말 명령엔 --version 이라고 명시가 되어있음.)

React Native CLI 설치

npm install -g react-native-cli

설치가 정상적으로 되었다면 아래와 같이 버전 확인이 가능하다.

XCode 설치

XCode 13버전 이상을 설치해야하는데, 그럴려면 OS가 12버전 이상이어야 한다.
그래서 OS 버전부터 업데이트 하고, XCode 업데이트 하고.... 근데 프로젝트 생성하다가 실패나고 계속 뭐가 꼬이고 그래서 깔끔하게 XCode를 지우고 다시 설치했더니 원활하게 다음 스텝도 수행이 되었다는 이야기...

그래서! 일단 OS 업데이트 하고 컴퓨터 재시동 하고 XCode를 다시 설치했다.

XCode 완전 삭제하기

rm -rf /Applications/Xcode.app /Library/Preferences/com.apple.dt.Xcode.plist ~/Library/Preferences/com.apple.dt.Xcode.plist ~/Library/Caches/com.apple.dt.Xcode ~/Library/Application Support/Xcode ~/Library/Developer ~/Library/Developer/Xcode ~/Library/Developer/CoreSimulator

-> 참고 링크 : https://devmjun.github.io/archive/Reduce-StorageInMac

그리고 App Store에서 XCode를 다시 받아준다.
설치가 완료되면 Command Line Tools 설정하기!

XCode > Preferences > Locations > Command Line Tools Version 설정

Cocoapods 설치

Cocoapods는 iOS 개발에 사용되는 의존성 관리자입니다. react-native로 iOS 앱을 개발하려면 꼭 필요하므로 아래에 명령어를 사용하여 Cocoapods를 설치합니다.

sudo gem install cocoapods 명령으로 설치

설치가 정상적으로 되었다면 아래와 같이 버전 확인이 가능하다.

JDK 설치

react-native로 안드로이드 앱을 개발하기 위해서는 JDK(Java Development Kit)를 설치할 필요가 있습니다. 아래에 Homebrew 명령어를 실행하여 JDK를 설치합니다.

brew tap AdoptOpenJDK/openjdk
brew install --cask adoptopenjdk8

설치가 정상적으로 되었다면 아래와 같이 버전 확인이 가능하다.

Android Studio 설치

안드로이드 스튜디오: https://developer.android.com/studio
환경 변수 설정하기 : vi ~/.zshrc

# export ANDROID_HOME=$HOME/Library/Android/sdk
export ANDROID_HOME=자신의 안드로이드SDK 위치/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools

설치 후 환경변수가 정상적으로 등록 되었다면 아래와 같이 확인할 수 있다.

React Native Project 생성

npx react-native init SampleApp

설치하는 도중, 아래와 같은 메세지가 빨간색으로 떡하니 표시가 되었다.....
에러 메세지를 보면 지금 사용하는 노드 버전보다 React Native 버전에서 요구하는 버전이 높아서 높이라는것 같다. 노드 버전을 관리하기 위해 nvm을 설치한다.

nvm 설치

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh

설치가 잘 되었다면 command -v nvm 입력 후 'nvm'이라는 글자가 나올 것이다.

환경 변수 설정 -> vi ~/.zshrc 에 추가

export NVM_DIR="$HOME/.nvm"
  [ -s "/opt/homebrew/opt/nvm/nvm.sh" ] && \. "/opt/homebrew/opt/nvm/nvm.sh"  # This loads nvm
  [ -s "/opt/homebrew/opt/nvm/etc/bash_completion.d/nvm" ] && \. "/opt/homebrew/opt/nvm/etc/bash_completion.d/nvm"  # This loads nvm bash_completion

사용할 노드 버전 변경하기
- nvm ls: 노드 버전 목록 확인
- nvm use [사용할 노드 버전]
- node --version: 현재 노드 버전
  
  스위칭 끗
참고 링크 : https://roadrunner.tistory.com/651

다시 돌아가서 npx react-native init SampleApp 으로 프로젝트를 생성해본다.
설치가 어느정도 되면

이렇게 리액트 로고와 함께 반기는 메세지가 뜨고!

실행해야 하는 방법이 나온다. !!! 프로젝트 생성 완료 :) 힘들다.....

Android 로 구동 시키기

android studio 를 켜고, device 를 추가해준다. → 우측 ... 을 누르고 Virtual Device Manager 클릭

Create Device 클릭

Device, API 버전은 일단 나는 29, 30 버전을 설치했다. (개발시 필요에 따라 추가 다운로드 필요)

에뮬레이터를 구동 후 부팅이 완료되면, 터미널로 돌아가서 SampleApp 프로젝트에서 npm install을 먼저 실행한다. 패키지 설치가 완료되면 react-native run-android 명령으로 실행한다.