search

KAU-SMART-PETS / Capstone_FE

0 stars 0 forks source link

API 관련 고려할 사항 논의 & 제안사항 (React-Native 관련) #18

Open Wendy-Nam opened 4 hours ago

Wendy-Nam commented 4 hours ago

안녕하세요.

서버 측과 대표님의 논의사항을 전달받았으며, 이를 바탕으로 고려할 점과 몇 가지 제안사항을 공유드리고자 합니다. (프론트 관련)

모바일 앱으로서의 서비스 특수성에 기반해, 효율성을 높일 방법과 함께 추가로 고려할 사항들을 정리했습니다.

목차

  1. 비동기-스토리지(모바일 기기 저장공간)를 통한 캐싱 아이디어

    • API 요청 및 서버부하 감소에 도움
    • 오프라인으로도 서비스 제공이 가능해짐

  2. 이를 적용할 경우, 동기화 작업의 방식 및 고려해야할 사항

  3. 🚨 백그라운드 기능(블루투스 어드버타이징, gps ..등) 구현이 매우 제약적인 상황

    • 기본적으로 React-Native가 가지는 제약
    • 시도해볼만한 솔루션 (그러나 매우 제한적)
    • 모바일 플랫폼(android, ios) 각각의 네이티브 구현 정보 + 제약

참고사항

Wendy-Nam commented 4 hours ago

모바일 스토리지 활용

🚧 AsyncStorage

💡 불필요한 요청이나 서버 부하를 줄일 수 있음

1) 불필요한 요청 줄이기

예시 : 마이페이지의 블루투스 기기 목록 요청

마이페이지 (하단 탭) 설명
Image 여기에서 마이페이지에 진입할 때마다 블루투스 기기 목록을 서버에 요청하는 방식은 불필요한 서버 부하를 초래할 수 있습니다.

코드스페이스는 앱 시작 시마다 초기화되기 때문에, 블루투스 기기가 등록되지 않았다는 정보를 받았더라도, 앱을 재시작하거나 페이지를 전환할 때마다 변수가 초기화되고 목록을 반복 요청하게 됩니다.

이를 개선하기 위해, 모바일 기기의 로컬 스토리지를 따로 활용하여 기기 등록 및 삭제 시 해당 정보나 플래그를 모바일에 저장하고, 필요한 경우에만 API 요청을 활성화/비활성화하는 방식을 사용하는 게 어떨까 합니다.

그렇게하면 서버 부하를 줄이고 성능을 더 최적화할 수 있습니다.

→ 로컬에서 관리할 데이터를 명확히 정의하고, 요청 활성화/비활성화 기준을 설정해야 합니다.

2) 네트워크가 제공되지 않아도 앱 사용 가능

인터넷이 없는 환경에서도, 앱을 이용할 수 있도록 지원이 가능합니다. (예: 데이터 수정/기록; 산책시간, 산책거리 ..)

예를 들어, 삼성헬스와 같은 건강기록 및 분석 앱들은 웨어러블 기기나 서버동기화를 제공하는 동시에, 네트워크가 없을 때에도 기록된 데이터를 보여주거나, 추가된 데이터들을 이후 동기화하는 방식을 사용하고 있습니다.

게다가, 구글 맵은 인터넷 연결 없어도 맵과 gps 추적기능을 모두 제공하니, 산책기록 서비스에 함께 활용할 수 있겠습니다.

Google Map은 네트워크가 없어도 gps 등 사용 가능

Wendy-Nam commented 4 hours ago

데이터 동기화 문제 (모바일↔서버)

🎯 Synchronization

💡 로컬 스토리지에 저장한 데이터를 서버와 동기화하는 방식/기준

1. 언제/어떻게 동기화할 것인가?

오프라인 상태에서 기록된 스토리지 데이터가 있다면, 인터넷 연결이 가능할 때 서버로 보내 동기화 해야합니다.

그러나 이 과정에서 몇가지 고려할 점이 있습니다:

예시: 산책 기능 실행 중과 그 전후 처리


산책내용 기록서비스 (Figma)
Image
설명
산책 기능은 사진과 같이 오프라인에서도 사용 가능하며, 시작 버튼으로 시간과 거리를 추적하고, 종료 버튼으로 기록을 저장합니다. 동기화는 네트워크 재연결 시 처리되며, 백그라운드 실행, 동기화 실패, 네트워크 연결 시점에 따른 예외처리가 필요합니다.

a) 이벤트 실행 중, 실시간 동기화

b) 이벤트 실행 완료 시 동기화

가능한 해결책: 비동기적(Asynchronous) 루틴을 통한 동기화

  1. 이벤트 진행 상태를 플래그로 관리
    → 산책 중, 산책 후, 산책 전 상태 구분 및 백그라운드 상태 처리
  2. 동기화 플래그 사용
    → 동기화 전, 동기화 중, 동기화 완료 단계로 구분하여 서버 통신 중 예외 처리
    → 비네트워크 환경에서는 네트워크 감지 시 자동 동기화 예약
  3. 동기화 필요성 체크 API 도입
    → 로컬 저장소와 서버 데이터 비교 (hash 함수 사용)
    → 동기화가 필요한 경우 네트워크 환경에서 자동 실행

3. 어떤 데이터를 동기화할 것인가?

서버 측과의 논의 및 사전의 데이터 정의가 필요합니다.

데이터 손실 및 충돌 방지

예를 들어, 서버로 다수의 데이터를 한 번에 전송할 때, 데이터가 하나로 덮어쓰여지지 않도록 주의해야하며, 필요에 따라 서버의 스키마 구조가 변경되어야 할 수도 있습니다.

예: 동기화 없이 4일간의 산책 데이터를 모은 뒤 한 번에 전송하는 경우

