Fan Arcade | Search All K-Pop Shops Worldwide
디버깅을 위해서 많은 툴을 가져와서 사용했는데, 가장 중요한 것은 React Native Debugger였다. 페이스북이 만든 Flipper가 있었지만 Redux를 시각적으로 볼 수 없다는 점, 모듈의 완성도가 높지 않다는 점, console을 자세히 볼 수 없다는 점에서 Chrome 콘솔을 그대로 가져온 React Native Debugger의 사용성이 훨씬 좋았다. 사용할 수 있는 모듈은 @react-navigation/devtools, redux-devtools-extension 뿐이지만 이 두 개 모듈이 Chrome 콘솔에 그대로 적용되어 많은 액션을 콘솔, Devtool에서 바로 볼 수 있었고 navigation이 어떤 스크린으로 어떤 parameter와 함께 움직이는지도 바로 확인할 수 있었다.
그리고 live 상황에서도 어플이 강제 종료되는 상황을 확인하기 위해서 @sentry/react-native를 통해서 모니터링할 수 있게도 만들었다.
한 번 로그인 시 토큰을 가지고 핸드폰에 저장시키는 방법으로 자동 로그인을 구현했다.
어플 데이터 저장소 역할을 하는 Redux를 사용했는데, Redux 데이터 형태를 그대로 유지하면서 어플 종료 시 react-native-async-storage에 데이터 키-밸류로 저장하고 어플 구동 시 그대로 불러와서 Redux의 initial value로 어플을 켤 수 있게 만들었다.
SNS 로그인을 위해서 @react-native-google-signin/google-signin, react-native-fbsdk-next, @invertase/react-native-apple-authentication를 사용해서 Apple, Facebook, Google 로그인을 구현했다. 모두 로그인 시 토큰과 Email을 넘겨주는 것을 확인하고 서버에 Email을 대조해서 회원 정보를 확인해서 토큰을 통해 인증하는 방식을 도입했다.
그리고 회원 로그인 시 react-native-device-info와 @react-native-firebase를 통해 기기 uid, 파이어베이스 토큰을 서버에 등록하여 기기별로도 알람을 보낼 수 있도록 그리고 기기 하나 당 하나의 토큰을 가질 수 있도록 했다.
초기 디자인은 페이스북과 유사한 카드 형태의 디자인으로 글과 댓글을 확인할 수 있는 디지인으로 만들어졌다.
하지만 차츰 어플만의 디자인이 완성되면서 지금의 형태를 갖게되었다. 여러 이유가 존재했는데 첫 번째는 성능의 문제였다. 서버 데이터 구조 설계를 제대로 하지 못한 탓에 댓글을 포함하여 데이터를 가져오는 경우 너무 많은 데이터가 한 번에 로드되어 엄청난 지연이 발생했다.
특히 커뮤니티 안에 트레이드나 원래는 베스트 혹은 최신 피드도 보여줄 수 있게 했었는데 그렇다보니 한 번에 100개가 넘는 데이터를 로드했다. 커뮤니티만 오면 버벅거리는 문제가 발생했기 때문에, 최대한 간소화한 버전으로 카드를 만들고 불러오는 데이터의 양도 정렬 상태가 변하면 로드하는 방식으로 지연을 해결할 수 있었다.
채팅을 만들 당시 목적은 단순했다. 트레이드하는 사람과의 유기적인 소통을 이루기 위해서 였다. 하지만 마음처럼 단순히 기능이 완성되지 않았다. 가장 먼저 javascript에 기본 탑재된 Websocket를 활용하여야 했는데, 연결타이밍과 복수 연결을 해야만 하는지에 대한 확신이 없이 각 부분마다 다른 Websocket을 연결해서 사용했는데, 이 때문에 많은 페이지에서 Websocket이 사용되고 내가 확인할 수 없는 지경에 이르렀다.