더 많은
플러터에서 Future.wait와 Back4app을 사용하여 비동기 작업 최적화하는 방법

7min
소개
비동기 프로그래밍은 현대 앱 개발에서 필수적이며, 특히 여러 소스에서 데이터를 가져오거나 여러 네트워크 요청을 수행할 때 중요합니다. 그러나 여러 비동기 호출을 효율적으로 처리하는 것은 도전적일 수 있습니다. Flutter에서는 Future.wait 메서드가 여러 Futures를 관리하는 강력한 방법을 제공합니다. 이를 통해 앱은 여러 비동기 작업을 동시에 효율적으로 대기할 수 있습니다.
이 튜토리얼에서는 Flutter에서 Future.wait를 사용하여 여러 비동기 작업을 처리할 때 앱의 성능을 최적화하는 방법을 배웁니다. 이 기술을 Back4app과 통합하여 백엔드에서 동시 데이터 가져오기를 수행하고 결과를 저장하며 사용자 대기 시간을 크게 줄일 수 있습니다.
전제 조건
이 튜토리얼을 완료하려면 다음이 필요합니다:
Back4app 계정. Back4app.com에서 무료 계정에 가입하세요..
로컬 머신에 Flutter 개발 환경이 설정되어 있어야 합니다. 아직 설정하지 않았다면 Flutter 설치 가이드를 따르세요..
Flutter에서 비동기 프로그래밍에 대한 기본 지식과 Back4app을 백엔드 서비스로 사용하는 방법. Back4app이 처음이라면 Back4app 시작하기 가이드를 확인하세요..
1단계 – Back4app 백엔드 설정하기
Back4app 프로젝트 생성하기: Back4app 계정에 로그인하고 새 프로젝트를 생성합니다.
Parse 클래스 생성하기: Back4app 프로젝트에서 Task와 Project라는 두 개의 새로운 Parse 클래스를 생성합니다.
 Task 클래스는 다음과 같은 필드를 가져야 합니다: name (String) 및 completed (Boolean).
 Project 클래스는 다음과 같은 필드를 가져야 합니다: title (String) 및 description (String).
샘플 데이터 추가하기: 이 클래스에 샘플 데이터를 채워 넣습니다. 이 데이터는 Flutter 앱에서 Future.wait를 사용하여 동시에 가져올 것입니다.
Back4app 자격 증명 가져오기: 프로젝트 설정으로 이동하여 애플리케이션 ID와 클라이언트 키를 가져옵니다. 이 정보는 Flutter 앱을 Back4app에 연결하는 데 필요합니다.
2단계 – Flutter 프로젝트 설정하기
새 Flutter 프로젝트 생성하기: 터미널 또는 명령 프롬프트를 열고 다음을 실행합니다:
의존성 추가하기: pubspec.yaml을 열고 다음 의존성을 추가합니다:
앱에서 Parse 초기화하기: lib/main.dart, Parse SDK를 가져오고 main 함수에서 초기화합니다:
Text
Text
 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());
 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());
﻿
'YOUR_BACK4APP_APP_ID'와 'YOUR_BACK4APP_CLIENT_KEY'를 실제 Back4app 자격 증명으로 교체하세요.
3단계 – Future.wait를 사용하여 데이터 가져오기
TaskProjectScreen 위젯 생성: lib/main.dart, 두 개의 Task와 Project 클래스를 동시에 가져오는 새로운 위젯을 추가하세요:
Dart
class TaskProjectScreen extends StatefulWidget {
  @override
  _TaskProjectScreenState createState() => _TaskProjectScreenState();
}

class _TaskProjectScreenState extends State<TaskProjectScreen> {
  List<ParseObject>? tasks;
  List<ParseObject>? projects;
  String? errorMessage;

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

  Future<void> fetchData() async {
    try {
      // Fetch tasks and projects concurrently
      final futures = [
        _getTasks(),
        _getProjects(),
      ];

      final results = await Future.wait(futures);

      setState(() {
        tasks = results[0] as List<ParseObject>;
        projects = results[1] as List<ParseObject>;
      });
    } catch (e) {
      setState(() {
        errorMessage = e.toString();
      });
    }
  }

  Future<List<ParseObject>> _getTasks() async {
    final query = QueryBuilder<ParseObject>(ParseObject('Task'));
    final response = await query.query();

    if (response.success && response.results != null) {
      return response.results as List<ParseObject>;
    } else {
      throw Exception('Failed to load tasks');
    }
  }

