백엔드 개발자지만 얼결에 앱까지 개발 하게 된 쪼랩 앱개발자의 기록이니
부족한게 있다면 도움 부탁드리고, 저랑 비슷한 처지라면 참고하세요.
목차
1. brew 설치
2. nvm 설치 및 node 설치
3. watchman 설치
4. jdk 설치
5. amulator 설치(with android studio)
6. react app 실행
brew 가 없다면 설치
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"nvm 설치 및 node 설치
brew install nvm
# .nvm 폴더생성
mkdir ~/.nvm
# 환경변수 설정
# bash 일 경우 ~/.bash_profile 혹은 ~/.bashrc 에 아래 내용 추가
# zsh 일 경우 ~/.zshrc 에 아래 내용 추가
export NVM_DIR="$HOME/.nvm"
[ -s "$(brew --prefix)/opt/nvm/nvm.sh" ] && \. "$(brew --prefix)/opt/nvm/nvm.sh" # This loads nvm
[ -s "$(brew --prefix)/opt/nvm/etc/bash_completion.d/nvm" ] && \. "$(brew --prefix)/opt/nvm/etc/bash_completion.d/nvm" # This loads nvm bash_completionconfig 파일 수정후에는 꼭 저장해줄 것.
source ~/.zshrc
이제 nvm 으로 노드 설치 및 버전을 관리할 수 있다.
nvm 사용법은 아래를 참고할 것 !!
nvm install 8.0.0 Install a specific version number
nvm use 8.0 Use the latest available 8.0.x release
nvm run 6.10.3 app.js Run app.js using node 6.10.3
nvm exec 4.8.3 node app.js Run `node app.js` with the PATH pointing to node 4.8.3
nvm alias default 8.1.0 Set default node version on a shell
nvm alias default node Always default to the latest available node version on a shell
nvm install node Install the latest available version
nvm use node Use the latest version
nvm install --lts Install the latest LTS version
nvm use --lts Use the latest LTS version
나는 nvm insall node 로 19버전을 일단 설치했다.
근데 우리 앱은 14버전을 사용하기 때문에 14를 다운받아서 기본 버전으로 설정해 주었다.
nvm install 14
nvm alias default 14
watchman 설치
brew install watchman
JDK 설치 및 환경변수 설정
android 빌드를 하기 위해선 자바도 필요하다.
java 설치는 이미 작성한 글이 있으니 여기를 참조 혹은 아래 zulu 설치
[Backend/Java] - Mac Java 설치 및 버전 여러개 관리 deprecated adoptopenjdk
나는 원래 자바 스프링 개발자이므로
위에 첨부한 내용처럼 설정했지만, 실제로 react naitve 홈페이지에서는 자바설치를 아래처럼 사용해도 된다고 한다!
https://reactnative.dev/docs/environment-setup
brew tap homebrew/cask-versions
brew install --cask zulu11
amulator 설치
앱을 돌리려면 에뮬레이터가 필요하다.
나는 가장 보편화 된 안드로이드 스튜디오를 설치하고, 거기서 device를 만들었다.
설치가 완료되면 환경변수를 먼저 설정한다.
기본적으로 아래 경로에 설치되지만, 상황에 따라 알맞게 환경변수를 적용해준다.
# ~/.zshrc 수정
vi ~/.zshrc
# 아래 내용 추가
# android
export ANDROID_HOME="$HOME/Library/Android/sdk"
export PATH="$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/tools/bin:$ANDROID_HOME/platform-tools"
# ~/.zshrc 적용
source ~/.zshrc참고, source ~/.zshrc 오류날 경우 위에서 적용한 java jenv 환경설정 위에 적용하도록 하자.
위의 설정을 완료 한 후에 기본 프로젝트를 하나 생성하고 들어가면 왼쪽에 device manager가 있다.
거기서 create device를 만들어서 대략 device를 만들어보자.
에뮬레이터 규격을 어떻게 해야될지 몰라서 임의로 지정했다.
저번에 그냥 기본으로 만들었더니 앱이 안돌아가고 죽는 현상이 발생해서 아주 삽질했었던 슬픈 기억이.. :(
요렇게 생겨난다!
react app 실행
그리고 앱 프로젝트 경로로 돌아가서 npm install 로 필요한 패키지를 받는다.
오류 발생시 node_modules 폴더를 지우고 다시 npm install
필요 패키지들이 받아지면 아래 명령어로 android를 실행한다.
npx react-native run-android그럼 자동으로 메트로가 실행되면서 아까 만든 에뮬레이터에 내 프로젝트가 적용된다!!!!
혹시나 메트로가 자동 실행되지 않는다면, command 창을 하나 더 띄워서 아래 명령어로 먼저 띄운 후에
위의 명령어를 재 실행하자.
npx react-native start
매끄럽게 넘어가면 좋겠지만 나는 java 버전 및 node 버전 충돌로 인해
node 버전, java 버전을 프로젝트 버전과 동일하게 맞추는 작업을 추가로 했다.
추후 또 같은 삽질을 하지 않기 위해 시간내서 기록하기 끝!!
행복한 하루되세요ㅎㅎㅎㅎ
참고
https://reactnative.dev/docs/environment-setup
https://docs.brew.sh/Installation
https://formulae.brew.sh/formula/nvm
https://formulae.brew.sh/formula/watchman