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

autocomplete 구현 #2

여차저차 진행되었다.

그동안 react native에 코드가 눈에 익었는지, 러닝 커브가 위로 도달한 건지 모르겠지만 진도는 빠르게 진행되고 있다.

내가 예상하는 수준보다 한두 시간 정도 빠른 수준이랄까.

월 말까지 완성은 가능할 것 같다.

Autocomplete은 완성하였다.

사소한 버그 메시지가 돌출되지만 큰 문제는 없는 수준이다.

일단 구현 방식은 이렇다.

Textinput에 키워드를 타입(onChangeText) 하면 입력한 글자와 글자 수를 알아낸다.

글자와 글자 수는 state에 넣어둔다.

글자는 입력한 키워드를 fetch 하는 데 사용하고 글자 수는 최소 3글자 이상 입력했을 때 fetch를 하기 위함이다.

1글자부터 fetch를 하면 쿼리 소모가 심하기 때문.

그리고 키워드를 입력할 때마다 fetch를 하면 그것 또한 쿼리 소모가 심하기 때문에 bounce를 줘야 한다.

키워드 입력이 없고 나서 2초 후 fetch를 시도한다.

모든 과정은 bounce가 된 2초 후 글자가 3자 이상 입력되었을 경우 fetch를 시도한다.

이렇게 받아온 json데이터는 통째로 state에 저장하고 react native의 flatlist 함수(?)를 이용해 나열한다.

for 같은 건 필요 없다.

리스트 나열 같은 건 간편하게 구현할 수 있다.

이제 만들어진 리스트를 async로 local storage에 저장하는 기능을 만들어야 한다.

각 location들은 key값을 가지고 있고 Key값을 기반으로 날씨정보를 가지고 온다.

이게 accuweather의 방식.

async기능을 만들게 되면 각종 단위(도 씨& 화씨, km&mi)를 변경하는 기능까지 넣어야 한다.

디자이너가 앱을 개발하는데 있어 꽤 험난하지만.. 그래도 뭐.

절반은 지나온것 같다.