React Native cli로 앱개발 시작하기

오늘 사수님이랑 같이 react native cli를 사용하기위해 환경설정 해봤다.

설정할땐 별 생각없었는데 이런저런 오류들을 마주하며 나중에 다시하려면 못할것같아서,

남겨보는 기록.

 

 

 

React-native-cli로 프로젝트 시작하기

어차피 환경설정을 안하면 프로젝트 실행이 안되지만

일단 프로젝트를 먼저 만들고 나서 환경설정을 해보자.

 

타입스크립트를 사용할거라서 타입스크립트 템플릿을 사용하여 react native를 시작했다.

npx react-native init {프로젝트 폴더 이름} --template react-native-template-typescript

 

이제 앱개발을 하기 위해서 환경설정을 해보자.

 

 

환경설정

우선 react native cli로 시작하려면,

Android랑 ios랑 둘다 설정해줘야한다.

 

 

react native로 andriod든 ios든 공통점은 node랑 watchman을 깔아야한다.

brew를 사용해서 node랑 watchman을 깔아주자

brew install node
brew install watchman

난 이미 node를 사용하고있었기 때문에 watchman만 깔아줬다.

 

 

iOS 기본 설정하기

일단 ios 설정법부터 살펴보자.

 

 

xcode 설정부터 해줘야한다. xcode를 키고 [cmd]+[,]를 눌러보자.

그리고 comman line tools를 설정해주면된다.

하지만 난 이걸 해주지 않아서 나중에 오류가 났었지...

그 오류도 여기에 적을거지만, 다음에 새로 개발환경 세팅할일이 있다면 이걸 잊어버리지말고 처음에 설정해보자.

 

 

 

ios를 개발하려면 `cocoapods`가 필요하다. 

`cocoapods`는 ios 개발에 사용되는 의존성 관리자이다.

 

`cocoapods`는 `gem`을 통해 다운 받을 수 있는데,

`gem`은 `ruby`의 패키지 매니저, 즉 `npm` 같은거라고 할 수 있다.

 

맥은 기본적으로 루비가 설치되어있기 때문에

만약 맥에 설치된 걸로 `cocoapods`가 잘 설치된다면 그대로 진행하면 된다.

sudo gem install cocoapods

 

 

하지만 내 맥은 안되서 ruby 버전을 올려줬다. ^^

그러기위해서 설치한 `rbenv`

루비의 버전관리 매니저, 그러니까 노드의 `nvm` 같은거라고 생각하면된다.

brew install rbenv ruby-build

 

`.zshrc` 파일에 환경변수를 추가한다. (zsh말고 다른쉘을 사용한다면 거기 설정파일에 환경변수를 추가하면 된다.)

echo 'eval "$(rbenv init - zsh)"' >> ~/.zshrc
echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.zshrc

 

환경변수 설정을 바꿨으니 새 터미널을 열자.

 

ruby 2.7.4버전을 설치하고, 터미널에서 사용하는 글로벌 버전을 2.7.4로 변경한다.

rbenv install 2.7.4
rbenv global 2.7.4

터미널에 `ruby -v`을 입력했을때, `2.7.4`가 나오면 성공!

이렇게하면 ruby 2.7.4버전이 사용이 된다.

 

 

그러고나서 다시 `cocoapods`를 다운로드받아보자. M1 유저라면 `ffi`도 설치해줘야한다.

gem install cocoapods ffi

 

이제 pod을 설치 하면 끝!!!

npx pod-install

 

이지만 또 오류가 났다.

엄청 긴 에러였는데 나중에 스크린샷찍어서 위쪽은 잘림.

`xcrun: error: SDK "iphoneos" cannot be located`

xcode를 인식하지 못해 생기는 오류... xcode설정을 해주자.

Xcode를 킨 후, `Command Line Tools` 를 설정하자.

 

다시 pod을 설치.

반가운 초록색들ㅠㅠㅠ

 

이후 각 터미널 각각 다른탭에 다음 명령어를 입력하면 앱이 시작된다.

npx react-native start

npx react-native run-ios

 

ios 시뮬레이터 모습 😄😄😄

Hello, world는 기본에 있던 화면 다 지우고 적어봤다ㅏㅏㅏ

 

 

Android 기본 설정하기

android는 java로 만들어진 언어라 자바개발키트(JDK)를 설치해야한다.

설치 안해주면 이런 오류가 뜬다. ^^;

brew를 사용해서 JDK인 `zulu`를 설치하자.

brew tap homebrew/cask-versions
brew install --cask zulu11

 

그리고 xcode와 같은역할을 하는 Android Studio를 설치하자.

Download Android Studio and SDK tools  |  Android Developers

 

Android Studio SDK는 다음과 같이 설정해주자.

설정([cmd] + [,])을 열고 `Appearance & Behavior > System Settings > Android SDK`에 들어간다.

아래쪽에 `Show Package Details`를 체크 한후, `Android 11.0(R)` 아래쪽에 있는

`Android SDK Platform 30`, `Intel x86 ...`, `Google APIs ATD Intel ...` 을 체크한다.(공식문서 추천 SDK)

적용 후, 안드로이드 스튜디오 SDK 환경변수를 설정해주자.

zsh 환경변수 설정파일을 열어서 아래 코드를 넣고 저장해주자.

open ~/.zshrc

export ANDROID_SDK_ROOT=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_SDK_ROOT/emulator
export PATH=$PATH:$ANDROID_SDK_ROOT/platform-tools

 

그럼 안드로이드 시뮬레이터를 돌려봅시다 :)

npx react-native start

npx react-native run-android

 

🥳🥳

* Refer to.

Setting up the development environment · React Native

뭐가 어찌되었건 제일 기본이 되는 공식문서 세팅방법