리액트 네이티브 공부를 시작해야 하는데 3일동안 환경세팅만 붙잡고 있다가 아무것도 못했다. 결국 문제가 있어 보이는 nvm, node.js, npm, cocoapod, react-native-cli 모두 삭제하고 최신 LTS버전으로 설치 후 프로젝트를 생성 및 실행해보니 된다.
모두 삭제하고 다시 설치하는 과정에서 사용했던 명령어들을 정리해보았다.
[ nvm, node, npm 삭제 ]
터미널에 아래 명령어들 입력
sudo npm uninstall npm -g
sudo rm -rf /usr/local/lib/node /usr/local/lib/node_modules /var/db/receipts/org.nodejs.*
sudo rm -rf /usr/local/include/node /Users/$USER/.npm
sudo rm /usr/local/bin/node
sudo rm /usr/local/share/man/man1/node.1
sudo rm /usr/local/lib/dtrace/node.d
brew uninstall node
.bash_profile (or .zshrc)에 추가된 환경변수 내용 삭제
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion" # This loads nvm bash_completion
nvm 사용하면서 설치했던 node 버전이 있다면 삭제
nvm uninstall --lts
nvm 삭제 명령어
rm -rf "$NVM_DIR"
해당 블로그에 있는대로 다 따라하였다.
https://devbirdfeet.tistory.com/68
Vue - (맥os) Node.js 와 NVM 삭제하기
Node.js 가 깔린 상태에서 nvm 을 설치해서 뭔가 꼬이고 말았다. 그래서 Node.js 를 삭제하고 NVM 도 삭제하려고 한다. Node.js 삭제하기 아래 명령어를 터미널에 입력한다. sudo npm uninstall npm -g sudo rm -r..
devbirdfeet.tistory.com
하지만 이대로 다 따라해서 nvm --version 시 nvm이 있는걸로 나온다.
찾아본 결과 터미널 홈 디렉토리에서 ls -al을 해보면 .nvm 파일이 있는데 이것도 삭제해주면 nvm --version을 해도 더 이상 nvm 버전이 나오지 않는다.
--version을 했을 때 버전이 나오지 않아야 비로소 제대로 삭제가 된 것 같다는 안정감이 들기 때문에 ls -al 시 .nvm 파일이 보인다면
rm -rf ~/.nvm 으로 nvm까지 완전히 제거해주자
nvm 삭제 명령어 ++
rm -rf "$NVM_DIR"
rm -rf ~/.nvm
[ cocoapod 삭제 ]
설치된 모든 코코아팟 버전 보기
sudo gem list cocoapods
코코아팟 캐시 삭제
pod cache clean --all
-> 코코아팟 삭제 명령어 실행하기 전 캐시까지 완전히 지워주고 uninstall 하였다.
코코아팟 삭제 명령어
sudo gem uninstall cocodpods
-> 코코아팟 설치 명령어에서 install -> uninstall로 바꿔주면 됨
코코아팟 삭제는 해당 블로그를 참고하였다.
https://rainpour.tistory.com/65
COCOAPODS 버전별 설치/삭제 방법
CocoaPods 을 사용하면서 공식 홈피에는 설치방법만 나와있을 뿐 삭제방법이 없어서 찾아보니 생각보다 다양한 기능이 있었다. 기본적으로 설치는 했을꺼라 믿고 스킵! - 설치된 cocoapod 버전 확인 1
rainpour.tistory.com
[ react-native-cli 삭제 ]
npm uninstall -g react-native-cli
-> reaect-native-cli 설치 명령어에서 install -> uninstall로 바꿔주면 됨
[ 다시 설치하기 ]
이렇게 모두 삭제한 뒤 홈브루를 사용해 최신 LTS 버전들로 싹 다 다시 깔아주었다.
brew -v : 홈브루 버전 확인
brew update : 홈브루 사용 전 업데이트 해주기
brew install nvm : nvm 설치 (홈브루 사용)
-> 위 명령어 입력했는데 제대로 안돼서 (nvm이 덜 지워진 것 같았다.) reinstall로 입력하라고 권해주길래
brew reinstall nvm으로 nvm 재설치
~/.bash_profile (또는 ~/.zshrc) 파일에 nvm 삭제 시 지웠던 해당 환경변수 설정을 입력해준다.
vim ~/.bash_profile
환경변수 설정한 뒤에는 꼭 source ~/.bash_profile (또는 source ~/.zshrc) 를 입력해줘서 변경 내용을 적용시켜준다.
nvm 설치 뒤에는 nvm ls-remote 로 설치 가능한 node들을 볼 수 있는데 잔뜩 나오니까 가급적이면 입력은 하지 않는 것을 추천한다.
nvm install --lts : LTS 버전의 노드 설치 (22.04.09 기준 16.14.2 버전 설치됨)
nvm ls : 설치된 노드 및 디폴트 노드 확인 가능
노드 여러 버전 설치 시 nvm use <버전> 으로 어떤 버전의 노드를 사용할지 선택할 수 있고, 기본 노드 설정은 nvm alias default <버전> 으로 디폴트 노드 버전을 설정해줄 수 있다.
brew install watchman : watchman 설치
-> 강의에서는 따로 설치하지 않았는데 파일을 감시하고 변경 시 특정 동작을 실행하도록 설정해준다고 한다. 다들 설치하길래 그냥 했다. (근데 설치해보니까 이미 깔려있던것 같다 ㅋㅋ)
얘도 재설치 -> brew reinstall watchman
node -v : 현재 사용 중인 node.js 버전 보기
watchman -v : watchman 버전 보기
npm -v : npm 버전 보기 (npm은 노드 설치 시 맞는 버전으로 자동으로 설치된다.)
sudo gem install cocoapods : cocoapod 최신 버전으로 설치
pod --version : 코코아팟 버전 보기
npm install -g react-native-cli : react-native-cli 설치 (-g : global로 설치)
raect-native --version : react-native-cli와 react-native 버전 확인 가능 (리액트 네이티브 버전은 리액트 네이티브 프로젝트 폴더로 가야 확인 가능)
-------------- 설치 과정에서 위의 명령어들 그대로 입력했음 (환경세팅 완료)
이후에 리액트 프로젝트를 생성해보았다.
강의를 들을 때는 npm start를 해준 뒤 쉘을 새로 열어서 react-native init <프로젝트명> 으로 프로젝트를 생성했는데, 최근에는 리액트 네이티브 쪽에서 기존 방법으로 할 경우 오류가 많아 npx를 사용하는 것을 권장하고 있다고 한다. 나도 저대로 했을 때 자꾸 오류가 나서 3일을 버렸다.
이번에는 npx react-native init <프로젝트명> 명령어를 사용하여 프로젝트를 생성하였다.
기존에는 프로젝트 생성 시 뭔 에러들이 잔뜩 나왔었는데 드디어 에러가 나오지 않았다!!
프로젝트 생성 뒤에는 해당 프로젝트 폴더 -> ios 폴더로 이동한 뒤, 리액트 네이티브 관련 라이브러리를 xcode 프로젝트에 추가해준다.
(podfile은 ios 폴더에 있으므로 프로젝트 폴더에서 ios폴더로 이동한다.)
cd ios
pod install
프로젝트 루트 폴더로 다시 나온 뒤 ios 시뮬레이터를 실행해주었다.
이것도 강의에서는 react-native run-ios를 입력하였는데 나는 따라하니까 안 됐었다. 이번에도 npx를 사용하여
npx react-native run-ios 명령어로 시뮬레이터를 실행해 보았는데
드디어 시뮬레이터가 잘 실행되었다 ㅎㅎ
npx?
npx가 무엇인가 찾아보니 npm을 대신해주는 새로운 패키지 관리 모듈 같은 것이 아니라, npm의 5.2.0 버전부터 새로 추가된 도구라고 한다. npm을 좀 더 편하게 사용하기 위헤서 npm에서 제공해주는 하나의 도구라고 생각하면 되겠다.
npx에 대한 자세한 내용은 해당 블로그를 참고하길 바란다.
https://webruden.tistory.com/275
npx란 무엇일까? 그리고 npm이랑 어떤 차이점이 있을까?
우리는 종종 npx 명령어를 사용해서 패키지를 설치하곤 합니다. 예를 들어 리액트 CRA를 설치할 때 npx create-react-app을 사용하고 , nuxt를 설치할 때 npx create-nuxt-app을 사용하고, 리액트 네이티브를 설
webruden.tistory.com
npm start를 따로 안하고 바로 npx react-native run-ios 명령어만 실행해도 npm start + react-native run-ios 를 하는 셈이 된다. 결론적으로 프로젝트 생성이랑 시뮬레이터 시작이 잘 안되던 것은 모두 npx를 사용하지 않고 이전 방법을 사용해서 그랬던 것 같다. 옛날 강의를 보는 사람들은 그대로 따라하지 말고 공식 문서나, 구글링 해서 최대한 최근 게시물들을 참고하는 것이 좋을 것 같다.
