더 많은
Flutter에서 Back4app과 함께 Isolates를 사용하여 대량의 데이터 처리를 수행하는 방법

12min
소개
Flutter는 크로스 플랫폼 애플리케이션을 구축하기 위한 강력한 프레임워크이지만, 많은 모바일 프레임워크와 마찬가지로 기본적으로 모든 코드를 단일 스레드에서 실행합니다. 이 스레드는 UI 스레드로 알려져 있으며, 애플리케이션의 UI를 렌더링하는 역할을 합니다. 데이터 처리나 파일 처리와 같은 무거운 작업이 UI 스레드에서 발생하면 애플리케이션이 지연되거나 "잭"이 발생하여 사용자 경험이 저하될 수 있습니다.
이를 해결하기 위해 Dart는 Isolates라는 기능을 제공합니다. Isolates는 비싼 계산을 별도의 스레드에서 실행할 수 있게 하여 UI의 반응성을 유지합니다. 이 튜토리얼에서는 Back4app 백엔드에서 가져온 대용량 JSON 파일을 역직렬화하는 것과 같은 무거운 데이터 처리 작업을 처리하기 위해 Flutter 애플리케이션에서 Isolates를 사용하는 방법을 살펴보겠습니다.
전제 조건
이 튜토리얼을 완료하려면 다음이 필요합니다:
Back4app 계정. Back4app.com에서 무료 계정에 가입하세요.
로컬 머신에 Flutter 개발 환경을 설정하세요. Flutter 설치 가이드를 따라 설정하지 않았다면.
Dart, Flutter 위젯 및 비동기 프로그래밍에 대한 기본 지식.
1단계 – Back4app 백엔드 설정하기
Back4app 프로젝트 생성하기: Back4app 계정에 로그인하고 새 프로젝트를 생성하세요.
Parse 클래스 생성하기: 이 튜토리얼을 위해 Record라는 이름의 Parse 클래스를 생성하여 대량의 데이터를 저장하세요:
title (String): 레코드의 제목.
description (String): 레코드의 설명.
metadata (JSON): 레코드와 관련된 대량의 메타데이터 콘텐츠.
샘플 데이터로 클래스 채우기: Record 클래스에 대량의 JSON 객체가 포함된 여러 레코드를 추가하세요. 이는 실제 앱에서 지연을 유발할 수 있는 데이터 처리 유형을 시뮬레이션합니다.
Back4app 자격 증명 가져오기: 프로젝트 설정으로 이동하여 Flutter 앱을 Back4app에 연결하는 데 필요한 애플리케이션 ID와 클라이언트 키를 검색하세요.
2단계 – Flutter 프로젝트 설정하기
새 Flutter 프로젝트 만들기: 터미널 또는 명령 프롬프트를 열고 다음을 실행하세요:
Bash
flutter create isolate_example
flutter create isolate_example
﻿
종속성 추가하기: pubspec.yaml을 열고 다음 종속성을 추가하세요:
YAML
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: latest_version
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: latest_version
﻿
다음 명령어를 실행하세요: flutter pub get 이 종속성을 설치합니다.
앱에서 Parse 초기화하기: lib/main.dart, Parse SDK를 가져오고 main 함수에서 초기화하세요:
Dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk_flutter.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  const keyApplicationId = 'YOUR_BACK4APP_APP_ID';
  const keyClientKey = 'YOUR_BACK4APP_CLIENT_KEY';
  const keyParseServerUrl = 'https://parseapi.back4app.com';

  await Parse().initialize(keyApplicationId, keyParseServerUrl,
      clientKey: keyClientKey, autoSendSessionId: true);

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: RecordScreen(),
    );
  }
}
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk_flutter.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  const keyApplicationId = 'YOUR_BACK4APP_APP_ID';
  const keyClientKey = 'YOUR_BACK4APP_CLIENT_KEY';
  const keyParseServerUrl = 'https://parseapi.back4app.com';

  await Parse().initialize(keyApplicationId, keyParseServerUrl,
      clientKey: keyClientKey, autoSendSessionId: true);

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: RecordScreen(),
    );
  }
}
﻿
'YOUR_BACK4APP_APP_ID''YOUR_BACK4APP_CLIENT_KEY'를 실제 Back4app 자격 증명으로 교체하십시오.
3단계 – Back4app에서 데이터 가져오기
RecordScreen 위젯 만들기: lib/main.dart, Back4app에서 데이터를 가져오는 새 화면을 만듭니다:
Dart
class RecordScreen extends StatefulWidget {
  @override
  _RecordScreenState createState() => _RecordScreenState();
}