  Future<List<ParseObject>> _getProjects() async {
    final query = QueryBuilder<ParseObject>(ParseObject('Project'));
    final response = await query.query();

    if (response.success && response.results != null) {
      return response.results as List<ParseObject>;
    } else {
      throw Exception('Failed to load projects');
    }
  }

  @override
  Widget build(BuildContext context) {
    if (errorMessage != null) {
      return Center(child: Text('Error: $errorMessage'));
    }

    if (tasks == null || projects == null) {
      return Center(child: CircularProgressIndicator());
    }

    return ListView(
      children: [
        ListTile(title: Text('Tasks')),
        ...tasks!.map((task) => ListTile(
              title: Text(task.get<String>('name') ?? 'No name'),
              subtitle: Text('Completed: ${task.get<bool>('completed') ? 'Yes' : 'No'}'),
            )),
        ListTile(title: Text('Projects')),
        ...projects!.map((project) => ListTile(
              title: Text(project.get<String>('title') ?? 'No title'),
              subtitle: Text(project.get<String>('description') ?? 'No description'),
            )),
      ],
    );
  }
}
class TaskProjectScreen extends StatefulWidget {
  @override
  _TaskProjectScreenState createState() => _TaskProjectScreenState();
}

class _TaskProjectScreenState extends State<TaskProjectScreen> {
  List<ParseObject>? tasks;
  List<ParseObject>? projects;
  String? errorMessage;

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

  Future<void> fetchData() async {
    try {
      // Fetch tasks and projects concurrently
      final futures = [
        _getTasks(),
        _getProjects(),
      ];

      final results = await Future.wait(futures);

      setState(() {
        tasks = results[0] as List<ParseObject>;
        projects = results[1] as List<ParseObject>;
      });
    } catch (e) {
      setState(() {
        errorMessage = e.toString();
      });
    }
  }

  Future<List<ParseObject>> _getTasks() async {
    final query = QueryBuilder<ParseObject>(ParseObject('Task'));
    final response = await query.query();

    if (response.success && response.results != null) {
      return response.results as List<ParseObject>;
    } else {
      throw Exception('Failed to load tasks');
    }
  }

  Future<List<ParseObject>> _getProjects() async {
    final query = QueryBuilder<ParseObject>(ParseObject('Project'));
    final response = await query.query();

    if (response.success && response.results != null) {
      return response.results as List<ParseObject>;
    } else {
      throw Exception('Failed to load projects');
    }
  }

  @override
  Widget build(BuildContext context) {
    if (errorMessage != null) {
      return Center(child: Text('Error: $errorMessage'));
    }

    if (tasks == null || projects == null) {
      return Center(child: CircularProgressIndicator());
    }

    return ListView(
      children: [
        ListTile(title: Text('Tasks')),
        ...tasks!.map((task) => ListTile(
              title: Text(task.get<String>('name') ?? 'No name'),
              subtitle: Text('Completed: ${task.get<bool>('completed') ? 'Yes' : 'No'}'),
            )),
        ListTile(title: Text('Projects')),
        ...projects!.map((project) => ListTile(
              title: Text(project.get<String>('title') ?? 'No title'),
              subtitle: Text(project.get<String>('description') ?? 'No description'),
            )),
      ],
    );
  }
}
﻿
이 위젯은 Future.wait를 사용하여 작업과 프로젝트를 동시에 가져와 총 대기 시간을 줄입니다.
4단계 – 앱 테스트 및 실행
앱을 다음을 사용하여 실행하세요: flutter run.
화면에 작업 및 프로젝트 목록이 표시되어야 합니다. 두 데이터 세트는 동시에 가져와지므로 데이터 검색 프로세스가 더 빠르고 효율적입니다.
결론
이 튜토리얼에서는 Future.wait를 사용하여 Flutter 앱에서 비동기 작업을 최적화하는 방법을 배웠습니다. 여러 소스에서 데이터를 동시에 가져오고 Back4app과 통합함으로써 앱의 반응성을 높이고 사용자 대기 시간을 줄였습니다.
강력한 백엔드인 Back4app과 함께 Future.wait를 사용하면 여러 비동기 작업을 효율적으로 관리하고 Flutter 애플리케이션의 성능을 향상시킬 수 있습니다. Flutter와 함께 Back4app을 사용하는 방법에 대한 자세한 내용은 Back4app Flutter 문서. 코딩을 즐기세요!
업데이트됨 24 Jan 2025
이 페이지가 도움이 되었습니까?
Flutter Completers를 Back4app의 백엔드와 함께 사용하는 방법
실시간 자바스크립트 애플리케이션 개발