디자이너의 네이티브 앱 개발 도전기 #5

디자이너. 네이티브 앱 개발 도전기

by charian

Nov 27. 2018

이 쓰레기 같은 브런치.

아이패드의 웹 브라우저에서 글쓰기 지원이 안된다.

아마도 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 검색해서 저장하는.. 큰 기능들이 남아 있다.