이 글은 공식 문서와 유튜브 강의를 보고 배운 내용을 바탕으로 정리한 글입니다.

Retrofit이란?

annotation 하나로 HTTP 엔드포인트에 대한 액션들을 자동으로 클래스화 시켜주는 라이브러리로 엔드포인트 별로 method를 자동으로 생성해준다(다른 언어, 프레임워크에도 존재)

왜 사용하는가?

엔드포인트 별 생성하고 싶은 메서드를 자동으로 생성, 조금 더 편하게 개발이 가능
ex) User를 조회하거나 생성하거나 삭제하는 등에 대한 메서드 자동 생성

사용방법

Package 설정

Retrofit을 사용하기 위해서는 pubspec.yaml에 몇가지 패키지들을 추가해줘야 한다.

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  dio:
  json_annotation:
  retrofit:



dev_dependencies:
  flutter_test:
    sdk: flutter
  retrofit_generator:
  build_runner:
  json_serializable:
  

필수 pacakages

• dio:
• retrofit:
• retrofit_generator:
• build_runner:

retrofit은 기본적으로 dio를 기반으로 통신하며, build_runner를 통해 코드를 생성한다.

json packages

• json_annotation:
• json_serializable:

클래스를 json화 시키는데 도움을 주는 패키지로, toJson, FromJson 메서드를 생성해준다

코드 작성

rest_client.dart

import 'package:dio/dio.dart';
import 'package:retrofit_test/token.dart';
import 'package:retrofit/retrofit.dart';

part 'rest_client.g.dart';

@RestApi(baseUrl: "http://localhost:8080")
abstract class RestClient {
  factory RestClient(Dio dio, {String baseUrl}) = _RestClient;

  @POST('/login')
  Future<Token> getAccessToken(@Body() Token token);
}

• @RestApi annotation을 이용해 baseUrl을 설정해준다
• part '파일명.g.dart'를 추가해준다 (후에 자동으로 생성)
• factory 생성자를 이용해 dio와 baseUrl을 parameter로 받는 객체 생성
• 사용할 엔드포인드를 설정하고 메서드와 데이터 타입을 설정
  ex) POST 요청으로 '/login' 경로로 요청, Token을 Body에 넘겨주고 Token을 받음

token.dart

import 'package:json_annotation/json_annotation.dart';

part 'token.g.dart';

@JsonSerializable()
class Token {
  @JsonKey(name: "access_token")
  String accessToken;

  Token({
    required this.accessToken,
  });

  factory Token.fromJson(Map<String, dynamic> json) => _$TokenFromJson(json);

  Map<String, dynamic> toJson() => _$TokenToJson(this);
}

• @JsonSerializable annotation으로 사용할 객체를 만듦
• @JsonKey annotation으로 json 태깅 설정 (default는 변수 이름)
• Json 변환 메서드(fromJson, toJson)을 작성
• part '파일명.g.dart'를 추가해준다 (후에 자동으로 생성)
  
  

터미널에 flutter pub run build_runner build 를 실행하면 코드가 생성된다.

결과 예시

retrofit_screen.dart

import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
import 'package:retrofit_test/rest_client.dart';
import 'package:retrofit_test/token.dart';

class RetrofitScreen extends StatefulWidget {
  const RetrofitScreen({Key? key}) : super(key: key);

  @override
  _RetrofitScreenState createState() => _RetrofitScreenState();
}

class _RetrofitScreenState extends State<RetrofitScreen> {
  late RestClient client;
  Token token = Token(accessToken: "request_access_token");

  @override
  void initState() {
    print(token.toJson());
    Dio dio = Dio();
    client = RestClient(dio);
    super.initState();

//api 요청 test
    Future.microtask(() async {
      final resp = await client.getAccessToken(token);
      print(resp.accessToken);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(),
    );
  }
}

main.go (간단한 응답 서버)

package main

'''

type Token struct {
	AccessToken string `json:"access_token"`
}

func main() {
	e := echo.New()
	e.Use(middleware.Logger())
	e.Use(middleware.Recover())

	e.POST("/login", func(c echo.Context) error {
		t := &Token{}
		if err := c.Bind(t); err != nil {
			return c.String(http.StatusBadRequest, "잘못된 요청")
		}
		fmt.Println("받은 토큰: ", t.AccessToken)

		return c.JSON(http.StatusOK, map[string]string{
			"access_token": "response_access_token",
		})
	})

	e.Logger.Fatal(e.Start(":8080"))
}

• go를 이용해 간단한 로컬 서버를 작성했다.

요청

{
  "access_token" : "request_access_token"
}

응답

{
  "access_token" : "response_access_token"
}

• 위 예시에서는 하나의 객체로 주고 받아서 요청과 응답의 형태가 같음 ( kakao_login 연습 중...)
• id를 넘겨서 User 정보를 조회하거나 특정 등 다양한 형태로 작성 가능
• flutter를 로컬 서버에 연결할 때는 IP주소를 입력해야 한다 (localhost로 호출x)

아직 공부가 부족해 기본적인 사용 방법만 익혀보았다. 그럼에도 상당히 편리한 기능들이 많이 있는 것 같다. 다음엔 공개되어 있는 api들을 이용해 실제 화면에 출력 해보도록 해야겠다.

참고링크

• Youtube 코드팩토리 https://www.youtube.com/watch?v=GNc20BkoA2w
• Rerofit packages https://pub.dev/packages/retrofit