React Native로 오프라인 우선 애플리케이션 구축

재고 수준을 업데이트하는 소매업체, 고객 데이터에 액세스하는 영업 담당자, 간헐적인 연결 중에 메시지를 보내는 사용자가 앱을 사용하고 있다고 상상해 보세요. 이러한 모든 경우에 오프라인 기능은 원활한 사용자 경험과 실망스러운 사용자 경험의 차이를 의미할 수 있습니다. 이것이 바로 오프라인 우선 사고가 작용하는 곳입니다.

오프라인 우선 접근 방식을 통해 인터넷을 사용할 수 없는 경우에도 앱이 계속 작동하도록 보장합니다. WhatsApp과 같은 앱은 이 개념을 완벽하게 보여줍니다. 오프라인 상태에서 메시지를 보내면 로컬에 저장되며 연결이 복원되면 자동으로 전송됩니다. 이러한 원활한 경험은 로컬 스토리지를 활용하고 네트워크 상태를 모니터링함으로써 달성됩니다. 데이터베이스를 통해서든 기기 메모리를 통해서든 앱은 계속 작동하여 연결이 다시 가능해지면 저장된 데이터를 서버와 동기화합니다.

이 기사에서는 로컬 저장소, 데이터베이스 동기화 및 Expo API를 사용하여 React Native 애플리케이션에서 오프라인 지원을 구현하는 방법을 안내하겠습니다. 오프라인 우선 접근 방식의 이점은 다음과 같습니다.

1. 향상된 사용자 경험: 사용자가 다운타임을 경험할 가능성이 줄어들어 전반적인 만족도가 높아집니다.
2. 데이터 일관성: 데이터는 로컬에 저장되고 온라인일 때 동기화되어 데이터 손실이나 손상을 방지합니다.
3. 참여도 증가: 오프라인으로 작동하는 앱은 특히 인터넷이 불안정한 지역에서 더 큰 유연성을 제공하여 참여도와 유지율을 높입니다.

Expo 및 React Native로 오프라인 지원 설정

Expo는 많은 플랫폼별 구성을 추상화하여 기능 구축에 집중할 수 있도록 하기 때문에 React Native 개발을 위한 훌륭한 프레임워크입니다. 이 섹션에서는 Expo, 로컬 스토리지용 AsyncStorage, 네트워크 상태 감지용 NetInfo를 사용하여 간단한 React Native 앱에서 오프라인 지원을 구현하는 방법을 살펴보겠습니다.

1. 프로젝트 설정

먼저 새로운 Expo 기반 React Native 프로젝트를 생성해 보겠습니다.

npx create-expo-app offline-first-app
cd offline-first-app

2단계: 종속성 설치

이 예에서는 두 가지 주요 라이브러리를 사용합니다.

@react-native-async-storage/async-storage: 이 라이브러리를 사용하면 기기에 데이터를 저장할 수 있습니다.
@react-native-community/netinfo: 이 라이브러리는 네트워크 상태를 감지하고 장치가 온라인인지 오프라인인지 판단하는 데 도움이 됩니다.

필요한 패키지 설치:

expo install @react-native-async-storage/async-storage @react-native-community/netinfo

3단계: 오프라인 논리 구현

다음으로 온라인일 때 API에서 데이터를 가져오고 오프라인일 때 사용할 수 있도록 로컬에 저장하는 간단한 애플리케이션을 구축하겠습니다. App.js에서 기본 구조를 설정하는 것부터 시작하겠습니다.

import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View, Button, FlatList } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import NetInfo from '@react-native-community/netinfo';

const DATA_API = 'https://jsonplaceholder.typicode.com/posts';

