[Expo] 'The request timed out' Error 해결 방법 (WSL 환경)

문제의 시작

처음으로 React Native에 도전하며 진입장벽을 낮추기 위해 Expo를 사용하게 되었다.
현재 작업 환경으로 윈도우 + WSL을 사용하고 있기에 맥(Xcode)이 없어도 Expo Go를 이용하여 아이폰에서 실시간으로 나의 결과물을 확인할 수 있다는 것이 엄청난 장점이라고 느꼈다.

공식 문서의 가이드를 따라 필요한 모든 설치를 마치고 Expo Go에서 프로젝트를 실행시켰는데 끝나지 않는 로딩과 함께 너무 오래 걸리고 있다는 안내를 받았다.

"This is taking much longer than it should. You might want to check your internet connectivity"

There was a problem loading the requested app.

앱을 로딩하는데 문제있다는 문구와 함께 계속되는 Try again..
아직 WSL을 사용한지 얼마 안되어서 이 문제일거라고는 생각 못하고 윈도우 네트워크 환경만 이것저것 뒤적거렸다.

위 영어 문구를 그대로 구글링해서 찾아보려고 해도 해결되지 않아서 답답했는데, 같은 문제를 겪는 사람이 있다면 저 문구로 검색해서 부디 이 글을 발견하길 바라며 소제목으로 적었다..😄

WSL은 가상머신이다.

내가 코드를 돌리는 WSL은 가상머신(Virtual Machine)이라는 것을 갑자기 깨달았다.
나는 윈도우에서 네트워크 환경을 보면서 "같은 네트워크를 쓰는데 왜 접속이 안되지?"라는 생각을 하고있었다!🙁 (가상머신은 말그대로 '가상'머신이기 때문에 윈도우와 별도로 생각해야 하며 다른 IP를 가리키고 있다.)

CONNECTION 모드를 Tunnel로 바꾸면 가장 쉬운 해결책이겠지만 LAN보다 더 느린 환경이기도 하고, 문제를 해결하는 대신 덮어놓고 지나가는 기분이 들어서 LAN 모드를 사용할 수 있게 해결하였다.

해결 방법

WSL에서 expo start로 열린 포트를 모바일(Expo Go)에서 접속할 수 있게 IP Address 설정을 변경해주어야 한다.

나처럼 리눅스가 낯설어도 따라할 수 있게 순서대로 자세히 적어보았다.

WSLHostPatcher.exe 설치

1. WSL 터미널을 열고 cd 명령어로 홈 디렉토리로 이동한다.
2. mkdir wsl WSL에 wsl 폴더를 만들고, cd wsl 로 만든 폴더로 이동한다.
3. ~/wsl 폴더 안에 WSLHostPatcher를 설치한다. (4번 참고)
4. wget https://github.com/CzBiX/WSLHostPatcher/releases/download/v0.1.0/release.zip
   (wget 명령어는 인터넷에서 파일을 받아서 현재 디렉토리에 저장해준다.)
5. unzip release.zip 4번에서 받은 파일의 압축을 해제해준다.
6. chmod 755 WSLHostPatcher.exe
   파일의 소유자만 읽기쓰기실행이 가능하고 나머지는 읽기실행만 가능한 권한을 준다. (실행 권한이 없으면 파일 실행시 거부 당한다.)

WSL 실행할 때 마다 WSLHostPatcher.exe도 자동 실행

7. vi ~/.bashrc1번에서 언급한 홈 디렉토리의 ~/.bashrc 파일을 열고 E를 눌러 Edit 모드로 들어간다.
8. ~/wsl/WSLHostPatcher.exe > /dev/null를 .bashrc 파일 하단에 추가해서 WSL을 실행할 때 마다 자동으로 WSLHostPatcher.exe 프로그램이 실행되도록 설정해준다.
   파일에서 A를 눌러 insert 모드로 변경해야 라인 추가가 가능하다.

Expo가 참조하는 IP 주소 설정

9. export REACT_NATIVE_PACKAGER_HOSTNAME=$(netsh.exe interface ip show address "Wi-Fi" | grep 'IP Address' | sed -r 's/^.*IP Address:\W*//')
   Expo가 참조하는 환경 변수에 올바른 네트워크 주소를 설정해주는 과정이다. 노트북을 사용한다면 집이 아닌 카페나 다른 곳으로 이동하더라도 Wi-Fi 주소를 알아서 가져와서 Expo가 참조하게 해준다.
   주로 한 곳에서만 작업하고 Wi-Fi가 아닌 이더넷(유선)을 사용한다면 "Wi-Fi"자리에 "이더넷"을 넣는다.
   Windows PowerShell(리눅스 터미널 아님)에서 netsh.exe interface ip show address를 입력하면 사용하고 있는 네트워크의 이름과 주소가 나오는데 정확한 이름을 참조할 수 있다.

10. .bashrc 파일에 8번과 9번 추가가 끝나면 esc를 눌러 빠져나온 후 :wq + enter로 파일 수정을 마친다.

11. 아래 이미지를 참고하여 WSL을 재부팅하면 끝!
    

느낀점

비전공자로 개발을 공부하며 접하지 못했던 네트워크 지식에 대해서 돌아보는 계기가 되었다.
리눅스 환경이나 네트워크, 기타 작은 사항들이 아직은 낯설지만 쉬운 길을 선택하거나 포기하는 대신 부딪히며 공부하다보면 점점 더 성장할 수 있다고 생각한다. 작은 문제지만 결국 해결했음에 감사하다 :)
(문제를 해결하는데 큰 도움을 주신 Anteater님 감사합니다👍)

참고문서

• 자잘한 도움말 #2 WSL 환경에 Expo 설정 중 일어나는 문제
• Running Expo in Windows Subsystem for Linux (WSL2)
• 리액트 네이티브 윈도우 네트워크 설정 (react-native)