React Native 개발 시 Expo 네트워크 연결 문제 해결하기

React Native와 Expo로 개발하다 보면 종종 모바일 기기와 개발 서버 간의 연결 문제가 발생할 수 있습니다. 특히 npx expo start 명령어로 서버를 시작한 후 Expo Go 앱으로 연결이 되지 않는 상황은 많은 개발자들이 경험하는 문제입니다. 이번 글에서는 이러한 네트워크 연결 문제의 원인과 해결 방법에 대해 알아보겠습니다.

연결 문제 발생 상황

일반적으로 Expo 개발 서버를 시작하고 QR 코드를 스캔하면 Expo Go 앱으로 쉽게 접속이 가능합니다. 하지만 다음과 같은 상황에서는 연결이 실패할 수 있습니다:

"Unable to connect to development server"
"Network response timed out"
QR 코드를 스캔했지만 앱이 로딩되지 않음
Metro 서버에 연결할 수 없다는 오류 메시지

원인 분석

이러한 연결 문제가 발생하는 주요 원인은 다음과 같습니다:

네트워크 환경의 차이: 개발 PC와 모바일 기기가 다른 네트워크에 연결된 경우
방화벽 또는 네트워크 설정: 포트가 차단되어 있거나 네트워크 설정이 제한적인 경우
라우터 설정: NAT 설정, 포트 포워딩 등의 문제
VPN 사용: VPN이 연결을 방해할 수 있음
IP 주소 접근성: 개발 서버의 IP가 모바일 기기에서 접근 불가능한 경우

해결 방법: --tunnel 옵션 사용하기

가장 간단하고 효과적인 해결 방법은 --tunnel 옵션을 사용하는 것입니다:

npx expo start --tunnel

이 명령어는 개발 서버와 Expo 클라이언트 사이에 터널(ngrok 기반)을 생성하여, 다른 네트워크에서도 접속할 수 있게 해줍니다.

작동 원리

--tunnel 옵션은 다음과 같은 방식으로 작동합니다:

ngrok 또는 유사한 서비스를 통해 터널을 생성
로컬 개발 서버에 공개 URL을 할당
이 공개 URL을 통해 Expo Go 앱이 개발 서버에 연결

장점

개발 PC와 모바일 기기가 다른 네트워크에 있어도 연결 가능
공용 Wi-Fi, 모바일 데이터 등 다양한 네트워크 환경에서도 작동
방화벽이나 네트워크 설정 문제를 우회할 수 있음
별도의 네트워크 구성 없이 빠르게 테스트 가능

단점

터널 서비스를 통하기 때문에 약간의 지연이 발생할 수 있음
연결이 불안정할 수 있음
터널 서비스의 사용량 제한이 있을 수 있음

기타 연결 옵션

Expo는 --tunnel 외에도 다음과 같은 연결 옵션을 제공합니다:

1. LAN 연결 (기본값)

npx expo start
# 또는
npx expo start --lan

개발 PC와 모바일 기기가 같은 네트워크에 있을 때 사용합니다. 가장 빠른 속도를 제공하지만, 다른 네트워크에서는 접속할 수 없습니다.

2. 로컬 연결

npx expo start --localhost

에뮬레이터나 시뮬레이터를 사용할 때 적합합니다. 실제 기기에서는 사용할 수 없습니다.

네트워크 연결 문제 해결을 위한 추가 팁

1. 방화벽 설정 확인

개발 서버의 포트(기본 19000)가 방화벽에서 차단되지 않았는지 확인합니다.

2. 안티바이러스 일시 중지

일부 안티바이러스 프로그램이 Expo 서버 연결을 차단할 수 있습니다.

3. IP 주소 직접 입력

Expo Go 앱에서 QR 코드 스캔 대신 개발 서버의 IP 주소와 포트를 직접 입력해볼 수 있습니다.

4. Expo 재설치

Expo CLI와 Expo Go 앱을 재설치하는 것도 도움이 될 수 있습니다.

5. 다른 Wi-Fi 네트워크 시도

가능하다면 다른 Wi-Fi 네트워크에 연결해보세요.

실제 경험 사례

최근 React Native 프로젝트에서 npx expo start로 개발 서버를 실행했지만, Expo Go 앱에서 연결이 되지 않는 문제가 발생했습니다. 여러 시도 끝에 npx expo start --tunnel 명령어를 사용했더니 문제가 해결되었습니다.

원인을 분석해보니 데스크톱과 모바일 기기가 같은 Wi-Fi에 연결되어 있었지만, 라우터 설정 때문에 내부 네트워크에서 제대로 통신이 되지 않았던 것으로 파악되었습니다. 터널 옵션을 사용함으로써 이러한 네트워크 제한을 우회할 수 있었습니다.

결론

Expo로 React Native 개발을 할 때 네트워크 연결 문제는 흔히 발생할 수 있지만, --tunnel 옵션을 사용하면 대부분의 문제를 쉽게 해결할 수 있습니다. 특히 다른 네트워크 환경에서 테스트해야 하는 경우나 네트워크 설정이 복잡한 환경에서 개발할 때 매우 유용합니다.

다만, 터널 옵션은 약간의 지연이 발생할 수 있으므로, 가능하다면 동일한 네트워크 환경에서 기본 LAN 연결 방식을 사용하는 것이 성능 면에서 더 좋을 수 있습니다. 프로젝트의 상황과 개발 환경에 맞게 적절한 연결 방식을 선택하면 됩니다.