더 많은
Flutter에서 Back4app 백엔드를 이용한 패턴 매칭 이해하기

10min
소개
패턴 매칭은 Dart 3에 도입된 강력한 기능으로, 개발자가 애플리케이션 내에서 특정 데이터 구조를 쉽게 식별하고 추출할 수 있도록 합니다. Kotlin, Swift 또는 JavaScript와 같은 언어에 대한 경험이 있다면 패턴 매칭에 이미 익숙할 수 있습니다. 그러나 Dart에서 이 개념이 처음이라면, 이 튜토리얼이 여러분이 편안하게 사용할 수 있도록 도와줄 것입니다. 우리는 패턴 매칭을 탐구하고, Back4app을 백엔드로 통합하여 데이터를 관리하고 저장하는 실용적인 예제를 통해 Flutter 앱에서 사용하는 방법을 살펴볼 것입니다.
전제 조건
시작하기 전에 다음 사항을 확인하세요:
Back4app 계정. Back4app.com에서 무료 계정에 가입하세요.
로컬 머신에 Flutter 개발 환경이 설정되어 있어야 합니다. 아직 설정하지 않았다면 Flutter 설치 가이드를 따르세요.
Dart, Flutter 위젯 및 백엔드 서비스로서 Back4app 사용에 대한 기본 지식.
1단계 – Back4app 백엔드 설정하기
Back4app 프로젝트 생성하기: Back4app 계정에 로그인하고 새 프로젝트를 생성하세요.
Parse 클래스 생성하기: 이 튜토리얼을 위해 사용자 정보를 저장할 UserData라는 Parse 클래스를 생성하세요:
username (문자열): 사용자의 사용자 이름.
age (숫자): 사용자의 나이.
preferences (JSON): 사용자 선호도를 저장하는 JSON 객체.
Back4app 자격 증명 가져오기: 프로젝트 설정으로 이동하여 Flutter 앱을 Back4app에 연결하는 데 필요한 Application ID와 Client Key를 가져오세요.
2단계 – Flutter 프로젝트 설정
새 Flutter 프로젝트 만들기: 터미널 또는 명령 프롬프트를 열고 다음을 실행하세요:
Bash
flutter create pattern_matching_example
flutter create pattern_matching_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를 초기화합니다:
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: PatternMatchingScreen(),
    );
  }
}
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: PatternMatchingScreen(),
    );
  }
}
﻿
'YOUR_BACK4APP_APP_ID' 'YOUR_BACK4APP_CLIENT_KEY'를 실제 Back4app 자격 증명으로 교체하세요.
3단계 – 패턴 매칭 구현
PatternMatchingScreen 위젯 생성: lib/main.dart, 사용자 데이터를 검색하고 처리하여 패턴 매칭을 보여주는 새 위젯을 생성합니다:
Dart
class PatternMatchingScreen extends StatefulWidget {
  @override
  _PatternMatchingScreenState createState() => _PatternMatchingScreenState();
}

class _PatternMatchingScreenState extends State<PatternMatchingScreen> {
  String _message = 'Fetching data...';

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

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

    if (response.success && response.results != null) {
      for (var result in response.results!) {
        // Using pattern matching to destructure and validate data
        if (result is ParseObject) {
          final userData = {
            'username': result.get<String>('username'),
            'age': result.get<int>('age'),
            'preferences': result.get<Map<String, dynamic>>('preferences')
          };

          switch (userData) {
            case {
              'username': String name,
              'age': int age when age >= 18,
              'preferences': {'theme': String theme}
            }:
              setState(() {
                _message = 'Welcome, $name! You are $age years old and prefer the $theme theme.';
              });
              break;

            default:
              setState(() {
                _message = 'Data does not match the required pattern.';
              });
              break;
          }
        }
      }
    } else {
      setState(() {
        _message = 'Failed to retrieve data.';
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Pattern Matching Example')),
      body: Center(child: Text(_message)),
    );
  }
}
class PatternMatchingScreen extends StatefulWidget {
  @override
  _PatternMatchingScreenState createState() => _PatternMatchingScreenState();
}

class _PatternMatchingScreenState extends State<PatternMatchingScreen> {
  String _message = 'Fetching data...';

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

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

    if (response.success && response.results != null) {
      for (var result in response.results!) {
        // Using pattern matching to destructure and validate data
        if (result is ParseObject) {
          final userData = {
            'username': result.get<String>('username'),
            'age': result.get<int>('age'),
            'preferences': result.get<Map<String, dynamic>>('preferences')
          };

          switch (userData) {
            case {
              'username': String name,
              'age': int age when age >= 18,
              'preferences': {'theme': String theme}
            }:
              setState(() {
                _message = 'Welcome, $name! You are $age years old and prefer the $theme theme.';
              });
              break;

            default:
              setState(() {
                _message = 'Data does not match the required pattern.';
              });
              break;
          }
        }
      }
    } else {
      setState(() {
        _message = 'Failed to retrieve data.';
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Pattern Matching Example')),
      body: Center(child: Text(_message)),
    );
  }
}
﻿
이 코드는 Back4app에서 사용자 데이터를 가져오고, 패턴 매칭을 적용하여 데이터를 검증하고 구조를 분해한 다음, 일치하는 데이터를 기반으로 개인화된 메시지를 표시합니다.
4단계 – 앱 실행하기
앱을 실행하세요 flutter run. 패턴 매칭을 사용하여 검색하고 일치시킨 데이터를 기반으로 화면에 메시지가 표시됩니다.
Back4app에서 데이터 확인하기 Back4app 대시보드에 로그인하여 UserData 클래스를 확인하세요. 다양한 패턴이 어떻게 일치하는지와 앱이 어떻게 반응하는지 확인하기 위해 데이터를 조정할 수 있습니다.
결론
이 튜토리얼에서는 Dart의 패턴 매칭 개념과 이를 Flutter 앱 내에서 어떻게 적용할 수 있는지 살펴보았습니다. Back4app을 백엔드로 통합하여 패턴 매칭을 사용하여 데이터를 가져오고 처리하는 실용적인 예제를 보여주었습니다. 이 접근 방식은 데이터를 효율적으로 검증하고 구조를 분해할 수 있게 하여 Flutter 앱을 더 견고하고 유지 관리하기 쉽게 만듭니다.
Dart 패턴에 대한 더 많은 정보는 Dart 문서, 그리고 백엔드 통합 팁은 Back4app 문서. 코딩을 즐기세요!
업데이트됨 24 Jan 2025
이 페이지가 도움이 되었습니까?
플러터에서 피드백 컴포넌트를 사용하여 사용자 피드백 수집하기 및 Back4app에 데이터 저장하기
Flutter에서 Uint8List 사용 및 Back4app을 사용하여 백엔드에 유지하는 방법