react-native Webview 개발 HMR 적용

빠른 개발 + 웹과 앱에서 모두 사용할 수 있는 어플을 개발을 위해

나름대로 판단 내린 React-Native(RN) + Webview 기술 스택

하나 ios 나 android 기기를 연결해 웹뷰 형태로 개발 시
로컬의 변경사항이 바로 반영되지 않아서 불편함을 겪었다..

webview uri에 localhost:3000 번을 넣어 봤지만 당연히 되지 않는다..

해결방법은 간단하다.

webview의 uri 속성에 IPv4 주소를 넣어주면 된다.
노트북과 핸드폰이 같은 와이파이를 사용하고 있다는 가정하에 사용하고 있는 컴퓨터의 ip주소를 가져오면 되었다~

 

 

핸드폰과 노트북이 같은 와이파이를 사용하고 있어야 하는 이유

 

같은 Wi-Fi 네트워크에 연결된 기기들은 로컬 네트워크 상에서 서로 통신할 수 있습니다. 이러한 로컬 네트워크에서는 IP 주소가 할당되어 있으며, 이를 이용하여 기기들이 서로를 식별하고 통신할 수 있습니다.

 

따라서, 핸드폰과 컴퓨터가 같은 Wi-Fi 네트워크에 연결되어 있지 않으면 서로 통신할 수 없습니다. 예를 들어, 핸드폰이 LTE 인터넷에 연결되어 있거나, 다른 Wi-Fi 네트워크에 연결되어 있으면, 해당 핸드폰에서 컴퓨터의 IP 주소로 접속할 수 없습니다.

 

 

 

현재 ip 주소를 알아내는 방법

1. terminer을 켠다

2. ifconfig 입력

3. inet 이라는 키워드로 검색 -> 192.168.0.16

아래는 간단한 예시

export default function WebViewComponent() {

    return (
        <>
            <WebView
                style={styles.container}
                originWhitelist={['*']}
                source={{ uri: `http://192.168.0.16:3000` }}
            />
        </>
    );
}

 

이제 webview에 HMR이 정상적으로 동작한다면 코드가 바뀔 때마다 화면에 바로바로 반영되는

좋은 개발경험을 얻게 되셨을 겁니다..!

 

 

여기에 고정 주소를 사용하다 보면 ip가 변경될 일이 있기 때문에 아래의 라이브러리 등을

이용해 ip 주소를 가져온다면 더 알차게 쓸 수 있을 듯 합니다~

 

아래처럼 모듈 함수로 가져다 쓰면 유동적으로도 사용이 가능합니다~!

import Constants from "expo-constants";

export function getMetroServerUrl() {
  // Metro 서버의 주소를 가져오기 위해 "manifest" 객체를 먼저 가져옵니다.
  const manifest = Constants.manifest;

  const originalDebuggerHost = manifest?.debuggerHost;

  const webviewDebuggerUri = originalDebuggerHost
    ? "http://" + originalDebuggerHost?.replace(/:\d+$/, ":3000")
    : "http://192.168.0.101:3000";

  return webviewDebuggerUri;
}