react native webview 로컬 개발환경 구성(Expo)

소개

하이브리드 앱을 제작 중 mac 이 없는 사람들의 경우에는 xCode를 사용할 수 없어 Expo를 사용할것이다.
그 과정에서 휴대폰을 활용해 web의 localhost를 webview에 띄워 개발하고 싶은 사람들이 있을것이다.
오늘은 그 과정을 소개하고자 한다.

---

react (web) 쪽 환경 구성

react 다운로드

npm install -g create-react-app

react 기반 프로젝트 생성

create-react-app my-app

내 프로젝트로 이동

cd my-app

아래 코드들은 잘 되는지 확인을 위한 코드입니다 ㅎ

App.js 다 지우고 해당 코드로 수정

import './App.css';

function App() {
  return (
    <div className="App">
      성공이요~
      이얏호우!
      
    </div>
  );
}

export default App;

App.css 다 지우고 해당 코드로 수정

.App {
  text-align: center;
  justify-content: center;
  align-items: center;
  display :flex;
  height: 90vh;
  font-size : 10vw;
  background-color: yellow;
}

프로젝트 시작

npm start

아래와 같이 나오면 성공

---

react-native (native) 쪽 환경 구성

expo-cli 다운로드

npm install --global expo-cli

expo 기반 프로젝트 생성

expo init my-project

내 프로젝트로 이동

cd my-project

react-native-webview 다운로드

expo install react-native-webview

App.js 다 지우고 해당 코드로 수정

여기서 구글 화면이 제대로 나오면 성공입니다.
이제 localhost로 작업을 하기위한 환경 설정을 위해 핸드폰의 와이파이와 노트북의 와이파이를 일치시킵니다. 그리고 react에서 npm start를 했을때 적혀있는 On Your Network 코드를 WebView의 uri에 입력합니다.

expo 시작

expo start

qr 코드 인식

1. App store의 Expo go를 다운로드 받습니다.
   
2. react-native-expo(native) 프로젝트에서 c를 눌러줍니다
   
3. 나온 qr 코드를 기본 카메라를 이용해 인식해줍니다.
   
4. 화면이 제대로 나오면 성공!
   

내가 겪은 오류

Domain: NSURLErrorDomain 
Error Code: -1001
Description: The request timed out.

와이파이를 일치시켰지만 휴대폰에서는 프로젝트가 실행되지가 않고 아래 사진만 나왔다
구글링도 해봤지만 어떠한것을 적용해도 해결되지 않았다. 그러다 문득 든 생각
“이게 같은 와이파이라면 react 프로젝트 ip 를 핸드폰 주소창에 넣어도 나오지 않을까??”
하지만 나오지 않았고 아이피의 문제라는것을 알았다. 같은 와이파이라도 다르게 적용이 될 수 있구나!
바로 cmd 창을 켜 ipconfig를 해본 결과

1. react 프로젝트에서 알려준 ip는 이더넷의 ip주소고
   
2. 핸드폰은 무선 LAN ip 주소를 가지고 있기때문에 안되고 있었다.
   

무선 LAN 주소를 webview의 uri에 입력했더니 잘 나왔다!

마치며

맥북이 있었다면 Xcode로 이렇게 힘들지 않았을텐데…