export default function App() {
  const [data, setData] = useState([]);
  const [isOffline, setIsOffline] = useState(false);

  useEffect(() => {
    const loadData = async () => {
      // Check network status
      const netInfo = await NetInfo.fetch();
      setIsOffline(!netInfo.isConnected);

      if (netInfo.isConnected) {
        // Fetch data from API when online
        try {
          const response = await fetch(DATA_API);
          const result = await response.json();
          setData(result);

          // Cache the data for offline use
          await AsyncStorage.setItem('cachedData', JSON.stringify(result));
        } catch (error) {
          console.error('Failed to fetch data:', error);
        }
      } else {
        // Load data from AsyncStorage when offline
        try {
          const cachedData = await AsyncStorage.getItem('cachedData');
          if (cachedData) {
            setData(JSON.parse(cachedData));
          }
        } catch (error) {
          console.error('Failed to load data from cache:', error);
        }
      }
    };

    loadData();
  }, []);

  return (
    <View style={styles.container}>
      <Text style={styles.header}>Offline-First App</Text>
      <Text>Status: {isOffline ? 'Offline' : 'Online'}</Text>

      <FlatList
        data={data}
        keyExtractor={(item) => item.id.toString()}
        renderItem={({ item }) => (
          <View style={styles.item}>
            <Text style={styles.title}>{item.title}</Text>
          </View>
        )}
      />

      <Button title="Reload" onPress={() => loadData()} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 50,
    paddingHorizontal: 20,
    backgroundColor: '#fff',
  },
  header: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
  },
  item: {
    backgroundColor: '#f9c2ff',
    padding: 20,
    marginVertical: 8,
  },
  title: {
    fontSize: 16,
  },
});

어떻게 작동하나요?

1. 네트워크 상태 감지: NetInfo 라이브러리를 사용하여 장치가 온라인인지 오프라인인지 확인합니다. 온라인인 경우 앱은 API에서 데이터를 가져와 캐시합니다. 기기가 오프라인인 경우 앱은 AsyncStorage에서 캐시된 데이터를 검색합니다.

2. 데이터 캐싱: AsyncStorage를 사용하면 오프라인 액세스를 위해 API에서 가져온 데이터를 저장할 수 있습니다. 이는 인터넷 연결이 활성화되지 않은 상태에서 앱이 작동하도록 만드는 데 필수적입니다.

3. 데이터 동기화: 연결이 복원되면 앱은 API에서 새로운 데이터를 가져와 캐시를 업데이트하므로 사용자가 온라인에 있을 때 항상 최신 정보를 얻을 수 있습니다.

고급 오프라인 기능 및 주요 고려 사항

다음과 같은 고급 기능을 통합하여 이 기본 기능을 구축할 수 있습니다.

1. 동기화 전략: 일부 앱에는 충돌이 발생할 수 있는 고급 동기화 전략이 필요합니다(예: 두 명의 사용자가 동일한 데이터를 오프라인으로 업데이트하는 경우). 파우치DB 또는 Firebase와 같은 도구는 실시간 데이터 동기화 및 충돌 해결을 관리하는 데 도움이 될 수 있습니다.

2. 데이터베이스 솔루션: 더 복잡한 앱의 경우 더 큰 데이터 세트와 더 정교한 쿼리를 처리하기 위해 Realm이나 SQLite와 같은 로컬 데이터베이스를 사용할 수 있습니다.

3. 낙관적 업데이트: 일부 앱, 특히 소셜 미디어와 같은 사용자 생성 콘텐츠가 포함된 앱에서는 사용자가 오프라인에서 데이터를 생성, 업데이트 또는 삭제할 수 있도록 허용하는 것이 일반적입니다. UI가 즉시 변경되고 앱이 인터넷에 다시 연결되면 서버와 동기화되는 낙관적 업데이트를 구현할 수 있습니다.

---

Handling Complex Syncing and Conflict Resolution

In an offline-first app, conflicts arise when multiple users update the same data while offline and their changes are later synced with the server once the app reconnects to the internet. Handling these conflicts is crucial to maintain data consistency and provide a smooth user experience.

There are different strategies for resolving such conflicts, including:

1. Last Write Wins (LWW)
2. Manual Conflict Resolution
3. Operational Transformation (OT)

I have some examples here for you to check.

1. Last Write Wins (LWW)

In this strategy, the most recent change (based on a timestamp) is accepted as the final value when syncing data. It is simple and works well for many applications, but it may lead to data loss if multiple users edit the same data.

