디자이너의 네이티브 앱 개발 도전기 #5
디자이너. 네이티브 앱 개발 도전기
이 쓰레기 같은 브런치.
아이패드의 웹 브라우저에서 글쓰기 지원이 안된다.
아마도 1년 반 전에도 같은 메시지를 본 것 같은데 아직 여전하다.
아이패드 앱은 가로보기 지원이 안된다.
스마트 키보드와 아이패드 프로 12.9를 사용하는 나에겐 브런치만큼은 무용지물이다.
퇴근 후 여태껏 소스 뒤적거리느라 맥북 배터리가 15%인데, 아이패드가 불능이라 굳이 다시 맥북 뚜껑을 열었다.
몇 가지 진전이 있다.
왼쪽에서 밀고 나오는 화면 구현을 방법을 여러 방면으로 찾아보았다.
React Navigation의 drawer라는 것을 알게 되었고, 가장 이상적인 구현 방법이라는 것 또한 알게 되었다.
그리고 router를 통해 각 페이지를 분기하는 것 또한 이상적이라는 것을 알게 되었다.
문제는 이 솔루션의 구현 샘플을 React Navigation 1.x버전으로밖에 찾질 못했다는 것.
참고로 현재는 3.x버전이다.
개알못인 나에겐 별다른 선택지가 없었고, 주말을 온전히 샘플 코드를 적용하는 데 사용했다.
완전 리팩토링 수준.
예전에 구현했던 left side slide menu는 각 view 전환이 힘들었는데, 단박에 성공.
단박에 성공이라기엔 주말 내내 시도하긴 했으니.. 좀 그런가..
여기서 다른 문제가 터졌다.
니꼴라스 선생님의 강좌를 기반으로 앱 제작을 진행하던 나에게 큰 문제가 생겼는데, single page기반으로 코드가 작성된 강좌 샘플과는 많이 달라진게 문제다.
accuweather의 json 데이터를 fetch 하여 component의 state에 저장해 사용하였는데 지금의 구조(페이지를 나누어 사용)로 변경하며 state의 데이터를 사용할 수 없게 된 것이다.
여태껏 설계된 구조는
App.js를 로딩하며 accuweather의 데이터를 fetch 하고 state에 저장하여 해당 데이터를 기반으로 render 한 다음, routes를 불러오고 각 페이지들을 routes에서 불러오며, sidemenu까지 불러와 sidemenu에서 각 페이지로 접근할 수 있게 하는 구조이다.
문제는 각 페이지에서 app.js에서 fetching 데이터를 사용할 수 없게 된 것.
어제오늘 미친 듯 쌈박질한 결과 context api를 사용하면 해결 가능하다는 것을 알게 되었다.
props, navigation 등은 onpress에 반응하는 방법이라 사용 불가능했고, redux는 도무지 엄두가 나질 않았다.
디자이너 주제에 왜 이리 전문 용어를 많이 알고 있느냐고?
정말 쉴 때마다 계속 구글에 검색을 하고 앉았으니..
현재는 아래의 이미지까지 구현이 된 상태이다.
지난 이미지보다 후퇴한 것 같지만 분명 진보한 상태이다.
당분간 React native의 공식 document를 보며 화면 스타일링을 진행할 생각이다.
그동안 너무 지쳤다.
앞으로 키워드를 타이핑 하면 autocomplete api를 통한 location 검색 기능과 섭씨, 화씨 오갈 수 있는 async를 활용한 설정, 그리고 화면을 좌우로 스와이핑 하여 뷰를 옮겨갈 수 있는.. 그리고 location 검색해서 저장하는.. 큰 기능들이 남아 있다.
12월 31일까지 완성할 수 있을지.. 오늘 큰 좌절을 몇 번을 해서 걱정이다.
그리고 github의 주소를 바꾸었다.
완전 리팩토링 하면서 프로젝트의 이름 자체를 바꾸었기 때문이다.
아직 가명이긴 하지만 아마도, 앱 이름으로 확정일것같은 느낌.
WhatTheWeather
https://github.com/charian/WhatTheWeather
React Native doc
https://facebook.github.io/react-native/
