React Native 어플리케이션 개발기
05 Sep 2023어플리케이션 개발
연구실에 만들어져 있던 어플리케이션을 유지 보수하고 기능 몇개 추가하는 작업을 해본게 다였는데, 요청을 받아서 새로 어플리케이션을 개발하게 되었었다. 어플리케이션 이름은 ‘내손에 치매안심주치의’이다. 치매안심센터와 협약된 병원들과 연결을 도와주고 연락처 정보 등을 제공해주는 간단한 어플리케이션이다. 디자인을 포함해 기획된 내용이 다 정해져 있어서 나는 그대로 만들면 되는 간단한 작업이었다. 할 줄 아는게 React Native 밖에 없었기 때문에 RN으로 개발을 했다. 사실 원래 다른 분이 네이티브로 개발하다 중단한 파일이 있었는데, 코틀린을 배우는 러닝 커브가 더 클 것 같아서 새로 RN으로 개발했다.
개발 환경
React Native에 Expo를 사용해 개발했다. 단순히 병원 리스트와 병원 위치만을 알려주는 기능만 필요했기에 따로 서버없이 프론트로만 처리하게 개발을 진행했다. 프론트 내부에서 DB를 사용해 병원 리스트를 관리하고자 expo-sqlite를 사용해 직접 쿼리를 날리며 관리하는 식으로 개발했다.
개발 과정
처음엔 디자인된 페이지를 옮기고 라우팅 작업을 먼저 했다. 페이지가 3개밖에 없는 어플리케이션이라 금방 끝났다. 요청에 따라 랜딩 페이지를 3초간 보여주고 메인 페이지로 이동하게 했고, 메인 페이지에서 권역별로 병원리스트를 보는 상세페이지로 들어가는 구조이다. 지역이 4개가 있었는데, 라우팅 파라미터로 권역명을 전달하게 해서 하나의 페이지가 4개의 권역을 컨트롤할 수 있도록 디자인했다.
그 다음으론 지도를 띄우는 부분을 구현했다. react-native-maps를 사용해 구글 지도를 띄우도록 했다. 원래는 카카오 맵을 사용하려 했는데(무료라서..) expo를 사용중이다 보니 sdk를 사용하기 어려웠고, 웹뷰를 사용해 지도를 띄워야했다. 웹뷰를 사용하다 보니 개발이 복잡해져서 구글 지도를 사용하는 것으로 변경했다. Maps SDK for Android를 사용하고 단순히 맵을 로드하는 비용은 무료다.
react-native-maps를 사용하는데 생각보다 문제가 있어서 지도를 띄우는데 조금 시간이 걸렸다. 사유는 오타.. 오타가 생겨서 API키가 제대로 안들어가서 그랬었다. API키가 제대로 들어가니 화면이 잘 떴다. 내 위치를 지도에 표시해주고, 이제 남은건 병원들의 위치를 표시해주는 것이었다.
DB를 쓰기 위해선 DB를 만들고 테이블을 만들어야했다. 테이블은 병원 이름, 주소, 전화번호, 위도, 경도를 저장할 수 있도록 만들었다. 그런데, 데이터가 .csv고 이걸 파싱해서 DB로 만들었었다. 그리고 이 sqlite db파일을 assets에 넣어서 쓰려고 했는데, 이게 안드로이드 보안 문제 등등 해서 쌩으로 넣는게 어려웠다. 그래서 그냥 .csv 파일을 넣어두고 expo-file-system을 사용해 파일을 읽어와서 어플리케이션 안에서 db를 만들고 테이블을 만드는 것으로 구현했다. 그래서 지금 데이터 변경을 하려면 이 .csv파일을 수정하고 빌드하면 알아서 바뀌게끔 되어있다.
먼저 권역별로 리스트를 얻어오는 쿼리를 작성해야했다. 권역별로 병원들이 나뉘어져 있었는데, 데이터에 권역명은 적어두지 않아서 LIKE 쿼리로 주소에 지역명이 존재하는 지 체크하는 것으로 구현했다. 병원 데이터에는 주소만 존재했고 위도나 경도는 없었다. 그래서, 테이블에는 위도와 경도를 추가해 쉽게 병원 위치를 나타내게 만들었다. 병원 리스트 수가 별로 되지 않고 변동이 되는 정보가 아니었기에 수작업으로 위도와 경도를 구해 데이터에 추가했다. 테이블에 해당 병원이 속한 지역명으로 쿼리를 날려 해당되는 정보만 마커로 지도에 찍어줬고, 즐겨찾기 기능도 칼럼 하나 추가해서 구현했더니 개발이 끝났다.
개발 후기
간단한 형태의 어플리케이션 개발이었는데, 내가 기획한 어플리케이션은 아니지만 만든 앱이 기사도 나오고 해서 신기했다. GCP에서 API 사용 찍히는걸 보면 사용량이 꾸준히 올라가는것도 신기하고 이걸 정말 사용하고 있구나라는게 느껴진다. 플레이 스토어에 올리려면 필요한 절차들도 배웠고, 크게 느낀건 expo라는 플랫폼이 정말 앱을 제대로 개발하고자 하면 한계가 많다는 것도 체감했다. 특히, expo를 사용하면 쓰기 껄끄로운 라이브러리들이 많아서 편하게 개발하려고 쓴 플랫폼인데 오히려 제약을 받는 느낌이었다. 그리고 expo로 빌드한 결과물이 테스트할 때와 다른 경우도 종종 있었다. 그래서, 어딘지 대충 짐작하고 수정하고 빌드해서 확인하는 경우가 있었는데.. 이 부분이 정말 별로였다. Flutter가 Dart라는 자기들만 쓰는 … 언어로 개발해야하는 프레임워크인데다 구글이 프로젝트를 포기하면 사라질 생태계니까 영 관심이 없었는데, RN을 쓰면 쓸수록 별로인 부분이 많아서 오히려 관심이 생긴다. 물론, 앱개발을 좋아하진 않아서 배울 지는 미지수다.