[Redux] 배포 후 모바일 브라우저에서 흰 화면만 뜨는 문제 (feat. Redux Dev Tools)

* 2020.11.26 저녁부터 2020.11.27 오전까지 씨름했던 문제. 트러블 슈팅 경험을 여기다 기록하고자 한다.

 

EC2에 React 프로젝트를 배포한 뒤, 데스크탑 브라우저에서 정상적으로 접속이 되는 것을 확인하고 안심한 찰나, 모바일 브라우저에서는 접속만 되고 아무것도 뜨지 않는(흰 화면만 뜨는) 문제가 발견되었다. 몇 시간 동안 그 원인을 찾기 힘들었는데, 그것은 바로 모바일 브라우저에는 데스크탑 브라우저에서와 달리 개발자 도구가 없었기 때문이다.

 

그러다가 우연히 모바일 브라우저도 개발자 도구를 사용하는 법을 알게 되었는데, 안드로이드 폰 기준으로 핸드폰과 데스크탑을 USB로 연결한 뒤 개발자 옵션을 켜고 USB 디버깅까지 켜면 되는 것이었다. 이후 모바일에서 특정 웹 페이지를 방문하면 해당 페이지에 대한 inspect 기능을 연결된 데스크탑의 크롬 브라우저에서 지원을 해주었다. 이 덕분에 하얀 화면만 뜨는 것이 로드된 JavaScript 파일에서 에러가 발생했기 때문이라는 것을 알게 되었다. JavaScript 단에서 에러가 발생하면 화면이 렌더링 되지 않기 때문이다.

 

▶ 콘솔 에러 메시지 : "redux.js:600 uncaught typeerror: cannot read property 'apply' of undefined"

 

일단 redux.js 파일은 내가 작성한 파일이 아니다 보니 바로 구글에 검색을 때렸다. 그랬더니 createStore() 함수를 호출하는 부분에서 인자로 compose() 함수의 반환 값을 넘겨줄 거면 compose() 함수에 반드시 함수 타입의 인자를 넘겨야 한다는 말을 보게 되었다. 당연한 거 아닌가 싶어서 내 코드를 보았는데, 아니나 다를까 문제를 바로 발견하였다. JavaScript에서 TypeScript로 마이그레이션함과 동시에 Redux Dev Tools에 해당하는 스토어 인핸서 작성 부분이 바뀌었던 것이다. 에러가 발생한 부분은 다음과 같았다.

(window as any).__REDUX_DEVTOOLS_EXTENSION__
    && (window as any).__REDUX_DEVTOOLS_EXTENSION__()

 

모바일 크롬 브라우저에는 Redux Dev Tools가 깔려있지 않았기 때문에, 조건문이 만족되지 않아 위 표현식은 false를 반환한 것이다. false는 함수 타입이 아니기 때문에, 이것이 compose() 함수에 인자로 전달되면서 에러가 발생한 것이다. 그래서 TypeScript로 바꾸기 전의 모습대로 다시 돌려놓았다. 다음과 같이 말이다.

(window as any).__REDUX_DEVTOOLS_EXTENSION__
    ? (window as any).__REDUX_DEVTOOLS_EXTENSION__()
    : (storeCreator: any) => storeCreator

 

이제 이를 원격 저장소에 새로 Push 하고 EC2에서 Pull 받아온 다음 번들링을 다시 수행했다. 이렇게 문제는 해결되었다.