[react-native] 개발 환경 설정(React Native CLI , mac , android)

맥사용 기준 으로 작성 했습니다~

https://reactnative.dev/docs/environment-setup

Setting up the development environment · React Native

bToC 아이디어에서 이제 앱개발은 빼놓을수 없는 요소인거 같다. 간만에 공부 하고 싶다는 생각이 들어서 react-native 공부해봐야지 

일단 

npx react-native init myProjectFolderName --template react-native-template-typescript

설치 해주고 vscode 로 열어보자 (cd myprojectName > code .)

 

폴더 구조는 가장 밖에 App.tsx 있고 폴더로 android 랑 ios 가 각자 있다. package.json 보면 ios 랑 android 각각 실행 시킬수 있으니까 npm install 하고 npm run android 해보자 그럼 터미널이 하나 더 열리면서 

warn No apps connected. Sending "reload" to all React Native apps failed. Make sure your app is running in the simulator or on a phone connected via USB.

이런 문구가 뜬다 앱이 돌아갈수 있는 환경을 확인해라 뭐 그런 뜻인거 같다.

 

다시 react-native 사이트로 들어가서 순서대로 해보자

brew install node ( javascript 런타임 설치 )

brew install watchman (  특정 폭더나 파일을 감시하다가 변화가 생기면, 특정 동작으로 실행하도록 설정하는 역할 )

brew install --cask adoptopenjdk/openjdk/adoptopenjdk11 (Java Development Kit 설치)

https://developer.android.com/studio 안드로이드 스튜디오 다운( 에뮬레이터 제공)

 

안드로이드 스튜디오 설치시 체크항목들이 있는데 그거 확인하면서 다운해줘야함(native 홈페이지 참고)

다운된이후에 안드로이드 스튜디오 설정탭에서 다시 확인 및 설치가능

안드로이드 스튜디오 안에서 프로젝트 열수 있는데 이때 폴더를 전체폴더가 아니라 그중에서 안드로이드 폴더를 지정해줘야한다.

우측상단 open > 해당폴더 > android 선택                        ///                          좌측탭 customize > all setting > sdk > platforms, tool 부분 설치항목 확인

 

아이콘 > create device > 가상기기 지정

 

 

환경변수 지정

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools

export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools

 

npm run android

npm run ios 는 다음글에 ...