모바일에서만 로딩이 멈출 때 원인 좁히기

데스크톱에서는 잘 되는데 모바일에서만 화면이 로딩에 멈춰 있다는 제보를 받았다. 이런 류는 감으로 코드를 고치기 시작하면 끝이 없다. 나는 먼저 재현 조건을 고정한다.

모바일 환경을 똑같이 만든다

개발자 도구의 디바이스 모드로 모바일 폭과 느린 네트워크(Slow 3G)를 켜고, 같은 동작을 반복한다. 폭만 줄이는 게 아니라 네트워크까지 느리게 해야 타이밍 문제가 드러난다.

npm run build
# 빌드된 결과를 디바이스 모드 + Slow 3G에서 확인한다

Network 탭에서 멈춘 요청을 찾는다

로딩이 안 끝난다는 건 보통 응답을 기다리는 요청이 있다는 뜻이다. Network 탭에서 pending으로 멈춘 요청이 있는지, 아니면 요청 자체가 아예 안 나갔는지를 본다. 이 둘은 원인이 완전히 다르다.

• 요청이 멈춰 있다: 서버 응답 지연이거나 타임아웃 미설정
• 요청이 안 나갔다: 조건문에서 모바일일 때만 분기를 안 탔을 가능성

경쟁 조건을 의심한다

모바일에서만 난다면 느린 네트워크에서 드러나는 경쟁 조건일 때가 많다. 빠른 응답을 전제로 짠 코드가, 응답이 늦게 오면서 로딩 플래그를 영영 못 끄는 식이다. 응답 순서가 뒤바뀌어도 상태가 일관되는지 확인하면, 데스크톱에서는 안 보이던 구멍이 드러난다.