디자이너의 네이티브 앱 개발 도전기 #6
디자이너. 네이티브 앱 개발 도전기
기록은 자주 남기는 게 좋다.
머릿속에 둥둥 떠다니는 이슈를 정리하는 차원에서 좋기도 하고, 그냥 답답한 마음을 풀기에도 좋고.
사실 지금의 단계까지 너무 힘들었다.
React Native를 이용해서 네이티브 앱을 개발하겠다는 사람이 props나 state의 개념을 명확히 나누질 못하고 대부분의 기능을 모듈에 의존하였으니 말이다.
어찌 보면 간단했을 drawer(left side menu)를 구현하는 것만 해도 장장 3일간 씨름하였는데, 이것조차 레거시 수준의 옛날 버전 api를 활용한 모듈을 그대로 가져다 쓴 수준이고(그나마 알아볼 수 있는 수준의 디테일한 설명과 npm으로 모듈 설치 시 큰 문제가 발생하지 않았던 버전을 찾느라 너무 힘들고 고되었다) context api는 도무지 감을 잡지 못해 활동하는 커뮤니티의 큰 스승(혼자 이렇게 부르고 있다)께서 대부분 해결을 해주었다.
앞으로 어마어마한 기능들이 산적해 있는데 걱정이 앞서는 것이 사실이다.
관련 모듈들을 찾아놓긴 했는데 어제 큰 스승께서 기본 document를 정독 후 진행하는 것도 좋다는 말씀을 하셔서 심란할 뿐이다.
샘플 코드는 참조에서 그치라는 이야기다.
아마도 react native에서 제공하는 기본 api로 해결이 될 기능이 있고 아닌 게 있는데 조금 나열해서 앞으로 프로젝트 진행에 참고를 하려 한다.
1. 로컬 스토리지
https://facebook.github.io/react-native/docs/asyncstorage
로컬 스토리지의 리액트 버전이다.
데이터를 로컬 스토리지에 저장하고 db에 그러하듯 새로 넣거나, 지우거나 변조해 사용할 수 있다.
아마도 number, string, boolean 등의 여러 타입 등을 자유롭게 사용할 수 있을 것 같다.
asyncstorage는 앱의 설정 데이터와 2곳 이상의 지역 저장에 사용할 예정이다.
아마도 앱의 인트로 디자인이 추가될 경우 인트로의 hide 여부 또한 저장할 수 있을 것 같다.
2. 지역기반 날씨 데이터
조회하려는 지역이 한국이 true냐 false냐를 가려 각 상태 값에 맞는 pm수치를 가져와야 한다.
Air Quility Index(AQI)를 모든 나라에서 사용할 수 있는 API가 없기 때문.
있어도 상용 앱에선 사용을 불허하니 방법이 없다.
특히 한국의 경우 에어 코리아가 국제 수준에 걸맞은 AQI지수(통합 대기질 수치는 앞서 게시물에서 밝혔듯 굉장히 느슨한 수치이다. 믿고 마스크 없이 외출했다가 미세먼지 잔치를 벌일 수 있다)를 제공하지 않으므로 한국이 true일 경우 자체적으로 AQI를 계산하여 제공해야 한다.
직접 계산식을 이용해 검증하였다.아마도 if condition을 사용하면 될 듯. if else는 javascript를 통해 꽤 자주 접해보았으므로 큰 걱정은 안 되지만 현재 프로젝트를 진행하며 아주 작은 기능들 조차 벽에 부딪치는 느낌이 강했으므로 우습게 볼 수 없다.
3. auto complete
지역을 추가하려면 2가지 방법이 있다.
gps기반으로 검색된 현재의 current location과 지역 키워드를 갖고 검색해 도출된 검색 결과이다.
accuweather의 경우 gps를 기반으로 검색된 지역도 location key값을 갖고 있으므로 해당 key값을 사용자의 요청에 의해 로컬 스토리지에 저장해주면 된다.
헌데 문제는 키워드로 검색했을 경우인데, 이 상황에선 autocomplete이 필요하다.
이를테면 text input에 s를 써넣으면 seoul이 아래 리스트로 뿌려지는 상태 말이다.
Sketch를 이용해 프로토타이핑한 화면이다. 실제 디자인 화면.관련 모듈을 찾아놓긴 했는데, 2년 전 소스라서 좀 걱정은 되지만 package.json은 지난달 업데이트되어 막연한 기대감을 갖고 있다.
4. 스와이프 스크린
화면을 좌우로 스와이프 하면 뷰를 바뀌게 해야 한다.
보여줄 데이터가 좀 많기 때문.
이건 뭐.. 큰 문제가 있을까..? 해당 뷰를 구현하려는 사람이 많아 그런지 모듈을 찾는 것도 크게 어렵진 않다.
이것 또한 소스가 오래되어 걱정이긴 하지만...
어찌 되었든 여기까지 하면 런칭 준비를 해도 될 것 같다.
12월 말일에 런칭이 가능할지 모르겠다..