Imagine you are building a note-taking app, if two users edit the same note while offline, the user who syncs their changes last will overwrite the previous user’s changes.

Let’s assume we have a local storage system (using AsyncStorage) and a remote server.

import AsyncStorage from '@react-native-async-storage/async-storage';

// Simulate syncing the note data with the server
const syncNoteWithServer = async (localNote) => {
  try {
    // Fetch the server data
    const response = await fetch('https://api.example.com/note');
    const serverNote = await response.json();

    // Compare timestamps
    if (localNote.updatedAt > serverNote.updatedAt) {
      // Local version is newer, so overwrite the server
      await fetch('https://api.example.com/note', {
        method: 'PUT',
        body: JSON.stringify(localNote),
        headers: { 'Content-Type': 'application/json' },
      });
    } else {
      // Server version is newer, discard local changes
      await AsyncStorage.setItem('note', JSON.stringify(serverNote));
    }
  } catch (error) {
    console.error('Sync failed:', error);
  }
};

// Example usage
const localNote = {
  content: 'This is an updated note.',
  updatedAt: Date.now(), // Timestamp of the last local update
};

syncNoteWithServer(localNote);

In this example:
The app compares the updatedAt timestamp of the local note (stored offline) with the note stored on the server.
If the local note is newer, it overwrites the server version. Otherwise, it discards local changes and updates the app with the server version.

Pros:

1. Simple to implement.
2. Works well for non-critical data.

Cons:

1. May lead to data loss (e.g., if both users made significant changes).

2. Manual Conflict Resolution

With manual conflict resolution, the user is prompted to resolve conflicts when multiple versions of the same data exist. This approach is more user-friendly in scenarios where every change is valuable and users need to decide which data to keep.

Here is a potential case: In a collaborative editing app, two users edit the same document while offline. Once both versions are synced, the user is prompted to choose which version to keep or merge.

import AsyncStorage from '@react-native-async-storage/async-storage';
import { Alert } from 'react-native';

// Simulate syncing the document with the server
const syncDocumentWithServer = async (localDoc) => {
  try {
    // Fetch the server data
    const response = await fetch('https://api.example.com/document');
    const serverDoc = await response.json();

    if (localDoc.updatedAt !== serverDoc.updatedAt) {
      // Conflict detected, ask the user to resolve it
      Alert.alert(
        'Document Conflict',
        'Both you and another user have edited this document. Choose which version to keep.',
        [
          {
            text: 'Keep Local',
            onPress: async () => {
              // Overwrite the server with local changes
              await fetch('https://api.example.com/document', {
                method: 'PUT',
                body: JSON.stringify(localDoc),
                headers: { 'Content-Type': 'application/json' },
              });
            },
          },
          {
            text: 'Keep Server',
            onPress: async () => {
              // Discard local changes and update the app with the server version
              await AsyncStorage.setItem('document', JSON.stringify(serverDoc));
            },
          },
        ],
      );
    } else {
      // No conflict, proceed with syncing
      await AsyncStorage.setItem('document', JSON.stringify(serverDoc));
    }
  } catch (error) {
    console.error('Sync failed:', error);
  }
};

// Example usage
const localDoc = {
  content: 'This is my latest edit.',
  updatedAt: Date.now(), // Timestamp of the last local update
};

syncDocumentWithServer(localDoc);

Here's what's happening
If the updatedAt timestamps differ between the local and server versions, the app alerts the user and asks them to choose which version to keep. The user can decide whether to keep the local or server version.

Pros:

1. Ensures that no important data is lost.
2. Suitable for collaborative apps where user input is valuable.

Cons:

1. Requires user intervention, which can be disruptive.
2. May confuse non-technical users.

3. Operational Transformation (OT)
Operational Transformation is a more advanced technique used in real-time collaboration apps like Google Docs. It automatically merges conflicting changes by transforming operations in a way that preserves both sets of edits. OT allows multiple users to work on the same document simultaneously, and their changes are merged intelligently.

In a document editor app, two users edit different parts of a document. OT ensures that both sets of edits are applied without overwriting each other.

This implementation is a bit complex and require specialized libraries, such as ShareDB or Yjs. Here’s a basic pseudocode example of how OT works:

// Example of transforming two concurrent operations
const operation1 = { type: 'insert', position: 5, value: 'Hello' }; // User 1 adds 'Hello' at position 5
const operation2 = { type: 'insert', position: 3, value: 'World' }; // User 2 adds 'World' at position 3

const transformOperations = (op1, op2) => {
  // If both operations modify different positions, no conflict
  if (op1.position !== op2.position) return [op1, op2];

  // If operations conflict, adjust positions accordingly
  if (op1.position > op2.position) op1.position += op2.value.length;
  else op2.position += op1.value.length;

  return [op1, op2];
};

// Transform the operations to avoid conflicts
const [transformedOp1, transformedOp2] = transformOperations(operation1, operation2);

The positions of the two conflicting operations are adjusted so that they can both be applied without overwriting each other.

Pros:

1. Ideal for real-time collaboration.
2. Automatically resolves conflicts without user intervention.

Cons:

1. Complex to implement.
2. Requires specialized algorithms and libraries.

Conclusion
Each conflict resolution strategy comes with its trade-offs. For simpler apps, Last Write Wins may suffice. However, for collaborative apps where user data is crucial, Manual Conflict Resolution or more advanced techniques like Operational Transformation might be necessary. Choosing the right strategy depends on the complexity of your app and the importance of the data being modified.

---

I plan to create a series of articles that dive deeper into the following key topics:

Optimistic UI Updates – We'll explore how to immediately reflect changes made while offline in the UI, giving users the impression that their actions were successful. This approach greatly improves the user experience.

웹 기반 앱에 서비스 워커 사용 – React Native Web을 통해 웹에 앱을 배포하는 경우 서비스 워커가 프로그레시브 웹에 대한 오프라인 캐싱 및 백그라운드 동기화를 활성화하는 방법을 설명하겠습니다. 앱(PWA). 이를 통해 사용자는 오프라인 상태에서도 리소스와 데이터에 액세스할 수 있습니다.

오프라인 우선 앱의 실제 사용 사례 – Google Maps, Slack, Trello, Notion과 같은 앱이 오프라인 시나리오를 어떻게 처리하는지 자세히 살펴보겠습니다. 이러한 예를 연구하면 오프라인 우선 기술의 실제 적용을 더 잘 이해할 수 있습니다.

오프라인 기능 테스트 – 오프라인 기능 테스트의 중요성을 다루고 React Native Debugger, Expo 도구, Network Link Conditioner(iOS용)와 같은 도구를 검토하여 네트워크 중단을 시뮬레이션합니다. 또한 앱이 오프라인 조건에서 올바르게 작동하는지 확인하기 위해 Jest 및 React Native Testing Library와 같은 라이브러리를 사용하여 테스트를 작성하는 방법도 보여 드리겠습니다.

성능 및 스토리지 고려 사항 – 성능은 단지 속도에 관한 것이 아닙니다. 그것은 또한 사용자 경험에 관한 것입니다. 캐시된 데이터를 줄이고 데이터 만료 정책을 구현하여 로컬 스토리지의 과부하를 방지함으로써 성능을 최적화하기 위한 전략에 대해 논의하겠습니다.

개발자 여러분, 계속 지켜봐 주시기 바랍니다.

---

끝까지 읽어주셔서 감사합니다. 저는 제가 배운 것을 문서화하고 공유하는 것을 정말 좋아합니다. 저는 Instagram과 TikTok에서 공유할 비디오 튜토리얼을 포함하여 더 많은 콘텐츠를 만들 계획입니다. 이곳에 처음 오셨다면 저는 사용자 경험 최적화에 대한 열정을 지닌 소프트웨어 개발자인 Zidane Gimiga입니다. 기술이 우리 삶에 점점 더 통합되면서 모든 사람이 가능한 한 쉽고 접근할 수 있도록 만드는 것이 중요해졌습니다. 더 나은 사용자 친화적인 솔루션을 위해 계속해서 노력하겠습니다.

아, Github에 있어요

위 내용은 React Native로 오프라인 우선 애플리케이션 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!