리액트 네이티브 개발환경 셋팅 / 안드로이드 연결 / 애뮬레이터 실행

리액트 네이티브 

 

https://expo.io/snacks

여기서 tenacious chips (다운로드 가능) 

 

React Native 개발환경?

• Expo CLI와 React Native CLI 두가지가 있음. => React Native CLI를 사용할 것!

• Expo CLI가 가장 쉽게 시작할 수 있는 방법으로 React Native 기반으로 구축된 도구 모음을 많이 포함하고 있지만 필요없는 기능까지 설치되기 때문에 무거움

• Expo CLI는 Node.js만 있으면 사용할 수 있지만 React Native CLI는 Xcode 또는 Android Studio가 필요함

 

출처: https://jy-tblog.tistory.com/13

https://velog.io/@kyo3553/React-Native-00-%EA%B0%9C%EB%B0%9C%ED%99%98%EA%B2%BD-%EA%B5%AC%EC%B6%95%ED%95%98%EA%B8%B0

cmd에서 명령어 작성

https://yoursyun.tistory.com/entry/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%84%A4%EC%9D%B4%ED%8B%B0%EB%B8%8C-%EC%9C%88%EB%8F%84%EC%9A%B0%EC%97%90%EC%84%9C-%EA%B0%9C%EB%B0%9C%ED%99%98%EA%B2%BD-%EC%85%8B%ED%8C%85%ED%95%98%EA%B8%B0

 

새 프로젝트

react-native init 프로젝트명

이건 cmd에서.

 

vscode에서는 npx react-native init MyTestApp 

이렇게..? (해보진 않음)

만든 파일 열었는데 

const App: () => React$Node = () => {

여기 계속 빨간줄 생겨서 찾아보니 설정을 고쳐줘야 했다

 

VS Code >> File >> Preferences >> Settings >>로 이동하여 javascript (또는 javascript를 검색하고 아래로 스크롤)> validate> enable / disable >> disable or uncheck

 

-

안드로이드 연결

sdk 주소

C:\Users\w\AppData\Local\Android\Sdk

 

안드로이드 스튜디오에서 헬프 - find action - avd manager

nexus 5x api 26 만들어서 

 

https://velog.io/@kyo3553/React-Native-00-%EA%B0%9C%EB%B0%9C%ED%99%98%EA%B2%BD-%EA%B5%AC%EC%B6%95%ED%95%98%EA%B8%B0

 

근데 이렇게 했더니 nodejs 가 start 되었다 

 

https://blog.misoseop.com/30

결국 visual studio emulator for android를 깔았다. 

 

근데 계속 에뮬레이터가 안되고…

VT-x is disabled in BIOS 라고 뜬다 

https://ehdtjq0411.tistory.com/4

lg그램: 부팅 하면서 "F2" 나 "F11" 키를 연타로 눌러 주어야 한다. 참고로 그램이 부팅이 빨라서 전원키를 누르자 마자 부터 열심히 F2키를 눌러야 한다.

 

근데 여기로 들어가도 bios intel virtual technology enbled 였다…. 

근데 또 다시 눌러보니 가상폰 된다!

 

https://yuddomack.tistory.com/entry/1React-Native-%EC%84%A4%EC%B9%98%EC%99%80-%EC%8B%A4%ED%96%89hello-world

 

엄청 오래 기달렸더니 노드도 나오고 안드로이드도 나왔다. 

build gradle 파일에 있는 targetSdkVersion 버전이랑

에뮬레이터 API 맞추는 것도 중요했던 듯.. 

 

이제 이상태로 vscode에서 수정하면 화면에 리프레시 되면서 나온다