[React Native] expo로 모바일 실행 오류 차선책

expo란 "React Native를 기반으로 하는 모바일 애플리케이션 개발을 간편하게 만들어주는 도구와 서비스를 제공하는 플랫폼이다"

리액트 네이티브는 페이스북이 개발한 오픈 소스 모바일 애플리케이션 프레임워크이다. 

 

 

 

오류 발생

- React Navtive를 쉬운 개발 환경 expo를 통해 테스트 해볼라고 하는데 오류가 발생하였다.

npx expo start

 

 

- 문제점: 휴대폰으로 QR 코드 찍고 들어가보면 로딩 창이 뜬 후

밑에와 같은 오류가 뜬다.

 

 

- 방법을 찾으려고 구글링 해본 결과 많은 사람들이 이와 같은 오류를 겪고 있었다.

블로그, 유튜브를 보고 똑같이 해봐도 해결이 되지 않았다.

 

 

 

 

차선책

방법1 ) 

- 이와같이 웹으로 실행하는 방법이다.

npx expo start 후 메뉴 화면에사 'w'키를 누르거나 localhost: [포트번호] 입력 후 웹에서 테스트 화면을 쓸 수가 있다.

 

단점:

웹도 좋지만, RN은 앱 환경을 기반으로 고안한거라 웹에서 하기엔 제한이 있는 기능들이 굉장히 많다.

예를들면, <ScrollView>로 페이지 넘기는 건 웹에서 작동 안되고, vibration 기능도 당연히 웹에서 제한된다.

 

방법2 ) 

https://snack.expo.dev/

- expo snack을 사용하면 웹에서 코드를 작성하고 가상 에뮬레이터로 앱 구동을 같이 해볼 수 있어서 편하다.

 

 

 단점:

1. 하지만, VS code에서 작성하던거랑 코드가 많이 다르다. 예를들어, 컨테이너 역할을 하는 

<View> 가 아닌 <SafeAreaView> 를 사용한다.

2. 코드 추론 기능은 되지만, 태그 닫는 꺽쇠 기능이 작동이 되지 않는다.

 

 장점:

1. 편리하다.

2. QR 코드로 휴대폰에서도 정상 작동하며 실행된다.

 

 

 

방법3)

안드로이드 스튜디오 Virtual Device를 사용한다.

결국엔 내가 채택한 방법이다.

 

 

 

 

안드로이드 스튜디오 개발환경

• 귀찮은 작업이지만, 시스템 변수 설정와 Path를 설정해줘야 한다.
  
  • Sdk 위치 확인→  

    

• Sdk 경로를 ANDROID_HOME 시스템 변수에 넣고, 

• 

 

- Path에 저 값을 넣어준다.

 

 

- 정상적으로 적용됐으면, power shell에서 "adb --version " 작성하면 버전이 나온다.

 

 

- vscode에서 프로젝트 실행하고, 안드로이드 스튜디오 에뮬레이터 실행하면 이렇게 작업할 수가 있다.

- QR코드로 expo 앱에서 실행하는 법을 알아내기 전까지는 이렇게 공부해야겠다.

vscode(코드 작성), 안드로이드 에뮬(실행)