Hotwire Native를 사용하여 로컬 앱에 연결하기

핵심 요약

1 Hotwire Native 앱을 안드로이드 에뮬레이터에서 로컬 웹 앱(Rails 앱)에 연결하는 방법을 설명합니다.

2 안드로이드 에뮬레이터는 호스트 컴퓨터를 10.0.2.2 주소로 노출하여 로컬 앱에 접근 가능하게 합니다.

3 비보안(Cleartext) 연결을 위해 AndroidManifest.xml에 android:usesCleartextTraffic="true" 설정을 추가해야 합니다.

도입

Hotwire Native 애플리케이션 개발 초기 단계에서 안드로이드 에뮬레이터가 로컬에서 실행 중인 웹 앱에 연결하는 데 겪었던 어려움과 그 배경을 설명합니다. 공식 문서가 배포된 도메인 기반의 연결 방식을 제시하여 로컬 개발 환경 설정에 혼란이 있었으며, 이는 Rails 앱뿐만 아니라 다른 웹 프레임워크에서도 발생할 수 있는 일반적인 문제임을 언급합니다.

로컬 웹 애플리케이션에 Hotwire Native를 연결하기 위한 두 가지 핵심 해결책을 제시합니다.

1. 안드로이드 에뮬레이터에서 호스트 컴퓨터 접근

안드로이드 에뮬레이터는 호스트 컴퓨터를 10.0.2.2 주소로 노출합니다. 따라서 로컬 웹 앱이 포트 3000에서 실행 중인 경우, 에뮬레이터 내의 브라우저나 Hotwire Native 앱에서 http://10.0.2.2:3000을 통해 연결할 수 있습니다. 이는 로컬 개발 환경에서 매우 유용한 기능입니다.

2. 비보안(Cleartext) 트래픽 허용 설정

로컬 환경에서 HTTPS를 설정하지 않은 비보안(insecure) 오리진에 연결하려면 안드로이드 애플리케이션 매니페스트 파일(AndroidManifest.xml)에 특정 플래그를 추가해야 합니다. <application> 태그 내에 android:usesCleartextTraffic="true" 속성을 추가함으로써, 앱이 HTTP와 같은 암호화되지 않은 트래픽을 사용할 수 있도록 허용합니다. 이 설정은 디버그 빌드 환경에서 로컬 개발을 용이하게 합니다.

결론

위 두 가지 설정을 적용함으로써 Hotwire Native 디버그 빌드가 로컬에서 실행 중인 웹 애플리케이션에 성공적으로 연결될 수 있었음을 요약합니다. 이로써 Hotwire Native를 활용한 로컬 개발 및 테스트 환경을 효율적으로 구축할 수 있게 되었으며, 개발 생산성 향상에 기여했음을 강조합니다.

Hotwire Native를 사용하여 로컬 앱에 연결하기

Connecting to a locally Running app with hotwire native

핵심 요약

도입

1. 안드로이드 에뮬레이터에서 호스트 컴퓨터 접근

2. 비보안(Cleartext) 트래픽 허용 설정

결론

관련 글들

Hotwire Native WebView 디버깅 가이드

디버깅 Hotwire Native 파트 1: Hotwire Native 작동 방식 이해

Hotwire Native 디버깅: 명확한 질문부터 시작하기

Hotwire Native 디버깅: 브레이크포인트 활용 가이드

댓글 0

로그인이 필요합니다

아직 댓글이 없습니다