셋팅 시작

이번에 사이드 프로젝트를 진행하면서 RN(React-native)관련 세팅을 진행했습니다. 다 하고 보니 그렇게 어려울 건 없었지만, 처음 세팅하시는 분들이 보다 쉽게 셋팅을 하길 바라는 마음에 RN세팅 방법을 공유해 보려 합니다.

처음에는 이미 정리가 되어있는 블로그를 참고해서 이 패키지, 저 패키지 세팅을 하면서 진행했는데, 계속 에러 메시지를 받으면서 역시나 공식 문서가 짱이라는 것을 느꼈습니다. 블로그 작성일이 2023년 5월 27일 기준이기 때문에, 시간이 흐른 뒤, 이 블로그을 통해 셋팅하면 아마 또 에러가 생길꺼에요.. 그러니 블로그는 참고만 하시고 공식 문서로 세팅 하는 걸 추천드려요

Android
https://reactnative.dev/docs/environment-setup?guide=native&platform=android

Ios
https://reactnative.dev/docs/environment-setup?platform=ios

자 그럼 진짜 시작합니다!

순서

아래의 순서로 진행할 예정입니다.
1. Homebrew 설치
2. zshrc 설치
3. Ruby 설치(rbenv)
4. watchman 설치
5. cocoa pods 설치
6. JDK 설치(Java)
7. Android 설치
8. Xcode 설치

1. homebrew

Home brew는 Mac의 패키지 관리자로, 이걸로 설치하시면 편하게 설치하실 수 있습니다.

설치

터미널에 아래의 명령어를 입력합니다

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

앞으로 다른 패키지나 프로그램 설치를 할때 꽤 많이 사용될 프로그램이니 꼭 설치 진행해주세요!

2. zshrc

zshrc란

개발 환경을 구축 할 경우, 변수를 설정이 필요합니다. Mac에서 환경 변수를 설정해 놓는 쉘은 .bashrc, .bash_profile, .zshrc등 여러개가 있는데, 저는 zshrc로 진행했습니다. zshrc는 java 버전, ruby버전 등을 설정할때 필요합니다.

설치

터미널에 아래의 명령어를 입력합니다

sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

react-native 셋팅을 진행할 때, 개발 환경을 변경해야 할 일이 종종 있을 텐데, zshrc를 편집하는 방법은 터미널에서 code ~/.zshrc를 입력하시면 됩니다.

3. ruby

RN 개발 환경을 셋팅하기 위해서는 Ruby 2.7.5버전이 필요합니다. ruby의 버전을 설정하기 위해서는 버전을 관리하는 툴인 rbenv가 필요합니다.

설치

터미널에 아래의 명령어를 입력합니다

brew install rbenv
rbenv install 2.7.5
rbenv global 2.7.5
rbenv local 2.7.5
rbenv rehash

이후 ruby -version을 입력하게 되면,

ruby 2.7.5p203 (2021-11-24 revision f69aeb8314) [arm64-darwin21]

이와 같이 터미널에 출력되면 정상입니다.

만약 Ruby 버전 설정이 정상적으로 작동되지 않는 경우 아래와 같은 에러가 나는데

error Your Ruby version is 2.6.8, but your Gemfile specified >= 2.6.10

이럴 경우, code ~/.zshrc등과 같은 명령어를 통해 zshrc에

export PATH={$Home}/.rbenv/bin:$PATH && \
eval "$(rbenv init -)"

아래의 코드를 넣은 후, 버젼 설정을 진행하면 됩니다.

이후 아래의 명령어를 콘솔에 입력합니다.

gem install bundler

환경 설정이 제대로 되지 않는 경우, 나중에 npx react-native init명령어 입력시, 에러가 발생되기 떄문에 꼭 ruby -version을 입력했을때 2.7.5버젼이 출력되는지 확인해주세요

4. watchman

watchman은 특정 폴더나 파일을 감시가하다 변화가 생기면, 특정 동작을 실행하도록 설정하는 역할을 합니다.

설치

터미널에 아래의 명령어를 입력합니다

brew install watchman

이후 아래의 명령어를 통해 watchman이 잘 설치되었는지 확인합니다.

watchman -version

5. cocoapods

cocoapods는 IOS에서 필요한 의존성 관리 툴입니다.

설치

터미널에 아래의 명령어를 입력합니다

sudo gem install cocoapods

아래의 명령어를 통해 설치가 잘 진행되었는지 확인합니다

pod --version

6. Java Development Kit

JDK(Java Development Kit)는 안드로이드 스튜디오에 사용되는 gradle 플러그인을 활용하기 위해 설치가 필요합니다.

설치

터미널에 아래의 명령어를 입력합니다

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

이후에 터미널에 brew info --cask zulu11를 입력해서

==> zulu11: 11.0.19,11.64.19-ca
https://www.azul.com/products/core/
/opt/homebrew/Caskroom/zulu11/11.0.19,11.64.19-ca (2 files, 183.5MB)
From: https://github.com/Homebrew/homebrew-cask-versions/blob/HEAD/Casks/zulu11.rb

이러한 코드가 출력되면, 설치가 성공적으로 진행된겁니다.

이후에 JAVA_HOME 환경 셋팅을 진행해야 합니다. JAVA_HOME을 업데이트 하기 위해, zshrc를 실행시킵니다. 하단의 코드를 입력후 저장합니다.

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

이후에, java -version을 입력 했을 때,

openjdk version "11.0.19" 2023-04-18 LTS
OpenJDK Runtime Environment Zulu11.64+19-CA (build 11.0.19+7-LTS)
OpenJDK 64-Bit Server VM Zulu11.64+19-CA (build 11.0.19+7-LTS, mixed mode)

이 코드가 나오면 성공이고, openjdk versiondl 1.8라면, 셋팅을 실패한것입니다.

7. Android Studio

react-native로 안드로이드 앱을 개발하기 위해서는 안드로이드 스튜디오를 설치해야 합니다.

설치

터미널에 아래의 명령어를 입력합니다

brew install --cask android-studio

설치가 완료되면 몇가지 셋팅을 해줘야 합니다. 안드로이드 스튜디오를 실행합니다.

customize > all settings 클릭

Appearance & Behavior > system settings > android SDK 클릭

아래의 SDK 선택 > OK 버튼 클릭

• Android SDK Platform 33
• 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

안드로이드 환경 변수 설정

zshrc파일을 열어서 아래의 변수들을 저장합니다

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

8. Xcode

앱스토어에서 Xcode를 검색 후, 다운로드를 받습니다.

완료

터미널에 아래의 명령어를 입력합니다

npx react-native@latest init AwesomeProject

셋팅이 완료되면 아래의 명령어를 통해 AOS와 IOS를 실행할 수 있습니다

IOS : yarn ios
AOS : yarn andorid

성공 🙌

마무리

셋팅하는 과정은 역시나 생각보단 어렵지 않으며, 생각보단 시간이 많이 걸리는것 같습니다. 다양한 프로젝트를 셋팅하면서 느낀점은 공식문서를 참고 하는 게 가장 빠른 길이라는걸 오늘도 느끼며, 글을 마무리 하겠습니다.

셋팅에서 가장 오류가 많았던건 Ruby, JDK 이 두가지 설정이여서, 다른 패키지 설정보다 자세하게 적어뒀으니 잘 참고해주세요! 긴 글 읽어주셔서 감사합니다