expo와 구름IDE로 모바일 어플 만들기

2년 전부터 만들고 싶은 어플을 다시 용기내어 만들어보기로 했다. 

아무것도 모르는데 그냥 일단 해보기로 ... 

사람 일은 모르는 거니까 일단 안드로이드와 iOS 모두 한 번에 만들 수 있는 React Native를 이용해서 만들기로 했다.

그냥 쉽게 쉽게 웹앱을 만들까 생각해봤는데 내가 만들고 싶은 건 굳이 웹페이지가 있을 필요가 없어서 그냥..한번 할 때 제대로 하자...는 생각으로 ..

근데 죄다 웹앱 만드는 글만 있고 그냥 앱 만드는 글이 많이 없어서 문제 해결에 애를 먹었다. 

 

 

nomadcoders.co/react-native-fundamentals

React Native로 날씨앱 만들기 - 노마드 코더 Nomad Coders

일단 이 강의로 기초 공부를 하려고 했는데 #0에서부터 난관에 부딪혔다.... 

난 아무리 expo start를 해도 QR코드는 뜨는데 스캔해도 Something went wrong이라는 파란 화면만 뜨고.. 개발자 화면도 안 떴다 

너무 짜증나 

 

해결할 때 참고한 것은 hub.goorm.io/topic/8537/goorm-ide%EC%97%90%EC%84%9C-%EB%A1%9C%EC%BB%AC%ED%98%B8%EC%8A%A4%ED%8A%B8-%EC%A0%91%EA%B7%BC-%EB%B6%88%EA%B0%80%EB%A1%9C-expo-dev-tool%EC%9D%84-%EC%97%B4-%EC%88%98-%EC%97%86%EC%8A%B5%EB%8B%88%EB%8B%A4/2

goorm ide에서 로컬호스트 접근 불가로 expo dev tool을 열 수 없습니다.

이 글과 그 외 수많은 stackoverflow들 .... 

 

설레면서 위의 글 가이드를 따라 했는데 검은 화면만 떠서 너무 절망적이었다. 나의 해결 방법은!

 

1. expo start 가 아니라 expo start --lan 

2. 위의 글대로 이것저것 환경 바꾸고 내가 정한 url 들어가서 https를 http로 바꾸기 

3. 여기까지하면 개발자 화면은 떴는데 QR코드는 여전히 작동하지 않았다. 그래서 왼쪽 중간 부분의 Connection을 Lan, Local이 아니라 Tunnel로 바꿔준다 (한참 걸린다..뭘 또 다운 받는대)

4. Tunnel 연결이 되었다는 말이 뜨면 QR 코드를 스캔한다

 

이렇게 하면 QR도 제대로 작동하고 드디어 나도 개발자 화면을 볼 수 있다!!

 

터미널

개발자 화면