class _RecordScreenState extends State<RecordScreen> {
  List<ParseObject>? records;
  bool isLoading = true;

  @override
  void initState() {
    super.initState();
    fetchRecords();
  }

  Future<void> fetchRecords() async {
    final query = QueryBuilder<ParseObject>(ParseObject('Record'));
    final response = await query.query();

    if (response.success && response.results != null) {
      setState(() {
        records = response.results as List<ParseObject>;
        isLoading = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Records')),
      body: isLoading
          ? Center(child: CircularProgressIndicator())
          : ListView.builder(
              itemCount: records!.length,
              itemBuilder: (context, index) {
                final record = records![index];
                return ListTile(
                  title: Text(record.get<String>('title') ?? 'No Title'),
                  subtitle: Text(record.get<String>('description') ?? 'No Description'),
                );
              },
            ),
    );
  }
}
class RecordScreen extends StatefulWidget {
  @override
  _RecordScreenState createState() => _RecordScreenState();
}

class _RecordScreenState extends State<RecordScreen> {
  List<ParseObject>? records;
  bool isLoading = true;

  @override
  void initState() {
    super.initState();
    fetchRecords();
  }

  Future<void> fetchRecords() async {
    final query = QueryBuilder<ParseObject>(ParseObject('Record'));
    final response = await query.query();

    if (response.success && response.results != null) {
      setState(() {
        records = response.results as List<ParseObject>;
        isLoading = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Records')),
      body: isLoading
          ? Center(child: CircularProgressIndicator())
          : ListView.builder(
              itemCount: records!.length,
              itemBuilder: (context, index) {
                final record = records![index];
                return ListTile(
                  title: Text(record.get<String>('title') ?? 'No Title'),
                  subtitle: Text(record.get<String>('description') ?? 'No Description'),
                );
              },
            ),
    );
  }
}
﻿
이 코드는 Back4app의 Record 클래스에서 모든 레코드를 가져와 목록에 표시합니다.
4단계 – 무거운 데이터 처리를 Isolate로 오프로드하기
대용량 JSON을 역직렬화하기 위해 Isolate 사용: 각 레코드의 metadata 필드에 역직렬화해야 하는 대용량 JSON 객체가 포함되어 있다고 가정합니다. UI 스레드를 차단하지 않기 위해 이 작업을 수행하기 위해 isolate를 사용할 것입니다.
Dart
import 'dart:isolate';
import 'dart:convert';

Future<Map<String, dynamic>> deserializeJsonInIsolate(String jsonString) async {
  // Spawning an isolate to perform JSON decoding
  final result = await Isolate.run(() {
    return jsonDecode(jsonString) as Map<String, dynamic>;
  });
  return result;
}

Future<void> processRecord(ParseObject record) async {
  String metadata = record.get<String>('metadata') ?? '{}';

  // Offload JSON deserialization to an isolate
  Map<String, dynamic> decodedData = await deserializeJsonInIsolate(metadata);

  // Do something with the decoded data
  print('Processed metadata for ${record.get<String>('title')}');
}
import 'dart:isolate';
import 'dart:convert';

Future<Map<String, dynamic>> deserializeJsonInIsolate(String jsonString) async {
  // Spawning an isolate to perform JSON decoding
  final result = await Isolate.run(() {
    return jsonDecode(jsonString) as Map<String, dynamic>;
  });
  return result;
}

Future<void> processRecord(ParseObject record) async {
  String metadata = record.get<String>('metadata') ?? '{}';

  // Offload JSON deserialization to an isolate
  Map<String, dynamic> decodedData = await deserializeJsonInIsolate(metadata);

  // Do something with the decoded data
  print('Processed metadata for ${record.get<String>('title')}');
}
﻿
앱에 격리 처리 통합: RecordScreen 위젯을 업데이트하여 각 레코드의 메타데이터를 격리를 사용하여 처리합니다:
Dart
class _RecordScreenState extends State<RecordScreen> {
  List<ParseObject>? records;
  bool isLoading = true;

  @override
  void initState() {
    super.initState();
    fetchAndProcessRecords();
  }

  Future<void> fetchAndProcessRecords() async {
    final query = QueryBuilder<ParseObject>(ParseObject('Record'));
    final response = await query.query();

    if (response.success && response.results != null) {
      List<ParseObject> fetchedRecords = response.results as List<ParseObject>;

      // Process each record's metadata using an isolate
      for (var record in fetchedRecords) {
        await processRecord(record);
      }

      setState(() {
        records = fetchedRecords;
        isLoading = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Records')),
      body: isLoading
          ? Center(child: CircularProgressIndicator())
          : ListView.builder(
              itemCount: records!.length,
              itemBuilder: (context, index) {
                final record = records![index];
                return ListTile(
                  title: Text(record.get<String>('title') ?? 'No Title'),
                  subtitle: Text(record.get<String>('description') ?? 'No Description'),
                );
              },
            ),
    );
  }
}
class _RecordScreenState extends State<RecordScreen> {
  List<ParseObject>? records;
  bool isLoading = true;

  @override
  void initState() {
    super.initState();
    fetchAndProcessRecords();
  }

  Future<void> fetchAndProcessRecords() async {
    final query = QueryBuilder<ParseObject>(ParseObject('Record'));
    final response = await query.query();

    if (response.success && response.results != null) {
      List<ParseObject> fetchedRecords = response.results as List<ParseObject>;

      // Process each record's metadata using an isolate
      for (var record in fetchedRecords) {
        await processRecord(record);
      }

      setState(() {
        records = fetchedRecords;
        isLoading = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Records')),
      body: isLoading
          ? Center(child: CircularProgressIndicator())
          : ListView.builder(
              itemCount: records!.length,
              itemBuilder: (context, index) {
                final record = records![index];
                return ListTile(
                  title: Text(record.get<String>('title') ?? 'No Title'),
                  subtitle: Text(record.get<String>('description') ?? 'No Description'),
                );
              },
            ),
    );
  }
}
﻿
이 구현은 Back4app에서 레코드를 가져오고, 무거운 JSON 역직렬화 작업을 격리로 오프로드하며, 처리가 완료되면 UI를 업데이트합니다.
5단계 – 앱 테스트 및 실행
앱 실행하기 flutter run. Back4app에서 가져온 레코드 목록이 표시되어야 합니다. 각 레코드의 메타데이터는 별도의 격리된 스레드에서 처리되어 UI가 부드럽고 반응성이 유지됩니다.
성능 확인하기 메타데이터 필드에서 큰 JSON 파일로 테스트하여 확인하세요. 격리된 스레드를 사용하여 지연을 방지하고 UI가 반응성을 유지하는 방법을 관찰하세요.
결론
이 튜토리얼에서는 Flutter에서 격리된 스레드를 사용하여 큰 JSON 파일을 역직렬화하는 것과 같은 무거운 데이터 처리 작업을 처리하는 방법을 배웠습니다. 이러한 작업을 격리된 스레드로 오프로드함으로써 UI 스레드를 렌더링을 처리할 수 있도록 유지하여 더 부드럽고 반응성이 뛰어난 앱을 만들 수 있습니다. Back4app을 백엔드로 통합하면 데이터를 효율적으로 관리하고 검색할 수 있으며, Dart의 격리 모델은 복잡한 작업을 처리할 때에도 앱의 성능을 유지하도록 보장합니다.
Back4app과 함께 Flutter를 사용하는 방법에 대한 자세한 정보는 Back4app 문서 및 Flutter 문서를 확인하세요. 즐거운 코딩 되세요!
업데이트됨 24 Jan 2025
이 페이지가 도움이 되었습니까?
실시간 자바스크립트 애플리케이션 개발
Back4app으로 Flutter DevTools 확장 만들기 및 사용하기