Expo 앱이 Metro 포트로 API를 호출하던 문제

Expo 개발 중에는 Metro 서버와 Next.js 서버가 동시에 떠 있다. 문제는 둘 다 localhost 계열 주소를 쓰기 때문에, 실수로 Expo 포트를 API 서버처럼 넣어도 처음에는 눈치채기 어렵다는 점이다.

이 경우 앱 화면은 열리지만 업로드, 분석, 큐브 지갑 같은 서버 API가 계속 실패한다. 서버가 죽은 것이 아니라 애초에 다른 서버를 부르고 있었던 것이다.

모바일 lib/server에서는 SERVER_BASE_URL과 UPLOAD_API_URL을 계산한다. 명시적으로 서버 주소가 있으면 그 값을 쓰고, 업로드 API 주소만 있으면 그 origin을 기준으로 서버 base를 유추한다.

이렇게 하니 upload와 일반 API가 서로 다른 host를 바라보는 상황도 개발 중에 경고로 확인할 수 있었다.

Expo/Metro는 보통 8081, 8082, 8083 같은 포트를 쓴다. Tangly API는 Next 서버 쪽이어야 하므로, 개발 모드에서 이 포트가 들어오면 경고를 띄우도록 했다.

이 경고 하나가 시간을 꽤 아껴준다. 네트워크, CORS, Supabase를 의심하기 전에 먼저 앱이 어느 서버를 부르고 있는지 확인할 수 있기 때문이다.

모바일 앱이 웹 API를 함께 쓰는 구조에서는 환경변수 검증이 기능의 일부다. 값이 비어 있는지만 볼 게 아니라, 그 값이 정말 올바른 종류의 서버인지도 봐야 한다.