[React-Native] Mac에서 React Native CLI환경 구축부터 실행하는 방법

react-native를 쉽게 개발하고 싶은 마음에 expo로 설치했다가 realm에 연결이 안 되가지고 결국 React Native CLI로 설치하기도 했습니다.

(물론 realm연결말고도 폰트설정도 안되고 Navigation설정 시에도 좀 이상하고...ㅠ)

 

homebrew 설치

일단 Mac 사용자이시면 homebrew를 필수적으로 세팅해주세요.

아래 참고 블로그도 다 homebrew로 설치했기 때문에 필수입니다.

https://whalec.io/mac/homebrew-%EC%84%A4%EC%B9%98-%EB%B0%8F-%EC%82%AC%EC%9A%A9-%EB%B0%A9%EB%B2%95/

Homebrew 설치 및 사용 방법 - 꿈꾸는 하늘고래

(이미 설치를 했어서요. 가장 최신 블로그를 올려보았습니다.)

 

Mac에서 React Native CLI 환경 구축부터 실행까지

https://myung-ho.tistory.com/116

[React Native] Mac에서 React Native CLI 환경 구축부터 실행까지

저는 이 블로그를 참고하면서 CLI 환경 구축을 했습니다. (제가 찾아봤던 것 중에서 가장 최신 블로그 같습니다.)

하지만 이 블로그에서 xcode와 안드로이드 스튜디오 설치방법에 대해 잘 안 알려주더라고요ㅠㅠ

그래서 따로 검색해서 추가적으로 설치했습니다.

 

xcode는 언제 설치했는지;;; 설치가 되어 있더라고요.

담에 또 설치할 일생기면 그때 추가적으로 올리겠습니다.

 

Mac에서 안드로이드 스튜디오 설치하는 방법

https://startree.tistory.com/2

앱 개발 시작 - Mac에 안드로이드 스튜디오 설치하기 및 초기설정

 

vim 간단 사용방법

그리고 vim을 사용하던데 vim을 사용하면서 다양한 게 썼던 것을 추려서 써보자면

vim ~/.bash_profile

쉘 설정 파일 .bash_profile 열어줌

 

Swap file "~/.bash_profile.swp" already exists! [O]pen Read-Only, (E)dit anyway, (R)ecover, (D)elete it, (Q)uit, (A)bort:

• [O]pen Read-Only (읽기 전용으로 열기): 스왑 파일을 읽기 전용으로 열 수 있습니다. 이 옵션을 선택하면 파일을 변경할 수 없습니다.
• (E)dit anyway (그래도 편집): 스왑 파일을 편집 모드로 열 수 있습니다. 그러나 다른 Vim 인스턴스가 이미 이 파일을 열었을 수 있으므로 주의해야 합니다.
• (R)ecover (복구): 스왑 파일을 사용하여 변경 내용을 복구합니다.
• (D)elete it (삭제): 스왑 파일을 삭제합니다.
• (Q)uit (종료): Vim을 종료합니다.
• (A)bort (중단): 어떤 작업도 수행하지 않고 Vim을 종료합니다.

여기서 E를 택하시면 됩니다.

 

Vim에서 텍스트를 지우는 방법

1. 현재 커서 위치의 문자 지우기:
   • x: 현재 커서 위치의 문자를 지웁니다.
2. 현재 커서 위치부터 단어의 끝까지 지우기:
   • dw: 현재 커서 위치부터 단어의 끝까지의 텍스트를 지웁니다.
3. 현재 줄의 전체 텍스트 지우기:
   • dd: 현재 커서 위치의 전체 줄을 지웁니다.
4. 현재 커서 위치부터 줄의 끝까지 지우기:
   • d$ 또는 D: 현재 커서 위치부터 줄의 끝까지의 텍스트를 지웁니다.
5. 선택 영역 지우기:
   • Visual 모드에서 텍스트를 선택한 후 d를 누르면 선택한 영역이 지워집니다.

 

줄 바꿈

•  o를 누르면 현재 커서 위치 다음에 새로운 줄을 추가하고 입력 모드로 전환됩니다. 이후 텍스트를 입력할 수 있습니다.
• O를 누르면 현재 커서 위치 이전에 새로운 줄을 추가하고 입력 모드로 전환됩니다.

 

파일 저장 및 적용

1. : 을 입력하여 명령 모드로 전환합니다.
2. wq를 입력하여 파일을 저장하고 Vim을 종료합니다.
3. Enter 키를 눌러 명령을 실행합니다.

입력이 안되면 esc를 클릭한뒤 하시면 잘 작동됩니다.

 

에러 해결

원래 둘 다 에러였는데 이상하게 프로젝트를 다시 설치하고 실행하니 ios는 되더라고요.

그래서 android 실행 시 에러 해결에 대해서만 다루겠습니다.

 

정확한 이유를 모르겠지만 안드로이드를 실행하면 계속 에러가 났는데

npm run android

 

android폴더안에 local.properties에 sdk의 위치를 넣어주세요.

에러 중 하나가 adk경로를 못찾아서 따로 설정해주셔야 됩니다.

// local.preperties
sdk.dir = /Users/[사용자이름]/Library/Android/sdk

 

경로를 알 수 있는 방법

android studio > More Actions > SDK Manager > Android SDK Location

 

react-native는 최신버전만 가능하 다해서 jdk 17 다운로드 및 설치하고

https://www.oracle.com/java/technologies/downloads/#jdk17-mac

Download the Latest Java LTS Free

 

그래도 계속 에러가 발생했습니다.

에러 내용을 보니 abd오류가 계속 떠서 아래코드를 터미널에 입력했더니 해결되었습니다.

brew install --cask android-platform-tools

https://stackoverflow.com/questions/77285788/react-native-error-error-failed-to-start-the-app-error-spawnsync-adb-enoent

React Native Error : error Failed to start the app. Error: spawnSync adb ENOENT

그리고 무조건 android는 시뮬레이터를 킨 상태에서 실행해야 됩니다!

 

드디어 둘 다 성공!!!