mac에서 React Native 개발환경 구축하기
⚙️ 선행 설치
mac에서 React Native 개발 환경을 구축하기 위해 기본적으로 먼저 설치되어야 하는 필수 프로그램입니다. 아래 두 가지 프로그램이 다운로드 되어 있어야 React Native 개발에 필요한 다른 프로그램들을 다운로드 받을 수 있습니다.
- Homebrew
- Xcode
Xcode의 빠른 설치 방법은 이 포스팅을 확인하세요.
xcode 설치가 완료되었다면 실행 후 cmd + , 로 preference에 진입한 뒤 Locations > Command Line Tools를 Xcode로 설정합니다.
✅ 아래 프로그램들은 mac에서 React Native 개발환경을 구축하는 데 모두 필요한 프로그램입니다. 모두 다운받습니다.
⌚ Watchman 설치
페이스북에서 제작한 Watchman은 소스 코드의 변화를 감지하여 특정 조건을 만족시키는 변화가 일어나면 특정한 동작을 실행시키는 도구입니다.
이 도구를 이용하여 특정 변화가 있을 시 자동으로 빌드되게끔 설정할 수 있습니다.
Watchman 설치를 위해서는 앞서 명시한 대로 mac에 Homebrew 설치가 선행되어 있어야 합니다.
홈브류 설치가 완료된 mac에서 아래 코드를 입력하여 watchman을 설치합니다.
brew install watchman
워치맨이 정상적으로 설치되었는지 확인하려면 버전을 확인합니다.
watchman --version
🙉 Node.js 설치
으로 접속하면, Installing and Updating > Install & Update Script 를 확인할 수 있습니다.
cURL이나 Wget 커맨드를 사용하여 설치할 수 있습니다.
버전이 달라질 수 있으니 직접 nvm github 페이지에서 소개하고 있는 코드를 터미널에 입력하는 것이 좋습니다.
설치가 완료되면 이미지 맨 밑에 있는 export로부터 시작하는 코드를 환경변수 파일에 추가합니다.
bash셸을 사용하고 있다면 ~/.bash_profile, zsh셸(oh-my-zsh)을 사용하고 있다면 ~/.zshrc 에 추가합니다.
zsh셸을 사용하고 있기 때문에 아래 명령어로 zsh 환경변수 파일을 열어 맨 끝에 붙여넣겠습니다.
nano ~/.zshrc
ctrl + x, y를 입력 후 엔터를 누르면 저장됩니다. 터미널을 재시작합니다.
nvm --version
정상적으로 설치되었다면 nvm 역시 버전이 반환됩니다.
nvm install --lts
를 입력하여 Node.js를 설치합니다.
🥑 Cocoapods 설치
React Native 개발환경 구축에 거의 필수적인 프로그램입니다. ios 라이브러리 관리 프로그램인 cocoapods입니다.
cocoapods 설치를 위해 아래 커맨드를 입력하면 비밀번호를 요구합니다. 로그온 비밀번호를 입력하면 정상적으로 설치가 완료됩니다.
sudo gem install cocoapods
정상 설치 확인 : pod --version
만일 아래와 같은 오류 로그가 반환되거나, 위 버전 확인 커맨드로 버전 확인이 되지 않으면 cocoapods 설치 오류로 실패한 것입니다.
맥에서 Cocoapods 설치 오류를 해결하려면 이 포스팅을 참고하세요.
오류 로그
/System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/2.6.0/mkmf.rb:467:in `try_do': The compiler failed to generate an executable file. (RuntimeError)
You have to install development tools first.
from /System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/2.6.0/mkmf.rb:546:in `block in try_link0'
from /System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/2.6.0/tmpdir.rb:93:in `mktmpdir'
from /System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/2.6.0/mkmf.rb:543:in `try_link0'
from /System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/2.6.0/mkmf.rb:570:in `try_link'
from /System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/2.6.0/mkmf.rb:672:in `try_ldflags'
from /System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/2.6.0/mkmf.rb:1832:in `pkg_config'
from extconf.rb:9:in `system_libffi_usable?'
from extconf.rb:42:in `<main>'
To see why this extension failed to compile, please check the mkmf.log which can be found here:
/Library/Ruby/Gems/2.6.0/extensions/universal-darwin-20/2.6.0/ffi-1.15.3/mkmf.log
extconf failed, exit code 1
Gem files will remain installed in /Library/Ruby/Gems/2.6.0/gems/ffi-1.15.3 for inspection.
Results logged to /Library/Ruby/Gems/2.6.0/extensions/universal-darwin-20/2.6.0/ffi-1.15.3/gem_make.out📲 시뮬레이터/에뮬레이터 설정
mac에서 React Native 테스트 화면을 바로 볼 수 있게 해 주는 역할을 하는 프로그램입니다. React Native 개발환경에서 Mac 뿐만 아니라 android 기기 상에 뜨는 프로젝트를 볼 수 있게 하는 역할입니다.
미리 가상 기기가 잘 로드되는지 설정한 이후 리액트 네이티브 프로젝트를 시작합니다.
🍏 Xcode에서 iOS 가상 기기 생성하기
React Native 개발환경 구축을 위해 Xcode에서 iOS 가상 기기를 생성하는 방법은 이 포스팅🔗을 참고하세요.
🤖 안드로이드 가상 기기 생성하기
React Native 개발환경 구축을 위해 아래의 포스팅들을 참고하여 Mac에 프로그램을 설치하고 안드로이드 가상 기기를 생성합니다.
Mac에서 안드로이드 개발 기본 셋팅하기 (안드로이드 스튜디오) 🔗
mac에서 React Native 프로젝트 만들기
Expo, React Native CLI를 통해 mac에서 React Native 프로젝트를 만들 수 있습니다.
Expo를 이용하면 시뮬레이터/에뮬레이터 실행도 보다 간편하지만 대신 어느 정도의 제약이 따릅니다.
React Native CLI는 Expo만큼의 편리성은 없지만 제약 없이 프로젝트를 확장할 수 있다는 장점이 있습니다.
Expo에서 시작한 프로젝트를 React Native CLI 프로젝트로 변경할 수도 있으나, 이를 되돌릴 수 없기 때문에 주의해야 합니다.
기능에 익숙치 않을 경우 보다 GUI가 갖추어져 있는 Expo가 편리할 수 있지만, 직접 프로젝트를 만들고 빌드하는 기본적인 것은 두 가지 툴에서 모두 시도해 보는 것이 좋습니다.
🗺️ Expo로 React Native 프로젝트 만들기
Expo를 설치합니다.
npm install -g expo-cli
cd로 프로젝트를 만들 폴더로 이동 한 후, example-project 라는 새 React Project를 만듭니다.
expo init example-project
만들어진 Expo React Native 프로젝트 폴더 내로 이동합니다.
cd example-project
Expo 프로젝트를 실행합니다.
npm start
IPhone에서 Go expo 어플을 다운받은 뒤 기본카메라로 qr코드를 조회하면 내 아이폰에서도 지금 만든 React Native 프로젝트 확인이 가능합니다.
🧶 CLI로 React Native 프로젝트 만들기
cd로 프로젝트를 만들 폴더로 이동 한 후, React Native CLI로 ‘MyProject’라는 새 React Project를 만듭니다.
npx react-native init MyProject
만들어진 CLI React Native 프로젝트 폴더 내로 이동합니다.
cd Myproject
각각의 커맨드로 iOS, Android 가상 기기에서 React Native 프로젝트를 실행합니다.
npm run ios
npm run android
만약, npm run android로 안드로이드 가상 기기에서 리액트 프로젝트를 빌드하는 것은 잘 동작하지만, iOS 빌드에서 계속해서 실패한다면 이 포스팅을 참고하세요.
mac에서 React Native 개발환경 구축을 위한 기본적인 프로그램 설치가 완료되었습니다.