리액트 네이티브
개요
리액트 네이티브에 관심이 생겼다. 이미 리액트 네이티브로 프로젝트를 한적이 있어서(개발을 직접하진 않았지만...) 완전 생소하진 않았다. 구글링을 해보니 플러터와 용호상박을 이루고 있었는데 개인적으로는 리액트 네이티브가 우세한 형국으로 보였다.
요즘 리액트로 회사 프로젝트를 조금 만졌더니 리액트의 매력에 빠졌다. 그리고 뷰와 리액트를 하면서 타입스크립트도 재미나게 사용을 했다. 그런 와중에 플러터는 다트라는 언어를 사용함으로써 리액트 네이티브에 비해 매력이 많이 떨어졌다.
오랜 기간을 웹개발자를 하다보니 자바스크립트는 너무 익숙하다. 오랜기간 운전을 하거나 보드를 타거나 하면 이후 부터는 몇년만에 운전이나 보드를 타러가던 거부감없이 빠르게 적응하는 것과 마찬가지다. 자바스크립트를 엄청 잘하는 것도 아니지만 화면에 적용시킬만큼은 알기 때문에 리액트에서 사용하는 타입스크립트는 편안하게 느껴졌다.
회사에 앱개발자가 둘이 있는데 IOS, AOS 개발자다. 아이폰과 안드로이드폰에 대응하기 위해서 어쩔수 없이 개발자가 기기종류별로 둘이 최소인원이 되었는데 각자의 퍼포먼스가 다르다. 예를들면, 아이폰 개발자가 일주일에 개발이 가능하다면 안드로이드는 2주일이 걸린다. 아이폰개발과 안드로이드개발의 난이도 차이인지 환경의 차이인지 개발자의 역량의 차이인지는 정확하게 모르지만 리액트 네이티브라는 크로스플랫폼을 지원하는 솔루션으로 개발을 한다면 이런 차이를 줄일 수 있다고 생각한다.
여기에서 허들이 발생하는데, 이런 크로스플랫폼으로 개발하는 것을 아이폰이나 안드로이드 개발자가 좋아하지 않는다는 것이다. 개인적인 성향으로는 납득이 잘 안가지만 그럴 수도 있다고는 생각한다. 네이티브의 장점도 많으니 무조건 리액트 네이티브로 해야한다고 말할 순 없다. 그렇지만 회사에서 게임이나 아주 많이 인터렉티브한 앱을 만들지 않는 이상, 리액트 네이티브와 같은 크로스 플랫폼은 무조건 써야 한다고 생각한다.
그냥 스팩만 보고 판단하기로는 플러터쪽은 해 볼 생각이 들지도 않는다. 먼저 리액트 네이티브를 써보고 좋은면 플러터는 안써보는 것으로 해야겠다.
환경구성
공식 홈페이지로 가보자. <리액트 네이티브 환경 설정 링크> 환경구성을 위해서 두가지 방법이 있는데, Expo라는 것을 이용하는 것과 그냥 리액트 네이티브 클라이언트를 이용하는 방법이 있다. ![[Pasted image 20231004130609.png]] 초보자는 Expo Go Quickstart 를 보고 좀 아는 사람은 React Native CLI Quickstart 를 보고 따라하라고 하는데 나는 그래도 좀 아는 편이지 않을까? 그리고 좀 더 있어보이는걸로 하자라는 생각으로 React Native CLI Quickstart 를 선택해서 진행해보려고 하는데 Development OS 는 그냥 내가 사용하는 macOS를 선택하면 되는데, 그 아래 Target OS 라는 것이 뭐지? 라고 생각이 들게 했다. 왜냐하면, 내가 생각하는 리액트 네이티브는 하나의 소스로 안드로이드, 아이폰용 앱이 뚝딱 나오는 것으로 생각을 했는데 둘중하나를 선택하라는게 나왔으니 순간 멈칫했다. 뭐 소스는 하나로 가능하겠지 생각하고 Target OS는 안드로이드, 아이폰 둘다 할 생각하고 두개다 따라가면서 환경 설정을 하자. 하지만! 일단 난 아이폰은 개발자 구매를 안한 상태라서(연 10만원정도 듬) 안드로이드로 우선 진행해보겠다. 안드로이드 개발자는 구매를 했었다.(오래전에 3만원정도에 구매, 평생 사용가능) ![[Pasted image 20231004131931.png]]
노드 설치
> brew install node
왓치맨 설치
> brew install watchman
자바 개발자 도구 설치
> brew tap homebrew/cask-versions
Running `brew update --auto-update`...
==> Auto-updated Homebrew!
Updated 2 taps (homebrew/core and homebrew/cask).
==> New Formulae
bandicoot build2 ggshield ldeep llvm@16 orogene python-tk@3.12 scoutsuite squiid
blake3 caracal helidon libimobiledevice-glue numbat pter python@3.12 smlfmt tailwindcss
bozohttpd dezoomify-rs iocextract libmapper onionprobe python-gdbm@3.12 qalculate-qt sqlsmith trafilatura
==> New Casks
ava clinq dropshelf expo-orbit hp-easy-admin paulxstretch routine space-capsule telegram-a twelite-stage
batteryboi dropbox-dash ecodms-client finbar muyu reqable sf spundle to-audio-converter
You have 39 outdated formulae installed.
==> Tapping homebrew/cask-versions
Cloning into '/opt/homebrew/Library/Taps/homebrew/homebrew-cask-versions'...
remote: Enumerating objects: 264899, done.
remote: Counting objects: 100% (2228/2228), done.
remote: Compressing objects: 100% (236/236), done.
remote: Total 264899 (delta 2094), reused 2084 (delta 1992), pack-reused 262671
Receiving objects: 100% (264899/264899), 66.47 MiB | 19.81 MiB/s, done.
Resolving deltas: 100% (184024/184024), done.
Tapped 243 casks (276 files, 73.9MB).
> brew install --cask zulu11
안드로이드 스튜디오 설치
본인 맥에 맞는 버전을 내려받아서 설치한다. <안드로이드 스튜디오 링크>
Android 13.0 을 체크하고 Apply 버튼 클릭.
환경 변수 설정
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools
위 코드를 .zprofile 에 추가.
새로운 어플리케이션 생성
> npx react-native@latest init AwesomeProject
...
###### ######
### #### #### ###
## ### ### ##
## #### ##
## #### ##
## ## ## ##
## ### ### ##
## ######################## ##
###### ### ### ######
### ## ## ## ## ###
### ## ### #### ### ## ###
## #### ######## #### ##
## ### ########## ### ##
## #### ######## #### ##
### ## ### #### ### ## ###
### ## ## ## ## ###
###### ### ### ######
## ######################## ##
## ### ### ##
## ## ## ##
## #### ##
## #### ##
## ### ### ##
### #### #### ###
###### ######
Welcome to React Native!
Learn once, write anywhere
...
error
✖ Installing CocoaPods
error An error occured while trying to install CocoaPods, which is required by this template.
Please try again manually: sudo gem install cocoapods.
CocoaPods documentation: https://cocoapods.org/.
info Run CLI with --verbose flag for more details.
마지막에 에러가 떴다. cocoapods를 설치하라는 내용인 것 같다. 저기 나온 그대로 실행
> sudo gem install cocoapods
ERROR: Error installing cocoapods:
The last version of activesupport (>= 5.0, < 8) to support your Ruby & RubyGems was 6.1.7.6. Try installing it with `gem install activesupport -v 6.1.7.6` and then running the current command again
activesupport requires Ruby version >= 2.7.0. The current ruby version is 2.6.10.210.
또... 에러. 루비 버전이 낮은 것 같다. 루비 버전을 업그레이드 해보자
> brew install rbenv
...
> rbenv install -l
...
> rbenv install 3.2.2
To follow progress, use 'tail -f /var/folders/t7/b17b7p0s69s2n9zhn1nnmn0c0000gp/T/ruby-build.20231004135639.71560.log' or pass --verbose
Downloading openssl-3.1.2.tar.gz...
-> https://dqw8nmjcqpjn7.cloudfront.net/a0ce69b8b97ea6a35b96875235aa453b966ba3cba8af2de23657d8b6767d6539
Installing openssl-3.1.2...
Installed openssl-3.1.2 to /Users/andew/.rbenv/versions/3.2.2
Downloading ruby-3.2.2.tar.gz...
-> https://cache.ruby-lang.org/pub/ruby/3.2/ruby-3.2.2.tar.gz
Installing ruby-3.2.2...
ruby-build: using readline from homebrew
ruby-build: using libyaml from homebrew
ruby-build: using gmp from homebrew
Installed ruby-3.2.2 to /Users/andew/.rbenv/versions/3.2.2
NOTE: to activate this Ruby version as the new default, run: rbenv global 3.2.2
최신버전으로 설치한다.
rbenv global 3.2.2
다시 cocoapods 설치
sudo gem install cocoapods
설치가 잘된다.
기존에 설치되어있던건 언인스톨한다.
npm uninstall -g react-native-cli @react-native-community/cli
새로 설치를 시도한다.
> npx react-native@latest init AwesomeProject
또 에러 발생...
configure: WARNING: 'missing' script is too old or missing
configure: error: in `/Users/andew/Library/Caches/CocoaPods/Pods/External/glog/2263bd123499e5b93b5efe24871be317-04b94':
configure: error: C compiler cannot create executables
See `config.log' for more details
✖ Installing CocoaPods dependencies (this may take a few minutes)
error Looks like your iOS environment is not properly set. Please go to https://reactnative.dev/docs/environment-setup?os=macos&platform=android and follow the React Native CLI QuickStart guide for macOS and iOS.
info Run CLI with --verbose flag for more details.
다시 AwesomeProject 폴더를 삭제한후, xcode가 설치되어있는지 확인하고 설치되어있지 않다면 설치한다. 설치한 후에 다시
> npx react-native@latest init AwesomeProject
...
Run instructions for Android:
• Have an Android emulator running (quickest way to get started), or a device connected.
• cd "/Users/andew/Projects/reactnative/AwesomeProject" && npx react-native run-android
Run instructions for iOS:
• cd "/Users/andew/Projects/reactnative/AwesomeProject" && npx react-native run-ios
- or -
• Open AwesomeProject/ios/AwesomeProject.xcworkspace in Xcode or run "xed -b ios"
• Hit the Run button
Run instructions for macOS:
• See https://aka.ms/ReactNativeGuideMacOS for the latest up-to-date instructions.
하면 에러없이 어플리케이션이 생성된다.
시뮬레이터 실행
안드로이드로 시작을 할 것이기 때문에 위에 가이드 해준 코드를 그대로 사용해서 실행한다.
cd "/Users/andew/Projects/reactnative/AwesomeProject" && npx react-native run-android
시뮬레이터가 자동으로 실행되면서 아래와 같은 화면이 뜬다.
완료!!!!
다음에는 코드를 보면서 간단한 프로그램을 만들어본다.