[Flutter]Retrofit을 이용한 엔드포인트 제작

한상욱·2024년 6월 5일

Flutter

목록 보기

13/26

들어가며

서버와의 통신을 위해서 반드시 엔드포인트를 제작하게 됩니다. 엔드포인트는 가장 기본적인 데이터 소스의 출처라고 할 수 있으며, http, dio 등을 함께 활용하여 제작하게 됩니다.

이러한 엔드포인트는 대부분 비슷한 형식으로 제작되게 됩니다. 이러한 반복적인 작업을 줄일 수 있는 엔드포인트 코드 제네레이터 라이브러리가 존재하는데요. 바로 Retrofit입니다.

Retrofit

Retrofit은 안드로이드 개발시 엔드포인트를 제작하는 라이브러리로 유명하죠. 이를 Flutter에서 사용할 수 있도록 제작한 라이브러리입니다. 자, 바로 들어가 볼까요?

일단 이전에 Provider로 제작한 MVVM 예제를 이용하도록 하겠습니다.
Provider를 이용한 MVVM 패턴 적용

//post_repository.dart

import 'dart:convert';

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

import '../model/base_response.dart';

class PostRepository {
  Future<BaseResponse> getAllPosts() async {
    final response =
        await http.get(Uri.parse("[실제 서버 Api Url]"));
    if (response.statusCode == 200) {
      final Map<String, dynamic> data =
          jsonDecode(utf8.decode(response.bodyBytes));
      return BaseResponse.fromJson(data);
    } else {
      throw Exception();
    }
  }
}

이 예제에서는 Http 라이브러리를 이용해 직접 엔드포인트인 PostRepository를 제작했습니다. 우리는 Retrofit을 이용해 이 엔드포인트를 바꿔보겠습니다. 다만, Retrofit은 Dio 라이브러리를 이용합니다. 그렇기에 의존성을 추가하면서 Dio도 함께 추가하겠습니다.

dependencies:
  ...
  dio: ^5.4.3+1
  retrofit: ^4.1.0

dev_dependencies:
  ...
  retrofit_generator: ^8.1.0 # 추가

Retrofit을 이용하기 위해 Json_Serializable도 필요에 따라 추가해주면 됩니다. 저는 이미 예제에서 Freezed를 통해 모델을 제작하였기에 추가되어 있습니다.

Retrofit을 이용해 바뀐 엔드포인트

import 'package:dio/dio.dart';
import 'package:flutter_provider_rest_api/src/model/base_response.dart';
import 'package:retrofit/http.dart';
import 'package:retrofit/retrofit.dart';

part 'post_repository.g.dart';

@RestApi(baseUrl: "실제 서버 Base Url")
abstract class PostRepository {
  factory PostRepository(Dio dio, {String baseUrl}) = _PostRepository;

  @GET("[메소드 Url]")
  Future<BaseResponse> getPosts();
}

@RestApi 어노테이션을 이용하면 Retrofit으로 정의한 엔드포인트 클래스를 만들 수 있습니다. 여기서, baseUrl을 통해 서버의 Base Url을 지정해 줄 수도 있습니다. @GET과 같은 어노테이션을 통해서 Get 메소드를 이용할 수 있습니다. 이렇게 정의하고 코드 제네레이션 명령어를 터미널에 입력하면 자동으로 엔드포인트가 생성되게 됩니다.