리액트 네이티브 앱을 만들어보자

Expo 혹은 React Native CLI

진행할 방법 : 먼저 Expo를 이용해서 개발 후
프로젝트에서는 React Native CLI를 이용해서 개발한다.

Node.js 설치, 코드에디터(VS code)

1. expo를 이용한 리액트 네이티브 앱 생성
   npx create-expo-app AwesomeProject

2. npm start로 앱 실행 npm start

만약 오류 메시지가

'expo'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다.

라고 나온다면? -> 참고 : https://www.inflearn.com/questions/236890/x27-expo-x27-%EA%B0%80-%EB%82%B4%EB%B6%80-%EC%99%B8%EB%B6%80-%EB%AA%85%EB%A0%B9-%EC%8B%A4%ED%96%89-%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%A8-%EB%98%90%EB%8A%94-%EB%B0%B0%EC%B9%98-%ED%8C%8C%EC%9D%BC%EC%9D%B4-%EC%95%84%EB%8B%88%EB%9D%BC%EB%84%A4%EC%9A%94 참고

npm i -g expo-cli npm install

그 후 npx export start로 실행

image

이 화면이 나오면 된다.

3. 핸드폰 > App store에서 Expo go 앱을 설치한다.

1. 안드로이드의 경우 > 구글에 android studio 검색 > 안드로이드 스튜디오 설치

image

2. 설치 후 More Actions > Virtual Device Manager > Create Device

image image

image

image

여기서 중요! 저 재생버튼을 눌러준다.. 그 후, vscode로 돌아와서 a버튼을 눌러준다.

image 만약 위 같은 오류가 난다면, 터미널을 하나 더 띄운 후에 adb kill-server adb start-server 하거나 아니면 에뮬레이터에서 재생 버튼 눌러서 실행하고 a 누르기 .

잘 실행된다면 이런게 나온다.

오류상황 : Error: adb.exe: device offline 'adb'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다.

image

이런 경우, 아래에 해결 링크를 참고한다.

https://designerkhs.tistory.com/48

익스텐션 설치
image