도입
하이브리드 앱을 제작 중 mac 이 없는 사람들의 경우에는 xCode를 사용할 수 없어 Expo를 사용할것이다.
그 과정에서 휴대폰을 활용해 web의 localhost를 webview에 띄워 개발하고 싶은 사람들이 있을것이다.
오늘은 그 과정을 소개하고자 한다.
내 개발 환경
- typescript
- next.js
- react-native
- yarn
Web 환경 구성
next.js 프로젝트 생성
yarn create next-app [프로젝트 명]
프로젝트 디렉토리 이동
cd [프로젝트 명]
개발 서버 시작
yarn run dev
native 환경 구성
expo-cli 다운로드
yarn add -g expo-cli
expo 프로젝트 생성
expo init [프로젝트 명]
프로젝트 디렉토리 이동
cd [프로젝트 명]
react-native-webivew 다운로드
yarn add react-native-webview
App.tsx에 웹뷰 추가
<WebView
originWhitelist={["*"]}
source={{ uri: "https://google.com" }}
/>qr 코드 인식
- 스토어의
Expo go를 다운로드 받는다. - react-native-expo 프로젝트에서 c를 눌러준다.
- 나온 qr 코드를 기본 카메라를 이용해 인식한다.
- 구글 화면이 제대로 나오면 성공!
예상치 못한 변수 발생
구글도 잘 나왔겠다. 이제 개발 화면 확인을 위해 http://localhost:3000를 uri에 넣은 순간 아래와 같은 에러가 났다. 구글링을 해보았지만 제대로된 결과를 받을 수 없었다. 그렇게 이틀을 헤매다 문득 생각 하나가 떠올랐다.
같은 와이파이라면 같은 ip 주소에서는 웹과 휴대폰이 같은 화면이 나와야하지 않을까?
그렇게 휴대폰 와이파이 설정을 확인했고 현재 로컬 이더넷 주소와 휴대폰 ip 주소가 다른걸 확인했다.
그럼 어떻게 일치 시키지?
cmd에 ipconfig 명령어를 입력해보니 ip 주소가 많이 나왔다. 그 중 눈에 띄는 ip 하나가 있었는데 바로 무선 Lan 어댑터 Wi-Fi 였다. 해당 ip의 IpV4 주소를 uri에 넣어보았더니 웹 화면이 나왔다!!!
native 기능이 필요하지 않은 경우
cross-origin 체크나 모바일 반응형 화면만을 위한 컴포넌트 개발 단계에서는 그냥 무선 Lan 어댑터 Wi-Fi의 주소를 휴대폰 주소창에 넣으면 바로 접속이 가능하다. expo나 서버를 띄우지 않고도 모바일로 작업 가능하다!
정리
하이브리드 앱 세팅이 끝났다. 레퍼런스가 없어 정말 고된 작업이었다.. 나와 같은 상황인 사람은 바로 해결을 하길 바란다. 또한 해당 ip는 카카오 소셜 로그인에서도 중요한 역할을 하니 잘 기억해두길 바란다. (외우고 있으란게 아니다)
