울면서 끝마친 멋진 리액트 네이티브 개발환경 셋팅~!
설치할 때에도 왜 설치하는지 코드를 좀 보고 설명도 좀 봐가면서 할 필요가 있다.
나는 그냥 무작정 사이트를 들어가서 냅다 깔아버리고, 안되면 다른사이트 가서 또 그냥 따라하고 하다보니 내용이 서로 충돌하고, 다른 오류가 발생하고 난리부르스를 떨다가 겨우 성공했다^^
설치해야 하는 것들
home brew
터미널에서 프로그램을 설치할 수 있도록 도와준다.
여기에 들어가서 코드를 복사해서 붙여넣으면 설치가 된다.
brew --version
버전을 확인하여 잘 설치되었는지 확인해야 한다.
node.js
자바스크립트로 구성된 리액트 네이티브를 보조해줄 수 있는 프로그램이다.
brew install node
node -–version
npm --version
watchman
특정 파일의 변화를 감지해준다.
brew install watchman
watchman –version
cocoapods
ios앱을 개발할 때 필요한 프로그램이다.
sudo gem install cocoapods
pod --version
React Native CLI
리액트 네이티브! 개발에 당연히 필요하다..!
npm install -g react-native-cli
npx react-native --version
JDK
안드로이드 앱을 개발할 때 필요한 프로그램이다.
brew tap AdoptOpenJDK/openjdk
brew cask install adoptopenjdk8
java -version
android studio
안드로이드로 시뮬레이션을 돌릴 때 사용하는 프로그램.
안드로이드 스튜디오 공식 사이트에서 주는 메뉴얼대로 설치해준다.
이후에 프로그램에서 따로 시뮬레이션을 다운받고 설정을 변경하는 과정을 거치는데, 복잡하기도 하고 나는 안드로이드로 구동할 생각이 없기 때문에 스킵했다!
xcode
ios로 시뮬레이션을 돌릴 때 사용하는 프로그램.
이것도 설정에서 조금 변경해야 하는 부분이 있다.
visual studio code
코드를 작성할 때 사용할 예정이다. 이미 깔려있어서 따로 설정하고 설치하는 과정은 없었다.
에러,문제 몇개
설치하고 환경변수를 설정하는 과정에서 문제가 생길 수 있다.
나같은 경우에는 실수로 한번 환경변수를 싹다 지워버려서 처음부터 다시 환경변수를 설정하느라 애를 먹었다.
특히, ls, vi같은 기본명령어가 안될 때에는 할 수 있는게 무엇이 있냐면
- 죽는 방법을 생각해본다.
- 나를 마구 질책한다.
- 울면서 해결책을 찾는다.
이정도가 있다.
절대 환경변수를 함부로 하지 않는 것이 좋다.
ls, vi 같은 기본명령어의 부재
export PATH=%PATH:/bin:/usr/local/bin:/usr/bin
명령어를 입력해서 임시로 명령어를 사용할 수 있게 만든다.
그 다음,
vim ~/.zshrc
명령어로 zshrc파일에 들어간다.
export PATH=%PATH:/bin:/usr/local/bin:/usr/bin
이 명령어를 똑같이 붙여넣어준다.
그럼 터미널을 껐다켜도 계속해서 기본 명령어들을 쓸 수 있다!
node 설치 시 오류
Error: The
brew linkstep did not complete successfully
노드를 설치할 때 이렇게 오류가 나면 설치가 제대로 안된 것이라고 할 수 있었다.
이 링크 오류, 찢어버리고 싶었다.
brew link node
brew link --overwrite node
순서대로 입력해주고 다시
brew link node
명령어를 입력하면 이미 link가 존재한다는 문구가 뜬다.
그 때,
brew reinstall node
명령어로 node를 재설치해준다. 그럼 깔끔하게 해결!!
이 외에도 문제들이 꽤나 많았던 걸로 알고 있지만, 기억나는 것만 적어보았다.
expo(선택)
expo는 리액트네이티브를 조금 더 쉽게 만들어주고, 구동할 수 있게 만들어주는 보조시스템이다. expo를 쓰지 않고 다른 방법으로 리액트 네이티브를 사용할 수도 있지만, 내가 그걸 하려가다 며칠을 고생하고 죽을 뻔했다. 때문에 그건 다음으로 미루고 이걸로 쓸 예정이다.
npm install --global expo-cli
설치한다.
설치할 때, 나는 오류가 또 났었어서 애를 좀 먹었는데, 아래 블로그 참고해서 해결했다.
https://nanyoungkim.tistory.com/40
프로젝트 생성 및 실행해보기
expo init projectname
프로젝트를 생성해준다.
그럼 터미널에 사용하고 싶은 프로젝트 템플릿을 선택하도록 한다.
아직 별도로 필요한 특정 템플릿이 없을 때에는
blank
를 입력해서 생성해주면 된다.
생성이 완료되면 실행을 해보자
npm start
명령어를 입력하면 터미널에 주소가 하나 보이는데, 그 주소를 들어가면 웹으로 만들어진 expo개발자 도구를 볼 수 있다.
이후에 프로젝트를 시뮬레이션으로 실행해보고 싶다면
터미널에 다시 돌아가서
ios는 i를
android는 a를 입력하면 알아서 실행이 된다!
실행된 화면!!^^ hello world를 띄워보았다.
(내용 수정은 App.js에서 진행했다.)
조금 더 자세히 쓰고 싶은 마음은 굴뚝같지..않다. 조금 귀찮은 감이 없지 않아 있기 때문이다. 여기서 쓴 것보다 오류가 한 3~4배는 났고, 그래서 정말 셋팅하고 헬로월드 하나 띄우기까지 며칠이 걸렸다.
콱!! 갖다가 포기하고 싶었지만~ 성공해서 너무 기쁘다..
앞으로 열심히 공부해야겠다.
오늘의 tmi: 메이플 브금 공부할 때 들으면 참 좋다. 한 고1 때부터 지금까지 공부하면서 자주 듣는데, 질리지가 않는다. 다들 -메-노래 들으쎼요!^^ 헤헤
