/metro-location-app

위치 데이터를 실시간으로 추적하여 하차역에 도착하면 알림을 띄워주는 앱

Primary LanguageTypeScript

metro-location-app

💡 프로젝트 소개

지하철 타고 가다가 내려야 되는 역을 듣지 못하고 지나쳐버린 개인 경험에서 비롯하여 이를 해결해줄 앱을 만들기로 결심하였습니다.

이 앱은 사용자의 현재 위치를 실시간으로 파악하기 위해 모바일 디바이스의 geolocation 데이터를 추적합니다. 앱이 background 상태일 때도 내릴 역에 도착하면 푸쉬알림을 띄워줍니다.

앱이 작동하는 방식은 다음과 같습니다.

  1. 사용자는 앱을 실행하고 내릴 역을 설정합니다.
  2. 앱은 사용자의 현재 위치를 추적합니다.
  3. 사용자의 현재 위치가 내릴 역과 가까워지면 앱은 푸쉬알림을 띄웁니다
지하철역 검색 기능 최초 진입 시 위치 추적 퍼미션 지하철 역 근처에 도착하면 푸시 알림 기능
Screenshot_1696865246 스크린샷 2024-03-15 오후 12 09 20 1233

💡 Authors

💡 Installation

Android Studio (emulator) 또는 XCode (simulator) 또는 실기기 연결 후 로컬환경에서 다음 명령어를 실행해주세요.

  yarn start
  yarn run android // or yarn run ios

💡 Tech Stack

  • 프론트엔드: React Native, Styled-Components

  • 상태관리: Recoil

  • 푸시알림: notifee

  • 지도: React-native-nmap, react-native-geolocation-service

  • 테스트: jest

  • 코드컨벤션: eslint, prettier

💡 Performance (속도 및 성능 개선 코드)

debounce 적용해서 input 타이핑 시 API 호출 줄이기

[문제] 기존 코드에는 한글자 타이핑 할 때 마다 지하철 데이터 API 함수를 호출하기 때문에 상당히 비효율적이었습니다.

[해결] lodash 라이브러리의 debounce 메서드를 이용하여 700ms 동안 호출을 지연시킵니다. 타이핑이 멈추고 (끝나고) 해당 시간이 지난 후에야 함수 호출을 하기 때문에 불필요한 호출 빈도를 줄일 수 있습니다.

[코드]

import {debounce} from 'lodash';
...
const debouncedGetMetroData = debounce(getMetroData, 700);
...
// jsx
<SearchBarInput
	...
  onChangeText={text => {
    debouncedGetMetroData(text);
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  }}
/>

[출처] https://www.mrlatte.net/code/2020/12/15/lodash-debounce

💡 주요 개발 포인트 (이슈, 버그, 개선)

// 상대경로 예시:
import ImportHell from '../../../../../src/screens/ImportHell'

// 절대경로 예시:
import ImportHeaven from 'screens/ImportHeaven'