[RN] React Native 실행하기(Expo)

 

1. React Native 시작하기

앱을 실제 기기에서 실행해보고 싶다면 앱스토어나 구글플레이에서 Expo Go를 설치하면 된다.

설치했으면 로컬에서 구축한 Expo앱을 기기에서 확인할 수 있는데 먼저 터미널에 npm start를 입력한다.

그렇게 하면 QR코드가 보이는데 Expo앱 또는 아이폰에 경우 카메라를 켜서 QR코드를 스캔하면 된다.

 

 

제대로 실행되고 있는지 확인하기 위해 App.js에 있는 Text를 바꾼 후 저장하면 폰에서도 문구가 바뀌는 걸 확인할 수 있다.

 

 

2. 로컬 개발 환경 설정하기

그렇다면 아이폰 사용자가 안드로이드로, 안드로이드 사용자가 아이폰으로 화면을 볼 수 없을까?

안드로이드는 Android Studio(https://developer.android.com/studio?hl=ko)를 설치하면

로컬에서 안드로이드를 실행할 수 있고,

iOS의 경우 앱스토어를 열어서 Xcode를 설치하면 되는데 아쉽게도 Mac에서만 가능하기 때문에 윈도우 사용자는 확인할 수 없다,,!

 

1. Android Studio

안드로이드 스튜디오 설치가 다 끝났다면 화면에서 More Actions을 클릭 시 Virtual Device Manage가 나오는 걸 클릭하기

이걸 통해 에뮬레이터를 구축할 수 있다.

 

기본적으로 Pixel_3a가 구축되어있고 Create Device 버튼 클릭해서 새로운 에뮬레이터를 구축할 수 있다.

 

새로운 에뮬레이터를 구축할 땐 원하는 프리셋을 선택 후(프리셋을 선택할 땐 PlayStore 아이콘이 있는 걸 선택해야 오류가 나지 않는다.) Next 버튼을 누르고 안드로이드 버전을 선택 후 Next 버튼 누르고 기본값으로 설정 후 Finish를 클릭한다.

그리고 Actions에 있는 재생 버튼을 누르면 에뮬레이터를 실행시킬 수 있다.

 

2. Xcode

이번엔 Xcode에서 settings를 클릭하고 Locations탭으로 들어간다.

그리고 Command Line Tools에 버전이 선택하기 (선택되어있더라도 한번 더 탭해서 선택하야함!!!)

 

 

이제 프로젝트를 생성한 Expo앱으로 돌아가서 npm start로 실행을 시키면 아래와 같이 터미널에서 여러가지 명령어들을 알려주는데

 

a를 누르면 안드로이드, i를 누르면 iOS 에뮬레이터를 자동을 실행시켜준다.

그렇다면 안드로이드 에뮬레이터가 실행중인 상태에서 터미널에 a를 누르면 Expo가 자동으로 해당 에뮬레이터를 찾고 Expo Go앱을 설치한 후 아래처럼 앱을 열어준다!

 

 

 

이번엔 Xcode로 iOS를 보려면 상단 Xcode에서

Open Developer Tool에 있는 Simulator를 클릭하면 잘 나오는 걸 확인할 수 있다.

 

이제 Expo 앱으로 가서 터미널에 i만 눌러주면 Android와 iOS를 동시에 볼 수 있다.