[flutter] get_it를 사용하여 플러터 앱에서 HTTP 요청을 어떻게 처리하는가?

30 Nov 2023

flutter

이번 블로그에서는 Flutter 애플리케이션에서 HTTP 요청을 처리하는 방법에 대해 알아보겠습니다. get_it은 의존성 주입(Dependency Injection)을 쉽게 구현할 수 있게 해주는 라이브러리입니다.

get_it 라이브러리 추가하기

먼저, 프로젝트에 get_it 라이브러리를 추가해야 합니다. pubspec.yaml 파일에 다음과 같은 의존성을 추가합니다:

dependencies:
  get_it: ^X.X.X

여기서 X.X.X는 사용하는 get_it 라이브러리의 버전입니다.

이후 터미널에서 flutter packages get 명령어를 실행하여 의존성을 업데이트합니다.

HTTP 클라이언트 생성하기

HTTP 요청을 처리하기 위해 HTTP 클라이언트를 생성해야 합니다. 여기서는 http 패키지를 사용하여 간단한 HTTP 클라이언트를 생성하는 예시를 보여드리겠습니다.

먼저, http 패키지를 추가합니다. pubspec.yaml 파일에 다음과 같은 의존성을 추가합니다:

dependencies:
  http: ^X.X.X

여기서 X.X.X는 사용하는 http 패키지의 버전입니다.

클라이언트를 생성하기 위해 다음 코드를 작성합니다:

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

class MyHttpClient {
  final http.Client _client = http.Client();

  Future<http.Response> get(String url) =>
    _client.get(Uri.parse(url));
    
  Future<http.Response> post(String url, {Map<String, String>? headers, dynamic body}) =>
    _client.post(Uri.parse(url), headers: headers, body: body);
    
  // 다른 HTTP 메소드들도 추가 가능
}

위 코드에서는 http 패키지의 http.Client를 사용하여 GET 및 POST 요청을 처리하는 메소드를 작성했습니다.

get_it으로 의존성 주입 설정하기

이제 get_it을 사용하여 위에서 작성한 MyHttpClient를 의존성으로 주입해보겠습니다.

먼저, get_it 라이브러리를 가져온 뒤, registerLazySingleton을 사용하여 MyHttpClient를 등록합니다.

import 'package:get_it/get_it.dart';

void setupDependencies() {
  final getIt = GetIt.instance;

  getIt.registerLazySingleton<MyHttpClient>(() => MyHttpClient());
}

여기서 registerLazySingleton 메소드는 MyHttpClient 인스턴스를 처음 요청할 때마다 생성하는 대신 한 번만 생성하고 같은 인스턴스를 반환하도록 합니다.

get_it을 사용하여 HTTP 요청하기

이제 get_it을 사용하여 등록한 MyHttpClient를 어디서든지 사용할 수 있습니다.

import 'package:flutter/material.dart';
import 'package:get_it/get_it.dart';

class MyHomePage extends StatelessWidget {
  final getIt = GetIt.instance;

  @override
  Widget build(BuildContext context) {
    final httpClient = getIt<MyHttpClient>(); // get_it에서 MyHttpClient 인스턴스 가져오기

    return Scaffold(
      appBar: AppBar(
        title: Text('HTTP Request Example'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Make Request'),
          onPressed: () async {
            final response = await httpClient.get('https://api.example.com/data');

            print(response.body);
          },
        ),
      ),
    );
  }
}

위 코드에서는 getIt<MyHttpClient>()를 사용하여 MyHttpClient 인스턴스를 가져왔습니다. 이후 버튼을 클릭하면 get 메소드를 사용하여 HTTP 요청을 보내고, 응답을 출력합니다.

이제 Flutter 앱에서 get_it를 사용하여 HTTP 요청을 처리하는 방법을 알게 되었습니다. get_it을 통해 의존성을 주입하면 코드를 더욱 모듈화하고 유지 보수하기 쉽게 만들 수 있습니다.

더 자세한 내용은 get_it 라이브러리의 공식 문서를 참조하시기 바랍니다.

get_it 라이브러리 추가하기

HTTP 클라이언트 생성하기

get_it으로 의존성 주입 설정하기

get_it을 사용하여 HTTP 요청하기

참고 자료