[flutter] 플러터에서 http_mock_adapter를 활용한 로딩 상태 모의

05 Dec 2023

flutter

플러터(Flutter)는 크로스 플랫폼 앱 개발을 위한 프레임워크로서, 네트워크 요청 처리가 필요한 앱 개발시 많이 사용됩니다. 네트워크 요청을 처리할 때는 종종 로딩 상태를 표시하는 기능이 필요한데, http_mock_adapter를 사용하면 로딩 상태를 모킹하여 개발 및 테스트를 더욱 편리하게 진행할 수 있습니다.

http_mock_adapter란?

http_mock_adapter는 HTTP 요청에 대한 응답을 가상으로 모의하여 실제 서버와 연결하지 않고 개발 및 테스트를 할 수 있는 패키지입니다. 이를 활용하면 서버가 아직 준비되지 않았거나, API의 응답을 직접 제어하고 싶은 경우에 매우 유용합니다.

플러터에서 http_mock_adapter 사용하기

먼저, http 패키지를 사용하기 위해 pubspec.yaml 파일에 의존성을 추가하세요:

dependencies:
  flutter:
    sdk: flutter
  http: ^0.13.4
  http_mock_adapter: ^1.3.0

다음으로, http_mock_adapter에서 제공하는 MockAdapter 클래스를 사용하여 가상의 응답을 생성합니다. 예를 들어, 다음과 같이 작성할 수 있습니다:

import 'package:http_mock_adapter/http_mock_adapter.dart';

void main() {
  final mockAdapter = MockAdapter();
  
  mockAdapter.onGet('/api/users')
    .reply(200, [
      {"id": 1, "name": "User 1"},
      {"id": 2, "name": "User 2"},
      {"id": 3, "name": "User 3"}
    ]);
  
  final url = Uri.parse('/api/users');
  final response = await http.get(url);
  
  print(response.statusCode); // 200
  print(response.body); // [{"id": 1, "name": "User 1"} , {"id": 2, "name": "User 2"}, {"id": 3, "name": "User 3"}]
}

위의 예제에서는 /api/users 엔드포인트로 GET 요청이 왔을 때, 200 상태 코드와 사용자 목록을 응답으로 보내도록 설정되어 있습니다.

이제 앱에서 http 패키지를 사용하여 네트워크 요청을 처리할 때, MockAdapter를 사용하도록 설정하면 됩니다. 다음은 플러터에서 http 패키지를 사용하는 경우의 예제입니다:

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

void main() async {
  final mockAdapter = MockAdapter();
  http.Client httpClient = http.Client();
  
  // httpClient의 adapter로 mockAdapter를 설정합니다.
  httpClient = mockAdapter.attachTo(httpClient);
  
  final url = Uri.parse('/api/users');
  final response = await httpClient.get(url);
  
  print(response.statusCode); // 200
  print(response.body); // [{"id": 1, "name": "User 1"}, {"id": 2, "name": "User 2"}, {"id": 3, "name": "User 3"}]
}

위의 예제에서는 http 패키지를 사용하여 GET 요청을 보내고, mockAdapter를 httpClient의 어댑터로 설정하여 가상의 응답을 받도록 설정하였습니다.

결론

http_mock_adapter를 사용하면 플러터 앱 개발 시 네트워크 요청의 로딩 상태를 모킹하여 개발 및 테스트를 더욱 편리하게 진행할 수 있습니다. 위의 예제를 참고하여 http_mock_adapter를 활용해보세요!

http_mock_adapter란?

플러터에서 http_mock_adapter 사용하기

결론

참고 자료