로딩 상태가 화면에 늦게 나타날 때

사용자가 버튼을 클릭했을 때 로딩 스피너가 늦게 보이거나 즉시 사라지는 경험을 많이 했다. 특히 로컬 개발 환경에서는 빠르지만 실제 배포 환경에서 문제가 생기는 경우가 대부분이다.

혼자 개발할 때는 확인한 값과 수정한 값을 따로 기록하는 습관이 중요하다. 그렇지 않으면 무엇이 효과가 있었는지 알 수 없다.

이벤트 흐름 따라가기

UI의 로딩 상태가 제때 업데이트되려면 이벤트 흐름을 정확히 이해해야 한다. 단순히 state를 설정하는 것만으로는 부족하다.

• 사용자 이벤트 흐름
• 정상일 때의 동작과 비교
• 기록: 수정한 코드, 테스트 결과

모바일 환경에서 다시 테스트하기

로컬의 고속 네트워크와 실제 모바일 환경의 네트워크는 천지차이다. 개발자 도구에서 네트워크 속도를 제한해서 테스트하면 실제 문제를 찾을 수 있다.

npm run build
# 브라우저에서 모바일 해상도와 네트워크 지연을 시뮬레이션하기

확인과 기록

1. 같은 조건에서 문제 재현
2. 로그와 응답에서 변화 정리
3. 실제 배포 환경에서 최종 테스트

로그와 응답으로 결과 변화를 설명할 수 있으면 문제 해결이 제대로 정리된 것이다.