[flutter] http_mock_adapter를 활용한 플러터 애플리케이션의 UX 개선 방법

05 Dec 2023

flutter

웹 애플리케이션을 개발하다보면 API 호출을 위해 서버와 통신해야 할 때가 많이 있습니다. 하지만 개발 중인 기능에 따라 실제 서버와 통신하면서 개발하는 것은 번거로운 일일 수 있습니다. 이런 경우에는 http_mock_adapter를 사용하여 가짜 응답을 반환하여 빠르고 안정적인 개발을 할 수 있습니다.

1. http_mock_adapter란?

http_mock_adapter는 플러터 HTTP 클라이언트에 대한 가짜 응답을 제공하는 라이브러리입니다. 실제 API 호출 없이 개발할 수 있어서 개발자들에게 큰 편의를 제공합니다.

2. http_mock_adapter 사용 방법

2.1. 의존성 추가

먼저, 프로젝트의 pubspec.yaml 파일에 http_mock_adapter 패키지를 의존성에 추가해야합니다.

dependencies:
  flutter:
    sdk: flutter
  http:
  http_mock_adapter:

2.2. 가짜 응답 생성

다음으로, 가짜 응답을 생성합니다. MockAdapter 객체를 사용하여 응답을 정의하고 반환할 수 있습니다.

import 'package:http_mock_adapter/http_mock_adapter.dart';

void main() {
  final mockAdapter = MockAdapter();

  // 응답을 정의합니다.
  mockAdapter.onGet('/api/posts').reply(200, {'message': 'success'});

  // 가짜 응답을 사용하는 API 호출 테스트
  final response = await http.get(Uri.parse('/api/posts'));

  // 응답 확인
  assert(response.statusCode == 200);
  assert(response.body == '{"message": "success"}');
}

2.3. 플러터 애플리케이션에 적용

가짜 응답을 생성하고 테스트하는 방법을 확인했으니, 이제 플러터 애플리케이션에서 실제로 사용해보겠습니다.

import 'package:flutter/material.dart';
import 'package:http_mock_adapter/http_mock_adapter.dart';
import 'package:http/http.dart' as http;

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  final mockAdapter = MockAdapter();

  @override
  Widget build(BuildContext context) {
    mockAdapter.onGet('/api/posts').reply(200, {'message': 'success'});

    return MaterialApp(
      title: 'HTTP Mock Adapter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('HTTP Mock Adapter Demo'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () async {
              final response = await http.get(Uri.parse('/api/posts'));
              final decodedResponse = json.decode(response.body);
              final message = decodedResponse['message'];

              showDialog(
                context: context,
                builder: (context) {
                  return AlertDialog(
                    title: Text('Response'),
                    content: Text('Message: $message'),
                    actions: [
                      ElevatedButton(
                        child: Text('OK'),
                        onPressed: () {
                          Navigator.of(context).pop();
                        },
                      ),
                    ],
                  );
                },
              );
            },
            child: Text('Send Request'),
          ),
        ),
      ),
    );
  }
}

플러터 애플리케이션에 http_mock_adapter를 적용하였습니다. 위 코드에서는 onGet() 메소드를 사용하여 가짜 응답을 정의하고, http.get() 메소드를 사용하여 실제 API 호출 대신 가짜 응답을 받아옵니다.

3. 결과 확인

실행하면 ‘Send Request’ 버튼이 표시되며, 버튼을 누르면 가짜 응답이 반환되는 AlertDialog가 표시됩니다.

이제 http_mock_adapter를 사용하여 가짜 응답을 반환하므로 실제 서버와 통신을 필요로하지 않는 개발환경에서도 빠르고 안정적인 애플리케이션의 개발을 진행할 수 있습니다.

4. 결론

API 호출을 위해 서버와 통신하는 기능을 개발할 때는 http_mock_adapter를 사용하여 가짜 응답을 제공하는 것이 개발 효율성을 높이고 안정성을 보장하는 좋은 방법입니다. API를 호출하는 기능을 개발할 때마다 서버와 통신하지 않아도 되므로 테스트 및 디버깅에도 매우 유용합니다.