결과물 URL : https://expo.dev/@madstone-dev/worldweather 

캡쳐 이미지

자기소개

2년차 Laravel 프레임워크로 일하다가 니코쌤의 유튜브를 보고 Js 개발에 관심을 갖게되었습니다. 무료 React Js 로 처음 시작 후 니코쌤의 강의에 반해, Redux, GraphQL, 기타 멤버십 강의 등 로드맵을 차근차근 따라가며 공부하고있습니다. 니코쌤 강의가 정말 많은 도움이됩니다. 

React Native 는 React Js 를 접하면서부터 앱도 만들어봐야지라고 마음속에만 계획하고 있었는데요. 이번 컨테스트 덕분에 다행히도 실천까지하게 되었습니다. 너무 기뻐요 😆

서비스 소개

IOS 기본 앱인 날씨 앱을 최대한 비슷하게 흉내내봤습니다. 현재 위치를 날씨를 추가하거나, 각 도시와 나라를 검색해서 리스트에 추가할 수 있구요. 기본적인 현재 날씨와, 48시간의 날씨, 10일 간의 날씨를 알려줍니다.

날씨의 배경은 unsplash의 무료 이미지를 사용하여 각 날씨에 맞는 배경화면을 보여줍니다. 그리고 아이콘을 통해 날씨를 간략하게 표시해줬습니다.

등록해둔 날씨는 앱을 실행하면 전체 리스트를 갱신합니다. 매시간 마다 또는 리스트를 확인할 때 마다 갱신하고 싶었지만 API 요금과, 한 번 켜서 잠깐 확인하는 정도의 사용자 경험을 고려하면 충분하지 않을까 생각합니다.

개발 과정

처음에는 이것저것 더 재미있는 서비스가 있을까 고민도 해봤지만, 강의에서 배운 To Do List 와 현재 날씨 정보를 조회하는 기능을 최대한 활용하면서도 날씨 앱이라는 기능에 충실한 앱을 제작하는게 좋겠다고 결정을 내렸습니다.

웹과 앱의 가장 큰 차이가 클릭이 아닌 터치라고 생각했기 때문에 앱의 UI는 최대한 제스처로 동작하게 만들고 싶었는데요, 원하는 액션을 지원하는 컴포넌트들을 탐색하고 적용하는 과정이 굉장히 새로웠습니다.

그리고 여러가지 제스처를 동시에 적용하는 과정이 굉장히 까다로웠어요. 코딩의 난이도보다는 라이브러리의 의존성 충돌에 대한 문제들이 자주 발생했는데요. 처음에는 각 날씨 행이 스와이프로 삭제되게 하는것과 드래그해서 순서를 변경하는것을 같이 구현하고 싶었으나 react-native-draggable-flatlist 와 react-native-swipe-list-view 두 라이브러리가 호환이 안되더라구요 😭

그리고 태그들이 가진 오류들도 꽤 있어서 이런 부분도 은근히 신경쓸게 많았어요. ImageBackround 태그의 borderRadius props는 웹에서 제대로 표현이 안되는거 아시나요? Modal 태그도 웹에서는 높이 표현이 제대로 안돼요 🥲

결국 순서를 변경하는 기능과 웹에대한 지원은 해결하지 못했지만, 그래도 우당탕탕 부딪혀가며 제작하는 과정들이 굉장히 재미있었습니다.

그리고 이 앱에 활용한 API는 Google Maps 의 Places API, Geocoding API, Open Weather API 세가지인데요. 아무래도 Google Maps API 는 사용요금이 발생하기 때문에 각 API 당 할당량을 지정해뒀습니다.

사용자 당 500, 일 2000으로 굉장히 적은양인데요. 어플리케이션 구경중 장소정보를 불러오지 못하게된다면 할당량 때문일거에요! 🥲

앞으로의 계획

최근 코로나로 인해 회사가 사라지면서 실직자가 되어버렸어요. 🥲

React Native 도 굉장히 재미있었지만, 우선은 재취업을 위해 React Js 를 활용한 사이드 프로젝트 제작에 힘을 쏟을 생각이에요.

2년간 일하면서 짬짬히 메모해둔 재미있는 아이디어들이 있는데요. 요놈들을 하나하나 만들면서 재미있는 포트폴리오를 많이 쌓고싶어요.

사이드 프로젝트를 하면서 React Js 스킬들을 조금 더 끌어 올리고 싶기도 하구요. 특히 지금은 코드를 분할/정리 하는게 익숙하지 않아서 코드가 되게 지저분한데요. (이번 콘테스트에 제출한 앱도 App.js 하나에 몽땅 작성해버렸어요... 😭) 이런 미숙한 부분들을 사이드 프로젝트를 통해 개선해나가고 싶어요!

마무리

긴 글 읽어주셔서 감사합니다. 그리고 콘테스트 엄청 재미있게했어요! 

이런 기회를 만들어준 니코쌤에게도 감사해요. 😃