Progress Bar and AsyncStorage on react native expo (1)

이번에 삽질 이야기입니다.

간단한 안드로이드 게임앱을 react native expo로 만들고 있습니다.

 

게임 시간제한을 타이머로 만들어서 숫자가 변하는 것은 보여주는데, 워낙 단순한 UI 형태여서, 시각적인 모습을 더하면 단순함이 덜할거 같아 시간제한 타이머를 Progress Bar로 같이 보여주려고 찾아보니 react native에서 2개의 모듈이 나왔습니다.

 - react-native-progress

 - react-native-progress-animated-bar

이 중에서 두번째인 react-native-progress-animated-bar에 예제가 바로 보여서 이리저리 맞추고 시행착오 끝에 시간제한 타이머에 맞추어서 진행이 멈추는 Progress Bar를 구현했습니다.

 

그런데, 여기에 게임점수를 추가하는 것과 관련해서 저장하는 것을 찾으며 AsyncStorage를 이용하는 것 방법을 찾았습니다. 그래서 react-native 모듈의 AsyncStorage의 예제를 찾아 배워가다보니 AsyncStorage가 Deprecated 되어서 react-native 모듈이 아닌 @react-native-community/async-storage 를 사용하라고 하더군요.

그래서 @react-native-community/async-storage 를 사용하는 예제를 찾아서 게임점수 항목을 저장하도록 구현해 놓았습니다. 주로 코드 구현하는 동안은 웹브라우저에서 테스트하고, 세세한것 조정할 때 모바일 expo에서 돌려보는데, 브라우져에서는 문제없이 돌던 것이 모바일에서는 AsyncStorage가 에러를 발생시키는 겁니다.

다시 에러 메시지를 구글링하니...

react native를 expo에서 작성한 것은 @react-native-community/async-storage 를 사용할 수 없다고 합니다.

처음에 react native로 안드로이드 앱을 만들수 있다는 것을 알고 간단하고(?) 빠르게 앱 하나 만들어 보려고 react native를 시작했고, 거기에 expo가 초보에게는 진입장벽이 낮은데 제한이 있다는 것을 들었는데, 바로 여기서 제한이 걸렸습니다. 지금까지 알아본 바로는 expo를 계속 사용하려면 react-native 모듈의 AsyncStorage를 사용하고, 거기에 나오는 Deprecated warning은 무시하라고 하네요.

 

다시 코드를 Deprecated된 것으로 바꾸다 이전에 react-native-progress-animated-bar를 이용해서 구현된 Progress Bar 가 문제가 된 부분이 있어 Progress Bar를 다시 구현중입니다. 이전 Progress Bar 모듈을 게임타이머에 맞추다 보니, 모듈 내의 코드가 수정되어야 하는 부분이 생겼고, 이것이 수정되면 build시에 모듈에서 수정된 부분은 내 프로젝트에 적용이 안되기에 자체적으로 Progress Bar를 구현해야 하더군요.

그래서 다시 react native에서 Progress Bar를 구현하는 방법을 구글링 해서 찾은 것이 아래의 두 사이트 입니다.

  -  How to build a progress bar with React Native

그리고 위의 사이트는 React에서 Hooks을 사용하는 것을 구현한 아래의 사이트 내용을 기반으로 Progress Bar를 구현하는 것을 설명하구요.  

  - Making setInterval Declarative with React Hooks

 

이렇게 여러가지 삽질이 겹치다 보니, 간단한 안드로이드 앱 하나 만들어보자고 한것이 진행이 늘어지게 생겨서 아무래도 일단은 위의 삽질할 것들은 branch로 분기해서 놓아두고, 심플한 앱을 먼저 마무리 해 봐야겠습니다.

삽질로 고생도 했는데(아직 끝나지 않았지만) 몇가지 알게된 사실도 있고, 덕분에 깃허브에서 브랜치 분기해서 하는 것도 연습하게 생겼습니다.