우당탕탕 리액트 네이티브 설정하기

박재성·2022년 10월 1일

react native

웹을 공부하다보면 앱이 끌릴 때가 있다. 그래서 리액트 네이티브를 해보기 위해 환경을 설정하는데 허허 안되는 일이 뭐이리 많은지 너무 화나서 글로 남겨본다.

일단 xcode 꿀밤 하나

mac을 사용하는 사람들은 모두 공감한다고 생각한다. xcode 업데이트를 하기 싫어도, 쓰지 않아도 업데이트를 해줘야하는 상황이 있는데 왜 업데이트가 무한으로 되는지 너무 골치가 아프다.

해결..!

일단 app store 자동 업데이트를 꺼주자. 매일 돌아가고 있는 xcode를 보면 혈압이 오르는 게 아니라 터진다.

app store에 들어가서 상단 바에 app store 클릭하면 환경설정이 나오니 자동 업데이트를 꺼주자.

그리고 xcode로 넘어가서 수동으로 다운로드해서 압축을 풀어주면 아주 깔끔하게 신버전을 사용할 수 있다.

마지막으로 xcode를 실행하고 마찬가지로 상단 바 눌러서 Preferences 들어가서 Locations 가서 commandline tool 가장 위에 있는 걸로 선택해 주면 일단 xcode 문제를 해결할 수 있다.

코코팟

일단 설치하자. 2번째 줄은 실리콘 맥을 사용하면 설치해주자.

sudo gem install cocoapods
sudo gem install ffi

뭐.. 원하는 시물레이터 기기가 있다면 xcode 실행해서 에디터 상단에 보면 선택할 수 있는 곳이 있다. 원하는 기기 설정해서 실행해 보면 나름 뿌듯하다.

에휴 안드로이드

안드로이드는 생각보다 할 일이 많다. 하지만 네이티브 공식문서를 잘 따라 하면 쉽게 할 수 있다.

일단 안드로이드 스튜디오를 다운 받아주자.

아 물론 공식문서는 다른 것 부터 한다. 차례대로 따라 해도 된다.

다운 받으면서 일단 터미널을 키고, 당연히 브루가 있다고 생각하며 자바를 쓰기 위한 도구들을 받아주자.

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

어떤 사이트를 보면 zulu11이 아니라 openjdk8 뭐시기 하면서 있는데 그건 예전 버전이다. 이제 자바 8에서 11로 넘어가라고 하니 저렇게 받아주자.

이쯤되면 안드로이드 스튜디오가 다 받아졌을 것이다. 실행을 시키고, 케밥 아이콘(일명 땡땡땡)을 클릭하면 SDK Manager가 있다.

엄청나게 많은 뭔가가 나오지만 공식문서에 나와 있는 정보를 잘 따라가면 충분히 할 수 있다.

일단 오른쪽 아래 show Package Details를 누르면 뭐가 더 많아질 것이다. 당황하지 않고 공식문서에 나온 Android SDK Platform 31를 찾아서 클릭한다.

이 다음은 어떤 맥인지에 따라 다르다.

Intel x86 Atom_64 System Image or
Google APIs Intel x86 Atom System Image or
(for Apple M1 Silicon) Google APIs ARM 64 v8a System Image

상황에 맞게 체크한다.

그리고 SDK Tools에 가서 Android SDK Commandline tools를 체크하고 apply를 클릭하면 쫙 설치가 될 것이다.

마지막으로 할 일은 환경 변수를 설정해주면 된다.

환경변수 설정

일단 SDK Manager에 보면 Andriod SDK Locations에 주소가 있다. 잘 복사해 두자.

맥을 사용하는 사람들은 터미널을 사용한다고 생각한다면 zsh를 사용하겠지요..?

vim ~/.zshrc

들어가서 vim 조작법을 숙지한 다음 아래 코드를 복사해서 넣어준다.

export ANDROID_SDK_ROOT= 아까 복사한 주소
export PATH=$PATH:$ANDROID_SDK_ROOT/emulator
export PATH=$PATH:$ANDROID_SDK_ROOT/platform-tools

해당 파일을 적용시켜준다!

source ~/.zshrc

참고사항

저는 처음에 자바를 받을 때 11로 받지 않고 8버전으로 받아서 에러가 났지만, 만약에 자바가 없다는 에러가 나온다면 자바를 수동으로 다운 받고 환경변수를 살짝 넣어주면 됩니다.

export JAVA_HOME=/Library/Java/JavaVirtualMachines/zulu-11.jdk/Contents/Home

마찬가지로 적용시켜주기!

빌드해보기

일단 프로젝트를 만들어야겠죠? 타스는 아래로 하면 됩니다.

	npx react-native init myApp
    npx react-native init myApp --template react-native-template-typescript

빌드를 위한 명령어는 package.json을 통해 알 수 있지만, 기본적으로 npm run android, ios로 가능합니다. 하지만 ios 경우 바로 안 되고, ios 디렉토리에 가서 pod install을 딱 해주면 빌드가 오래오래 걸리다가 시물레이터가 켜지는 엄청난 모습을 보실 수 있을 겁니다.