React Native 앱 무한루프로 인해 CPU 사용량 100% 해결

개요

새로운 스타트업에 합류하면서 프론트 개발도 같이 하고 있는 요즘이다. React Native로 개발을 하고 있는데 사실 난 크로스 플랫폼에 대해서는 아무것도 모른다. 웹 개발도 해봤고 앱 개발도 해봤지만 크로스 플랫폼 개발은 처음이다. 그래서 모든것이 낯설지만 오히려 너무 재밌다

 

토스가 React Native에 많은 투자를 하고 있고 그외에도 여러 곳에서 앞으로의 좋은 전망을 예상하고 있는 기술이기 때문에 나중에 창업을 위해서라도 배워두면 좋겠다고 생각이 들었다. 

 

열심히 GPT와 소통하며 개발을 하고 생각보다 쉽고 생산성도 빨라서 열심히 하던 중 웹에서는 괜찮은데 iOS에서 앱이 뒤져버리는 현상이 일어났다. 멘탈 펑, 매우 간단하고 짧지만 그 경험을 한번 공유해보고자 한다.

크로스 플랫폼은 처음이라..

우리 팀원중에는 Flutter로 크로스 플랫폼 개발을 경험해 본 사람이 있다, 그래서 나는 이것저것 물어봤다. Lint는 왜 쓰는거에요? 이거 웹에서 멀쩡하다가 앱에서는 막 갑자기 뒤지고 그래요? 이거 스타일 맞추면 모든 플랫폼에서 다 동일하게 보여요? 퍼센트로 사이즈 맞춰요?

 

정말 나도 전 회사에서 iOS 개발을 2년 반 동안 해왔지만 내 코드는 진짜 못 봐줄 정도였다. 기능 구현 자체는 정말 보기 좋고 완벽하고 오류도 없었지만 UI 관련한 부분에서 고생을 많이 했다. 특히 앱은 전/후 상태 관리가 매우 중요하여 앞에서 벌어진 일들에 따라 뒤의 시나리오가 결정되는데 이 iOS놈은 NonBlocking IO에 비동기 아니겠는가. 진짜 환장하는 조합이였다. 항상 무상태와 모든 코드들이 예측 가능했던 개발을 했던 나는 무한 콜백 지옥을 만들어버렸고 UI들도 사실 겉으로는 문제가 없었지만 죄책감이 느껴지는 코드였다.

 

여하튼 여러 질문들을 했었는데 돌아오는 대답중 '네, css 잘못 작성해도 터져요' 가 있었다. 나는 설마.. 그런 사소한걸로 터지겠어? 라고 생각을 하고 룰루랄라 개발을 하기 시작했다. 프론트는 컨테이너로 감싸서 위치를 맞추고.. 어쩌구.. 내가 아는 컨테이너는 도커밖에 없는데...

 

하지만 생각보다 빠르게 적응했고 내가 예상했던 작업시간보다 빠르게 구현을 하고 웹 버전에서 테스트까지 완벽하게 맞췄다, 이제 실 기기를 연결하여 앱 버전에서 테스트를 하려고 했는데 특정 모달을 띄우는 순간 XCode 디버거에서 기기의 cpu가 100%를 찍고 멈춰버렸다

원인은 CSS

 원인부터 말하면 css에 px을 작성하지 않은것이 문제였다. 기능구현이나 state 관련된 기능 먼저 구현하고 그 뒤에 스타일 디테일을 잡는게 내 작업 방식이여서 기능구현까지 모두 끝 마치고 테스트를 했을때는 매우 멀쩡하게 작동하였다. 하지만 스타일 디테일을 잡고 나서 테스트를 하니까 특정 모달에서 XCode 로그가 무한대로 찍히고 CPU가 100%가 되는 문제가 생겼다. 

 

오히려 기능 구현을 할때 오류가 났다면 논리적으로 디버깅을 하며 찾았을텐데 스타일만 수정했는데 이런 현상이 나타났고 내가 할 수 있는건 컨트롤 제트 후 컴파일을 반복하며 어떤 부분에서 무한루프 현상이 발생하는지 찾아내는것이였다. 그러다가 어떠 한 부분에서 무한루프가 발생하는것을 알아냈고 그 줄은 단순하 넓이를 지정해주는 css였다. height : 20 이렇게 되어 있길래 혹시나 해서 20px로 수정하니까 무한루프 현상이 사라졌다. 지금까지 모든 오류에 대해 깊이 이해하고 내부 동작까지 공부했지만 이건.. 알고 싶지 않았다...

마무리하며

프론트의 영역은 내가 익숙하던 백엔드와는 너무나도 다른것 같고 그래서 더 깊게 공부를 해봐야겠다는 생각을 했다. 특히 상태관리에 대해서 왜 그렇게 강조하는지 이해가 되었다. 가끔 이렇게 어이없는 오류글들이 계속 올라올것 같은 예감이다