웹 -> 웹앱으로

 

 

 

리액트 프로젝트 새로생성

웹뷰라이브러리 설치. 

 

 

**호스팅안된 개발중인 웹일 경우, 웹주소가 필요하다.

 

-> 해결

 

-> ngrok

 

-> ngrok 회원가입 후 아래문서로 이동. 토큰이 자동생성 되기때문에 문서를 반드시 봐야 함. 

 

https://dashboard.ngrok.com/get-started/setup/macos

 

 

brew install ngrok

 

ngrok config add-authtoken ~~~~

 

ngrok http 로컬서버주소

 

-> 실행로그에 forwarding 쪽 보면 주소 할당된거 보임.

 

 

 

 

 

***앱과 웹의 통신

 

-앱소스 수정(App.tsx)  :

 

<WebView source = {{ uri: 위에서 공개된 주소 넣으면 됨. }} />

 

 

 

----> 좀 더 나아가 웹과 앱의 소틍할려면

 

-웹소스 수정 : 웹인지 앱인지 구분 -> window.ReactNativeWebView 활용

 

-앱소스 수정(App.tsx)  :

 

아래 객체 활용해서 web에서 보내는 메시지 받아서 처리

event.nativeEvent.data