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

소개 flutter는 크로스 플랫폼 애플리케이션을 구축하기 위한 강력한 프레임워크이지만, 많은 모바일 프레임워크와 마찬가지로 기본적으로 모든 코드를 단일 스레드에서 실행합니다 이 스레드는 ui 스레드로 알려져 있으며, 애플리케이션의 ui를 렌더링하는 역할을 합니다 데이터 처리나 파일 처리와 같은 무거운 작업이 ui 스레드에서 발생하면 애플리케이션이 지연되거나 "잭"이 발생하여 사용자 경험이 저하될 수 있습니다 이를 해결하기 위해 dart는 isolates 라는 기능을 제공합니다 isolates는 비싼 계산을 별도의 스레드에서 실행할 수 있게 하여 ui의 반응성을 유지합니다 이 튜토리얼에서는 back4app 백엔드에서 가져온 대용량 json 파일을 역직렬화하는 것과 같은 무거운 데이터 처리 작업을 처리하기 위해 flutter 애플리케이션에서 isolates를 사용하는 방법을 살펴보겠습니다 전제 조건 이 튜토리얼을 완료하려면 다음이 필요합니다 back4app 계정 back4app com https //www back4app com 에서 무료 계정에 가입하세요 로컬 머신에 flutter 개발 환경을 설정하세요 flutter 설치 가이드 https //flutter dev/docs/get started/install 를 따라 설정하지 않았다면 dart, flutter 위젯 및 비동기 프로그래밍에 대한 기본 지식 1단계 – back4app 백엔드 설정하기 back4app 프로젝트 생성하기 back4app 계정 https //www back4app com/ 에 로그인하고 새 프로젝트를 생성하세요 parse 클래스 생성하기 이 튜토리얼을 위해 record 라는 이름의 parse 클래스를 생성하여 대량의 데이터를 저장하세요 title (string) 레코드의 제목 description (string) 레코드의 설명 metadata (json) 레코드와 관련된 대량의 메타데이터 콘텐츠 샘플 데이터로 클래스 채우기 record 클래스에 대량의 json 객체가 포함된 여러 레코드를 추가하세요 이는 실제 앱에서 지연을 유발할 수 있는 데이터 처리 유형을 시뮬레이션합니다 back4app 자격 증명 가져오기 프로젝트 설정으로 이동하여 flutter 앱을 back4app에 연결하는 데 필요한 애플리케이션 id와 클라이언트 키를 검색하세요 2단계 – flutter 프로젝트 설정하기 새 flutter 프로젝트 만들기 터미널 또는 명령 프롬프트를 열고 다음을 실행하세요 flutter create isolate example 종속성 추가하기 pubspec yaml 을 열고 다음 종속성을 추가하세요 dependencies flutter sdk flutter parse server sdk flutter latest version 다음 명령어를 실행하세요 flutter pub get 이 종속성을 설치합니다 앱에서 parse 초기화하기 lib/main dart , parse sdk를 가져오고 main 함수에서 초기화하세요 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에서 데이터를 가져오는 새 화면을 만듭니다 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를 사용할 것입니다 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 위젯을 업데이트하여 각 레코드의 메타데이터를 격리를 사용하여 처리합니다 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 문서 https //www back4app com/docs 및 flutter 문서 https //flutter dev/docs 를 확인하세요 즐거운 코딩 되세요!