날짜 별 산책기록 설명
Image → 서버는 데이터 전송 시 오늘 날짜를 자동으로 추가하지 않고, 기록된 날짜 정보를 포함한 데이터를 처리해야 합니다.
Wendy-Nam commented 4 hours ago

🚨 백그라운드 기능의 제약

🚫 한계

현재 요구된 기능들 중 지속적인 처리를 요구하는 것은 아래와 같습니다.

당장 앱이 실행 중인 상태(foreground)에서만큼은, React-Native로 요구된 기능을 구현하는 데 제약이 적습니다.

그러나 이들을 백그라운드에서도 계속 처리하는 것은 어렵고 매우 제한이 크다고 알려져있습니다

리액트 네이티브에서 관련 라이브러리를 사용하더라도, 그것만으로는 제대로된 백그라운드 처리 구현이 어렵다고 합니다.

➡️ 안드로이드는 ReactNative의 HeadlessJS와 호환되어 백그라운드 처리가 가능합니다.

🚫 블루투스 어드버타이징의 한계

➡️ 상시 백그라운드 Advertising은 모바일 규정이라는 제약 아래 제한될 수 있습니다.

안드로이드와 iOS에서 백그라운드 작업의 기능적 차이

기능 Android iOS
블루투스 백그라운드에서 HeadlessJS와 Foreground Service를 통해 지속적으로 블루투스 스캔 가능 백그라운드에서 블루투스 작업 제한적, 일시적인 스캔만 가능. 블루투스 연결 유지도 제한적.
GPS 백그라운드 위치 추적 가능, Foreground Service와 함께 동작 백그라운드에서 위치 기반 작업 가능하지만, 지속성 제한. 사용 패턴에 따라 작업이 중단될 수 있음
프로세스 유지 앱이 종료되거나 백그라운드에 있을 때도 작업 유지 가능. 작업 중단 없이 실행 가능 프로세스 유지 제한적, 앱이 종료되면 백그라운드 작업 중단. 일부 작업만 유지 가능
블루투스 API 요청 지속 백그라운드에서 지속적인 API 요청 가능, Foreground 알림 필요 제한된 시간 동안만 API 요청 가능, 앱이 종료되면 중단됨
작업 지속 산책 기능 같은 작업도 백그라운드에서 유지 가능 작업이 일시적으로만 유지, 일정 시간 이후 중단됨
API 핸들러 HeadlessJS와 JobScheduler를 통해 지속적 API 처리 가능 백그라운드 작업은 제한적, 시간이 지나면 중단됨
푸시 알림 핸들러 푸시 알림을 통해 백그라운드 작업 유지 가능 푸시 알림을 통해 제한된 백그라운드 작업만 처리 가능

네이티브 개발 시 제약사항과 난이도

두 플랫폼의 백그라운드 기능 개발과 관련하여, 이렇게 그 난이도 및 제약을 비교할 수 있습니다.

Android:

iOS:

React-Native에서의 IOS 백그라운드 기능 개발

Reference

간단하게 나마, gps, fetch, bluetooth, notification 등의 백그라운드 구현에 설명과 솔루션을 제공함

RN에서 IOS 백그라운드 기능 처리

리뷰

일반적인 BG프로세싱에 대해서는, ios 네이티브 코드 추가를 통한 구현을 제시

fetch에 대해서는 RN 라이브러리 사용을 제시하지만, 매우 제한적 (최소 15분에 한번만 가능, 30초 이상은 불가)

관련 React-Native 라이브러리

기능은 제한적이지만, 초기 프로토타입 또는 간단한 부분에서 시도할 수 있는 백그라운드 처리 라이브러리들과 그 제약사항입니다.

특징 React Native Background Fetch React Native Background Actions
라이브러리 react-native-background-fetch react-native-background-actions
주요 목적 앱을 약 15분 간격으로 백그라운드에서 깨워서 주기적으로 작업 수행 앱을 백그라운드에서 영구적으로 실행하여 지속적인 작업 수행
주요 기능 - 약 15분 간격으로 작업 수행
- 자동으로 OS 사용 패턴에 따라 이벤트 발생 빈도 조절
- scheduleTask로 일회성 또는 주기적 작업 예약 가능		 - 지속적인 백그라운드 작업 수행
- 백그라운드에서 JS 코드 실행 가능
- 작업 중 알림 표시 (Android 필수)
사용 패턴 간헐적인 작업 처리(예: 주기적인 서버 데이터 업데이트) 장시간 백그라운드에서 실행되는 작업(예: 위치 추적, 음악 재생 등)
지원 플랫폼 iOS, Android iOS, Android
iOS 한계 - 이벤트가 15분 간격 이상으로 제한됨
- 앱이 종료되면 백그라운드 작업 수행 중단
- stopOnTerminate: false가 지원되지 않음		 - 자체적으로는 백그라운드 실행 유지 불가
- 오디오, 위치 추적 등의 라이브러리와 결합해야 장시간 실행 가능
Android 한계 - HeadlessJS로 앱이 종료된 후에도 작업 수행 가능
- Android 12 이상에서는 알림 없이 작업 시작 불가		 - Android 12 이상에서는 작업 시작 시 알림 표시 필수
- HeadlessJS에 의존해 앱 종료 후 작업 수행
설치 및 설정 react-native-background-fetch 패키지 설치 후 간단한 설정 react-native-background-actions 패키지 설치 후 추가 설정 필요
배터리 영향 상대적으로 적음 (주기적 작업 수행) 상대적으로 큼 (지속적인 작업 수행)
특수 기능 - scheduleTask로 커스텀 작업 예약 가능
- HeadlessJS 사용으로 앱 종료 후 작업 수행 가능		 - 알림 표시(작업 설명 포함), 진행바 표시 가능
- 링크 클릭 시 딥링킹 지원