Study the ReactNative for iOS.
ReactNative 환경 구성과 과정 중 문제해결한 부분을 Note 하였음.
그나저나 프로젝트를 Init 하고 첫 실행까지 정말 많은 스텝과 노력이 요구된다.. 너무한다..
https://academy.realm.io/kr/posts/react-native/
- React 는 페이스북이 웹 개발을 쉽게 하기 위해 만든 기술.
커스텀 컴포넌트를 만들고 쉽게 조합해서 뷰를 손쉽게 만들 수 있습니다. - Reactive 는 마이크로소프트가 창안한 개념으로 스트림과 비동기 처리등을 LINQ에 영향을 받은 방법으로 깔끔하게 처리할 있게 한 패러다임.
예를 들어 RxJava, RxAndroid, ReactiveCocoa 등등 .. - React Native 는 리액트의 접근 방법을 모바일로 확장하는 페이스북의 오픈소스 프로젝트.
ReactNative 는 iOS & Android 플랫폼 모두에서 JS 를 통해 개발되는 환경이기 때문에 Node.js 를 비롯한 귀찮은 설정 과정이 필요하다.
Let's install the watchman and flow.
brew install watchman
brew install flow
brew 를 통해 위 모듈들을 설치하며 pre-version 인 OS X 로 인해 경고가 출력되었지만, 설치에 실패하지는 않았다.
$ watchman --version
3.8.0
$ flow --version
Flow, a static type checker for JavaScript, version 0.17.0
And install Node.js with nvm.
brew install nvm
nvm 을 설치한 후 나오는 메시지를 따라해야한다.
You should create NVM's working directory if it doesn't exist:
mkdir ~/.nvm
Add the following to ~/.zshrc or your desired shell configuration file:
export NVM_DIR="$HOME/.nvm"
[ -s "/usr/local/opt/nvm/nvm.sh" ] && . "/usr/local/opt/nvm/nvm.sh" # This loads nvm
[ -s "/usr/local/opt/nvm/etc/bash_completion" ] && . "/usr/local/opt/nvm/etc/bash_completion" # This loads nvm bash_completion
nvm install node
nvm alias default node
!! Trouble Shooting during installation
nvm 을 install 시도 시 몇 가지 직접 설정해주어야 하는 작업들이 있었다.
나는 CLI 로 zshell 을 사용중이므로, ~/.zshrc (혹은 ~/.bashrc) 파일을 수정했다.
[ -s "/Users/kksd0900/.nvm/nvm.sh" ] && source "/Users/kksd0900/.nvm/nvm.sh" 을 추가했다. (경로는 각자 설정)
만약 이 source 를 추가하고도 nvm 이 실행되지 않아서, $ source $HOME/.nvm/nvm.sh 을 커맨드라인에 직접 실행하니 된다.
다른 환경에서 설치 가이드를 따라해본 결과, 위 스크립트 소스들은 다소 차이가 있으 수 있으나 대략적인 방법은 동일하다.
설치가 성공적으로 진행되었다면
$ nvm --version
0.34.0
이 출력된다.
$ node --version
v12.10.0
node 의 설치도 성공적.
프로젝트 생성 전에 npm 을 통해 RN 라이브러리를 설치한다.
npm install -g react-native-cli
패키지를 설치했다면, cli 명령어를 통해 Xcode 프로젝트를 생성한다.
react-native init ReactNative (근데 무슨 플젝 생성에 시간이 이리 오래걸리는건지;;)
Run instructions for iOS:
• cd ReactNative && react-native run-ios
- or -
• Open ReactNative/ios/ReactNative.xcworkspace in Xcode or run "xed -b ios"
• Hit the Run button
프로젝트 생성 성공! (아니, 잠깐만.. AppDelegate 가 ObjC 로 생성되는거 모야 ㅡㅡ)
프로젝트를 새로 생성하는 것이 아닌, clone 과 같이 당겨오는 경우는 react-native init PROJECT 명령어를 수행하지 않으므로, npm 설치부터 진행해주어야한다.
이를 진행하지 않고 pod install 실행 시
[!] Invalid
Podfilefile: cannot load such file -- /Users/user/Desktop/ReactNative/ReactNative/node_modules/@react-native-community/cli-platform-ios/native_modules.
메시지가 출력된다. (node_modules 폴더가 생성되지 않았으므로)
이 경우 npm install 을 실행하여 필요한 node package 들을 먼저 설치해주도록 한다. (중간에 npm audit fix 명령도 입력하래서 했다)
이 후 pod install 명령 동작도 OK. 앱의 실행도 OK.
생성된 프로젝트에서 app.js 와 index.js 파일을 실행한다.
물론 Xcode 로는 켜지지 않는다.. WebStorm 을 정말 오랜만에 켜는것 까지는 OK.. 근데 WebStorm 에서 코드 인덴트가 다 깨지는데..?
웹스톱의
Swtich language level to JSX Harmony를 실행하니 빨간 줄이 다 사라졌다.
근데 JS ECMA 6 에서 뭔가 문제가 발생하는 것 같은데.. 어쨋든 Xcode 상에서 App Run 은 문제 없이 동작한다.
다른 환경에서 시도하니, 루트 디렉토르 자체를 WebStorm 의 프로젝트로 Open 해버리니 코드가 깨지는 문제는 해결되었다.
!! Trouble Shooting with start an App
$ react-native run-ios --verbose입력 시, iPhone X simulator 를 찾을 수 없다는 Alert 가 출력된다.
Xcode 를 13.0 으로 업데이트하며 iPhone X 모델의 시뮬레이터가 설치되지 않은 것으로 보인다. 시뮬 추가 후 정상 동작한다.
- 앱을 실행 시 Node Server 에 접속이 실패했다는 경고창이 출력된다.
시뮬레이터가 node server 에 접속하지 못하는 현상으로 보인다.
$ react-native start 를 통해 node server 를 실행해주어야 한다.
하지만 error listen EADDRINUSE: address already in use :::8081. 으로 이미 node port 가 사용 중이라는 메시지가 출력된다.
그러므로 $ sudo lsof -i :8081 와 kill -9 {PID} 를 통해 node 와 RN process 를 죽인 후 $ react-native start 를 다시 실행한다.
하지만 http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false 에서 아래 에러가 출력된다.
Error: Duplicated files or mocks. Please check the console for more info
at setModule (/Users/kksd0900/Desktop/HanSJinLab/ReactNative-HanSJin/ReactNative/node_modules/jest-haste-map/build/index.js:620:17)
...